Vue 模板指令

{{数据}} // 插值
v-text='数据' // 带标签的数据不会解析
v-html='数据' // 会解析 html 标签的数据
 
v-if='表达式' // 判断真假，创建或删除; 可选 v-else-if/v-else
v-show='表达式' // 显示或隐藏
v-bind:属性名='数据' // 动态绑定属性
 :属性名 // 动态绑定简写
:style // 数组动态更新,对象 {样式:值} 改变不会被检测
:class // 数组动态更新,对象 {类名:true} 改变不能被检测
  // 对象解决方法 --> Vue.set(改变的对象数据,'新属性','值')
  // 数组[下标]不能更新解决办法 --> Vue.set(改变的数组,'下标','值')或splice

v-on:事件='方法' // 绑定事件
@事件='方法' // 绑定事件简写
v-bind:[attribute] // 动态参数 2.6.0 +
v-on:[eventName]  // 动态参数

v-for='' // 遍历 in/of 关键字, (item,i) in arr; (val,key,i) of obj;n in 9;
v-model='变量' // 表单双向绑定 
  // text   --> 获取文本框的值; 
  // checkbox --> 单选返回 true/false，多选返回数组[每个复选的 value]; 
  // radio  --> 返回单选的 value 值
  // select  --> 单选值为选中的 value，多选为数组

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">

vm.toggle === 'yes' // 当选中时 
vm.toggle === 'no' // 当没有选中时

自定义指令

<input v-focus='{i}' type="text" v-model='i'>
Vue.directive('focus', function(el,obj){ // el 原生，obj 参数
  console.log('元素被创建/更新都会被调用');
})

// 注册
Vue.directive('my-directive', {
  bind: function () {}, // 创建/绑定
  inserted: function () {}, // 插入
  update: function () {}, // 更新
  componentUpdated: function () {}, // 组件更新后
  unbind: function () {} // 解绑
})