Vue-计算属性，指令，key

模板语法

内容

vue中的元素内容使用mustache模板引擎进行解析

mustache：https://github.com/janl/mustache.js

指令

指令会影响元素的渲染行为，指令始终以v-开头

基础指令：

• v-for：循环渲染元素
• v-html：设置元素的innerHTML，该指令会导致元素的模板内容失效
• v-on：注册事件
  • 该指令由于十分常用，因此提供了简写@
  • 事件支持一些指令修饰符，如prevent
  • 事件参数会自动传递
• v-bind：绑定动态属性
  • 该指令由于十分常用，因此提供了简写:
• v-show：控制元素可见度
• v-if、v-else-if、v-else：控制元素生成
• v-model：双向数据绑定，常用于表单元素
  • 该指令是v-on和v-bind的复合版
  • event.target.value

进阶指令：

• v-slot
• v-text
• v-pre
• v-cloak
• v-once
• 自定义指令

特殊属性

最重要的特殊属性：key

该属性可以干预diff算法，在同一层级，key值相同的节点会进行比对，key值不同的节点则不会

在循环生成的节点中，vue强烈建议给予每个节点唯一且稳定的key值

其他特殊属性：

• ref
• is
• slot
• slot-scope
• scope

计算属性

computed: {
  // 仅访问器
  prop(){
    return ...
  }
  // 访问器 + 设置器
  fullProp: {
    get(){
      return ...
    },
    set(val){
      ...
    }
  }
}

计算属性和方法的区别：

• 计算属性可以赋值，而方法不行
• 计算属性会进行缓存，如果依赖不变，则直接使用缓存结果，不会重新计算
• 凡是根据已有数据计算得到新数据的无参函数，都应该尽量写成计算属性，而不是方法