笔记-vue指令

vue指令 
                 1，常见指令（11个）

                 2，v-for，v-if，v-show

                 3，怎么自定义指令？（5个钩子函数,4个参数）

                4，key值的作用

---------------------------------------------------------------------------------------------------------------------------------

1，v-modle，v-bind，v-on，v-once

   v-show，v-if，v-else-if，v-eles，v-for

   v-html，v-text

2，v-if：表达式（最终都转换为布尔值），操作dom的创建和删除。

   v-show：布尔值（最终都转换为布尔值），根据布尔值，修改元素的display属性是否为none来控制元素的显示和隐藏。

 所以：需要非常频繁切换的时候使用v-show。

3，自定义指令

 局部定义：

<script>
export default({
  //局部定义
  directives:{
      name:{ //指令名 v-name
        inserted:function(el,binding){ //钩子函数
        },
        update:function(binding){
        }
      }
    },
})
</script>

全局定义（main文件中定义）

Vue.directive('name',{   //指令名 v-name
	bind:function(el, binding){ //钩子函数
            ......
	}
})

钩子函数（生命周期流程，每个钩子函数根据特性一般用来做什么，不能做什么？）

bind：一次性，在第一次绑定到元素时调用，可以进行一次性的初始化设置。

unbind：一次性，在指令解绑时调用。

inserted：指令绑定的元素插入到父节点中时调用（只能保证父节点存在，不一定被插入文档中）

update：更新时调用

componentUpdated：指令所在组件中的VNode（虚拟dom）及子节点的VNode全部更新完毕时调用。

钩子函数的参数

el：指令绑定元素

vnode：虚拟dom

oldvnode：旧的虚拟dom，仅在update和componentUpdated中可以使用

binding：一个对象，包含很多属性

              name：不包含v-的指令名

              value：绑定的值，v-xxx=x

              oldvalue：绑定之前的值（不理解），仅在update和componentUpdated中可以使用

              expression：字符串类型的表达式，例如：v-xxx="1+1"，值为："1+1"

              arg:传给指令的参数，例如：v-xxx：xx，参数为：xx

              modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为

                                foo: true, bar: true }。（不理解）

4，key值

key值作为唯一标识，在dom节点修改更新时，使用diff算法进行比较虚拟dom，在比较时通过key值相同的部分进行同级比较。

为什么在v-for遍历时不推荐使用索引来作为key值？

在操作dom时可能改变节点的index，比如说：删除了前面的dom，后面dom的索引都会改变，这样再使用key值进行比较时，会出问题。