一、 Vue的初始化

 let vm = new Vue({
          //挂载点
          el: '#app',
          data: {
            msg: 'hello'
          }
        });
   

二、 vue的指令

1. {{}}

2. v-html

3. v-text

4. v-bind:title

5. :title

6. v-if

7. v-else

8. v-show

9. v-cloak

10. v-for (数组，对象， [{},{}])

三、key值： 提高性能

四、事件绑定：

（1） 模板（视图） <p v-on:click="change"></p>

    (2)  methods: {
          change: function(){}
    }

五、数组更新检测

              this.arr[3] = "aaa"  // 不能触发视图更新
              Vue.set(this.arr,3,'aaa')  //可以触发视图更新
               this.arr.splice(1,0,'ccc')  //可以触发视图更新
               this.arr.splice(1,1,'ccc')  //可以触发视图更新
              vm.$set(this.arr,3,'aaa')  //可以触发视图更新

六、对象更新检测

1. 添加一个新属性

this.obj.color = 'green' // 不会引起视图更新（重新渲染）

     Vue.set(this.obj,"color","green")   //有用
     vm.$set(this.obj,"color","green")  //有用
     this.$set(this.obj,"color","green")  //有用

2. 修改一个已经在data中注册过的属性

this.obj.name = 'John'  //有用

七、双向数据绑定： v-model (只针对表单元素)

    <input type="text" v-model="msg" />

    data:  {
      msg: 'hello'
    }

八、事件绑定和事件修饰符

     <button v-on:touchstart="fun">交互</button>
     <button @touchstart="fun">交互</button>
     <button @touchstart="fun('red')">交互</button>
     <button @touchmove.prevent.stop="fun('red')">交互</button>
     <input @keyup.enter.38="fun('red')" />

     methods: {
       fun(color){

       }
     }

九、计算属性、方法、侦听器

计算属性：

<p>总价： {{total}} </p>

{{total}}

data: {
  price: 10,
  num: 23
},
computed: {
  total(){ 
    return this.price * this.num
  }
}

方法：

  <p>总价： {{total()}} </p>

  {{total()}}

  data: {
    price: 10,
    num: 23
  },
  methods: {
    total(){ 
      return this.price * this.num
    }
  }

侦听器：

    <p>总价： {{total}} </p>

    {{total}}

    data: {
      price: 10,
      num: 23,
      total: 0
    },
    watch: {
      price(){ 
        this.total = this.price * this.num
      }
      num(){
        this.total = this.price * this.num
      }
    }

十、class的处理

对象语法：

    <!-- <p :class="{active: isActive}">2</p> -->

    <!-- <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> -->

    <!-- <div v-bind:class="classObject1"></div> -->

    <div v-bind:class="classObject2"></div>


    data: {
        isActive: true,
        hasError: true,
        classObject1: {
          active: true,
          'text-danger': false
        },
        error:null

      },
      computed: {
        classObject2: function () {
          return {
            active: this.isActive && !this.error,
            'text-danger': this.error && this.error.type === 'fatal'
          }
        }
      }

数组语法

    <div v-bind:class="[activeClass, errorClass]"></div>

    <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

    <div v-bind:class="[{ active: isActive }, errorClass]"></div>

十一、生命周期函数（钩子函数）

1、 beforeCreate created

2、 beforeMount mounted

3、 beforeUpdate updated

4、 beforeDestroy destroyed