2019-04-08 Vue小结：

一、 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） 模板（视图）

    (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 (只针对表单元素)

    

    data:  {
      msg: 'hello'
    }

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

     交互
     交互
     交互
     交互
     

     methods: {
       fun(color){

       }
     }

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

计算属性：

总价： {{total}} 

{{total}}

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

方法：

  
总价： {{total()}} 

  {{total()}}

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

侦听器：

    
总价： {{total}} 

    {{total}}

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

十、class的处理

对象语法：

    

    

    

    



    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'
          }
        }
      }

数组语法

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

1、 beforeCreate created

2、 beforeMount mounted

3、 beforeUpdate updated

4、 beforeDestroy destroyed