一、起步
1、v-model(绑定数据)
2、v-for（循环）
3、v-on（绑定事件）
4、data（数据）
5、methods（方法）
6、$index（索引）
二、概述
1、data（绑定 DOM 文本到数据）
2、v-if（不满足条件的话则不会出现在dom中）
3、v-show（不满足条件，则样式会设置成隐藏 display:none;）
4、组件
eg:









三、Vue实例
1、构造器：Vue.extend
2、数据属性：vm.a
3、实例属性和方法：
   1）vm.$el
   2）vm.$data
   3）vm.$watch
   4）实例生命周期
   eg:
   var vm4 = new Vue({
        data: {
            a: 1
        },
        beforeCreate:function(){
            //创建前
        },
        created: function(){
            console.log(‘a is: ‘ + this.a);      // `this` 指向 vm 实例
        },
        beforeMount:function(){
            //加载前
        },
        mounted:function(){
            //加载后
        },
        beforeUpdate:function(){
            //更新前
        },
        updated:function(){
            //更新后
        },
        beforeDestroy:function(){
            //销毁前
        },
        destroyed:function() {
            //销毁后
        }
    });
四、数据绑定语法 
1、文本插值：
   {{msg}}
2、单次绑定：
   v-once {{msg}}
3、纯HTML：
   v-html
4、绑定表达式：
   {{number+1}}
5、过滤器：
       {{ message | filterA | filterB }}、{{ message | filterA ‘arg1‘ arg2 }} 
6、指令：
Hello!

   带参数的指令： 


   带修饰符的指令：

   指令缩写：
                                          ->  
Button   ->  Button
                                        ->   
五、Vue实例
1、构造器：
    var data = { a: 1 };
    var vm6 = new Vue({                                 //每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例
        el: ‘#example‘,
        data: data,
        beforeCreate:function(){},                      //创建前
        created: function(){                            //创建后
            console.log(‘a is: ‘ + this.a);             //`this` 指向 vm 实例
        },
        beforeMount:function(){},                       //加载前
        mounted:function(){},                           //加载后
        beforeUpdate:function(){},                      //更新前
        updated:function(){},                           //更新后
        beforeDestroy:function(){},                     //销毁前
        destroyed:function() {}                         //销毁后
    });
2、扩展Vue构造器，从而用预定义选项创建可复用的组件构造器：
     var MyComponent = Vue.extend({
         //扩展选项
     });
     var myComponentInstance = new MyComponent();       //所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
3、属性和方法
     console.log( vm6.a === data.a );                   //true
     //设置属性也会影响到原始数据
     vm6.a = 2;
     console.log( data.a );                             //2
     //反之亦然
     data.a = 3;
     console.log( vm6.a );                              //3
     vm6.b=5;                                           //注意：只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新
     console.log(data.b);                               //undefined
4、实例属性与方法：这些属性与方法都有前缀$，以便与代理的数据属性区分
    vm6.$data === data                                  //true
    vm6.$el === document.getElementById(‘example‘);     //true
    vm6.$watch(‘a‘, function (newVal, oldVal) {});      //$watch 是一个实例方法，这个回调将在 `vm.a`  改变后调用
六、数据绑定语法
1、文本插值：
Message:{{ msg }}                       //每当这个属性变化时它也会更新
This will never change:{{ msg }} //一次性绑定
2、纯 HTML：
                         //大括号会将数据解释为纯文本，为了输出真正的 HTML ，需使用 v-html 指令，你不能使用 v-html 来复合局部模板，组件更适合担任 UI 重用与复合的基本单元
3、属性：

4、绑定表达式：
    {{ number + 1 }}
    {{ ok ? ‘YES‘ : ‘NO‘ }}
    {{ message.split(‘‘).reverse().join(‘‘) }}
    一个限制是每个绑定只能包含单个表达式，因此下面的语句是无效的：
    {{ var a = 1 }}                                     //这是一个语句，不是一个表达式
    {{ if (ok) { return message } }}                    //流程控制也不可以，可改用三元表达式
5、过滤器：
    {{ message | capitalize }}                          //这个过滤器其实只是一个 JavaScript 函数，返回大写化的值
    {{ message | filterA | filterB }}                   //过滤器可以串联
    {{ message | filterA ‘arg1‘ arg2 }}                 //过滤器也可以接受参数：第一个参数—为过滤器函数，带引号的参数—为字符串，不带引号的参数—按表达式计算
6、指令： 职责是—当其表达式的值改变时把某些特殊的行为应用到 DOM 上
Hello!
                       //v-if 指令将根据表达式 greeting 值的真假删除/插入 
 元素
7、参数：
                               //v-bind 指令，用于响应地更新 HTML 特性，用特性插值 href="http://www.soscw.com/{{url}}" 可获得同样的结果，但实际上它也是在内部特性插值，转为 v-bind 绑定
                        //v-on 指令，用于监听 DOM 事件，参数是被监听的事件的名字
8、修饰符：以半角句号 . 开始的特殊后缀，表示指令应当以特殊方式绑定

9、缩写：
                               //完整语法
                                     //缩写
                        //完整语法
                            //缩写
七、计算属性 $watch、computed、计算属性的getter、setter属性
1、计算属性：
    var vm = new Vue({
        el: ‘#example‘,
        data: {
            a: 1
        },
        computed: {
            b: function () {            //一个计算属性的 getter
                return this.a + 1;      //`this` 指向 vm 实例
            }
        }
    });
    console.log(vm.b);                  //2
    vm.a = 2;
    console.log(vm.b);                  //3
2、计算属性 $watch与computed对比：
    var vm2=new Vue({
        el:"#example2",
        data:{
            firstName:‘Foo‘,
            lastName:‘Bar‘,
            fullName:‘Foo Bar‘
        }
    });
    vm2.$watch(‘firstName‘,function(val){
        this.fullName=val+‘ ‘+this.lastName;
    });
    vm2.$watch(‘lastName‘,function(val){
        this.fullName=this.firstName+‘ ‘+val;
    });
    var vm3=new Vue({
        el:‘#example2‘,
        data:{
            firstName:‘Foo‘,
            lastName:‘Bar‘
        },
        computed:{
            fullName:function(){
                return this.firstName+‘ ‘+this.lastName;
            }
        }
    });
3、计算 setter：
    var vm = new Vue({
        el: ‘#demo‘,
        data: {
            firstName: ‘Foo‘,
            lastName: ‘Bar‘
        },
        computed: {
            fullName: {
                get: function () {                  //getter
                    return this.firstName + ‘ ‘ + this.lastName;
                },
                set: function (newValue) {          //setter
                    var names = newValue.split(‘ ‘);
                    this.firstName = names[0];
                    this.lastName = names[names.length - 1];
                }
            }
        }
    });
    //现在在调用 vm.fullName = ‘John Doe‘ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会有相应更新
八、class与style绑定（数据绑定在data上）
1、绑定class
    1）对象语法

    2）数组语法


  
2、 绑定内联样式style
    1）对象语法

    2）数组语法
text
        
九、条件渲染 v-if、v-show、v-else(条件指令不能在实例元素上使用)
1、在字符串模板中，如 Handlebars，我们得像这样写一个条件块：
    {{#if ok}}
Yes

    {{/if}}
    * 注意，以下所有的条件指令，都不能在实例根元素上使用
    1）v-if，v-else
    HTML:


Yes





No



    JS:
        var vm=new Vue({
            el:"#box1",
            data:{
                greeting:false
            }
        });
        var vm2=new Vue({
            el:"#box2",
            data:{
                greeting2:false
            }
        });
    2）多个元素v-if，需要将v-if添加到包装元素template上，最终的渲染结果不会包含它
    HTML:





    JS:
        var vm3=new Vue({
            el:‘#box3‘,
            data:{
                ok:false
            }
        });
    3）v-show 指令： 也是根据条件展示元素的选项，但它只是切换display属性。注意，v-show 不支持