首页 > 如何学习vuejs

如何学习vuejs

刚刚看完vuejs中文文档,结果还是一头雾水。。。不知道具体到项目该怎么使用vuejs,感觉文档上的例子比较少,解释的也不怎么清楚(当然很可能是我水平太差了。。);开始看的时候也觉得不怎么难如果只是那种简单的数据绑定的话,可是到后面组件的时候就有点看不懂了,再到后面构建大型应用网站就更是云里来雾里去的。。。
在网上找这方面的资料好像不怎么多或者说都很零碎,我想问一下各位是怎么学习vue的有没有什么好的资料,要怎样才能做到用vue+vue-router+node完成一些项目


个人历程,每个阶段我都总结有相应的文章:

  1. 多看几遍文档,了解组件化开发

  2. 学习模块打包,自己搭建一个脚手架:
    vue.js模块化使用尝试1、vue.js模块化使用尝试2

  3. 然后开始做一些项目,推荐做一些单页spa,例如我的这个:https://github.com/Geocld/vue...,这样一个流程下来去一家公司没问题。


首先文档不管怎么样也得看个3-5遍吧,父子组件,基本属性方法了熟于心,再考虑配合node玩node构建单页吧!

如果只说这么多你肯定会觉得我喷你,不多说,贴论坛,自己找资源 http://vue-js.com/。


先做一遍官网示例


一个简单入门的demo https://github.com/TIGERB/eas...


写demo啊,连demo都不写,谈什么学习。。。
然后可以考虑把以前写过的一些代码用vue重构啊
用vue的好处就在于,终于可以不用在js里面写那些恶心的html字符串了。。。
而且数据过来,人家vue帮你耦合到html页面里有木有
超方便的有木有
终于不用写那些烦人的for循环拼接字符串了有木有

所以,还是那句话,先从官网的例子抄起来
然后自己写写demo
最后尝试重构下以前的代码

==========2016-9-1 20:32:46补充========
vue这类框架其实也是一个很好的js面向对象编程的实践:

    new Vue({
        el:'#demoElement',
        data:{
            massage:'这是一个模板填充字符串',
            //虽然按照vue的例子,data里面大部分都是用在html里面的"{{massage}}"
            //但是你完全可以把data这个类当成面向对象里面的属性,即attribute
            loop:'',
            ctx:document.getElementsByTagName('canvas')[0].getContext('2d'),
        },
        methods:{//这个不用说了吧,从名字就可以看出来,方法类
            run:function(){
                this.loop=setInterval(this.init,1000);
            },
            init:function(){
                this.stop();
                //to do sth
            },
            stop:function(){
                clearInterval(this.loop);
            }
        }
        /*还有什么computed啊,filters(2.0版本之前的滤镜类)啊等等,都差不多类似*/
    })

比如说,你写一个弹窗,怎么样才能让它看起来像是一个组件呢?
答案就是:把这个弹窗当成一个对象:

    弹窗={
        属性:{
            弹窗标题,
            弹窗内容
        },
        方法:{
            打开弹窗,
            关闭弹窗
        }
    }

对照上面vue的代码,是不是有点类似了呢?
希望能给你做个启发


awesome-vue,vue相关的优秀资源合集,把他们看完了,你就成大神了。

【热门文章】
【热门文章】