Vue.js初探

1. Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
2. Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
3. Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
4. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
   ————————VueJS————————

---

个人总结：关注数据，数据驱动页面

---

基本套路

1.使用

> %注意：Vue版本1和2在appName的位置有所不同，Vue2不再支持绑定到body以及html

4.在HTML中使用{{ varName }} 方式引用data内的数据，如：

        

            {{name}}
            {{article.title}}
            {{ jobs[0] }}
        

5.指令v-model，进行数据绑定，在控制区域内使用，如：

        

            
            
Message is: {{ message }}
        

%注意：单纯的这种方式，在Vue2版本下并未实现，Vue1版本支持。message必须在data内才有效。

6.指令v-for，对可迭代对象进行遍历，array object string number如：

        

            {{item}}
            {{key}}:{{value}}
        

> %注意：指令也是扩展了HTML属性，与Angular是一样的

7. 事件绑定使用v-on: eventHandler='doSomething', 如：

        {{a}}

    doSomething也可以是一个函数的调用，通常用法也是这样的
> %注意：如果想直接改变style样式的属性值，需要将style放置在appName的范围之内才能起作用

8.数据遍历的几种形式：

______一定要注意参数的顺序:

{{item}}

          
{{index}} : {{item}}

            
{{key}} : {{value}}
            

{{value}}
            

{{key}} : {{value}}:{{index}}

     
{{ n = n * 2 }}

9.computed可用于制作过滤器：

#可用于过滤掉身高小于等于10的人，在相应出直接使用biggerThan即可。        
        computed: {
            biggerThan: function() {
                var men = function(height){
                    return height > 10
                }

                return this.array.filter(men)
            }
        }
        

10.Vue.js没有ajax方法，可用如下方法替代：

    # 原生JS的XHR
    # jQuery库的ajax方法
    # fetch方法（以后可能会替代AJAX）
    # 及其他

总结：

使用上述介绍，使用localStorage来保存数据，可以做一个TODOlist的单页应用了。还蛮有意思的。