Vue注意细节

1. 基础
   • a. 引入vue.js，
   • b. 创建vue对象，并绑定id/类。
   • c. 插值

     //直接用{{}}
      {{message}} 
     //计算，支持三元运算
      {{num1+num2}} 
     //字符串中(拼接)
       
     

   • d. $取系统的值 如：vm.$el vm.$data
2. 指令

v-bind : 单向绑定，绑定样式（class/style/id/href/key/title/disabled），绑定props的属性

v-on：绑定事件

v-model: 数据双向绑定 ( 绑定input、select、textarea、checkbox、radio 等表单控件的value)

v-once: 只执行一次性地插值
v-html: html插值（显示html加载后的效果）

3. v-if和v-show
v-if: 条件选择，适用于界面第一次加载时使用
   v-if是通过控制dom节点的存在与否来控制元素的显隐，条件不满足是不会加载到dom中的，更新花销更大。如下：当show为0时，只存在
   第一层

  
        

            
 第一层 
            
 第二层 
            
 第三层 
        
  
    
    

v-show: 选择是否显示，适用于界面频繁刷新（如：点击按钮控制一个div的显隐）

    
        

            
 第一层 
            
 第二层 
            
 第三层 
            点击
        
  
    
    

v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
当show为0时，样式为:

 第一层 
 第二层 
 第三层 

4. mixin 混入
   简单而言就是多继承。不同方法继承，相同方法覆盖（Vue对象的方法级别最高，其他混入的mixin按先后顺序覆盖，换而言之就是最后混入的获得调用）

5. Vue 是响应式的。data中的数据更新时会刷新整个dom(一级目录比较敏感，下级不一定能成功)，Vue 不能检测数组和对象的变化

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2  // `vm.b` 是非响应式的
Vue.set(vm.someObject, 'b', 2) //单个值响应
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) //多个值响应

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
vm.items = ['x', 'b', 'c']； //全部替换，响应性的

Vue.set(vm.items, indexOfItem, newValue) //indexOfItem处的值更新为newValue
vm.items.splice(indexOfItem, 1, newValue) //在indexOfItem位置添加一个新值
vm.items.splice(indexOfItem) //删除indexOfItem到结尾处的值

vm.items.forEach((item)=>{
    Vue.set(item,"goodlist",result.data); //指定位置插入goodlist的列表
    Vue.set(item,"offset",0); //指定位置插入offset字段值为0                       
});

6. 属性

    
        

            
            
  {{ firstName | capitalize }} {{lastName}} 
            点击

            
 {{money | local(font)}}
        
  
    
    

7. 生命周期
   

   生命周期
   
   created，mounted，destoryed只调用一次，updated会多次调用。

8. 父组件与子组件的互调
   a. 父组件向子组件传值

//main.js 全局引入组件（也可以局部引入，这边图个方便）
import cuTest from './components/test.vue'
Vue.component('test',cuTest)

//父组件


//子组件

通过v-bind单选绑定，传递num值。
如果想要在子组件修改传递的num，使用this.num++类似的修改方法是会报错的。这时需要这样操作，修改子组件：

使用一个新的n接收num数据，通过watch监听num的数据变化

b. 子组件向父组件传值
我们将接收的num修改后再传给父组件

//子组件
ontap() {
  this.n = this.num + 100;
  this.$emit('ontap', this.n);
}
//父组件

通过this.$emit向父组件传值，父组件通过@ontap（注意和emit的第一参数函数名一致）绑定onChange方法。
接收多个参数时

//和之前对应
this.$emit('ontap', a, b, c);
onChange(msg) {
    let a = msg[0];
    let b = msg[1];
    let c = msg[2];
}

c. sync 简化
在父组件中添加sync修饰，会自动在父组件中创建update:num(对应.sync的前值)的事件，父组件就不需要再去写接收方法，去掉@ontap="onChange"

在子组件中

this.$emit('ontap', this.n); => this.$emit('update:num', this.n); //替换

这样就能自动同步父与子组件的参数值了