内置指令

v-bind:xxx 单项绑定解析表达式 :xxxx
v-model 双向数据绑定
v-for 遍历数组/对象/字符串
v-on:clikc.. 绑定事件监听， @:click
v-if 条件渲染（动态控制节点是否存在）
v-else 条件渲染
v-show 条件渲染（动态控制接节点是否展示）
v-text 将当前标签的内容替换成v-text的文本内容
v-html
v-cloak 只有在vue实例加载后才去除v-cloak
v-once 所在节点上初次动态渲染后，就视为静态内容，以后数据的改变不会引起v-once所在结构的更新，可用于优化性能
v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译 防止与后端的解析冲突 
  1. <div v-text="textStr"></div> //将textStr替换掉div中的全部数据
  1. <style> 
  2.   [v-cloak]{
  3.         display:none;
  4.   }
  5. </style>
  6. <h2 v-cloak>{{ name }}</h2> //等待vue加载完成再显示当前内容

自定义指令

  1. 指令函数何时调用
    1. 指令与元素成功绑定时(初始化)，
    2. 指令所在的模板被重新解析 .vue文件
  2. this指向为window，值以传参进入
    1. v-指令名
    2. //对象式             ---全局指令
    3. Vue.directive('指令名',{
    4.  inserted:function(el,binding){
    5.    el.innerText = binding.value
    6. }
    7. })                        --- 局部指令
    8. directives:{
    9.  指令名:{
    10. inserted:function(el,binding){
    11.     el.innerText = binding.value
    12. }
    13. }
    14. }
    15. 函数式                        
    16. Vue.directive('color-swatch', function (el, binding) {
    17. el.style.backgroundColor = binding.value
    18. })
    19. directives:{
    20.  指令名(el,binding){
    21.     el.innerText = binding.value
    22. }
    23. }
    24. }