Vue指令详解

建议在使用v-for时尽量提供key，除非遍历输出的DOM内容非常简单，或者故意依赖默认行为来提高性能。因为它是Vue识别节点的通用机制。从虚拟DOM的Diff算法实现来看：比如我们希望在B和C之间增加一个F，Diff算法默认是这样执行的：即更新C为F，更新D为C，更新E为D.最后插入E是不是效率低？所以我们需要用key为每个节点做一个唯一的标识，Diff算法才能正确识别这个节点，找到正确的位置插入新的节点。所以总之，key的作用主要是高效更新虚拟DOM。v-on修饰符.stop调用event.stopPropagation()。防止冒泡。防止调用event.preventDefault()。取消事件的默认操作此方法将通知Web浏览器不要执行与该事件关联的默认操作（如果存在此类操作）。例如，如果类型属性为“提交”，则可以在事件传播的任何阶段调用任何事件处理程序，通过调用此方法，可以防止表单被提交。注意，如果Event对象的cancelable属性是fasle，那么就没有默认动作，或者无法阻止默认动作。在任何一种情况下，调用此方法都没有效果。.capture添加事件侦听器时使用捕获模式。（也就是给元素添加监听器，当元素冒泡时，有修饰符的元素先触发，如果有多个修饰符，则由外向内触发，谁有事件修饰符，谁先触发.).self仅在从侦听器绑定到的元素本身触发事件时触发回调。（相当于忽略其他元素的冒泡或捕获事件）。{键码|keyAlias}仅当从特定键触发事件时才触发回调。.native监听组件根元素的原生事件。.once只触发一次回调。.left-(2.2.0)仅在单击鼠标左键时触发。.right-(2.2.0)仅在单击鼠标右键时触发.middle-(2.2.0)仅在单击鼠标中键时触发.passive-(2.3.0)在{passive:true中添加侦听器}模式，减少额外的监听，提高性能（表示监听器永远不会调用preventDefault()。如果监听器仍然调用这个函数，客户端会忽略它并抛出控制台警告。)用于滚动性能优化——滚动事件的默认行为（即滚动行为）会立即触发，无需等待onScroll完成https://blog.csdn.net/shenlei...v-model只是以下实例的语法糖所以在子组件中你可以这样写：props:['value'],data(){return{//创建props属性的副本value_p:this.value}},watch:{//监听props属性的值并更新副本中的值realtimevalue(val){this.value_p=val}}methods:{valueChange(){//触发Input事件，将新增的传递给父组件，父组件会自动更新this.$emit('input',this.value_p)}}v-bindmodifier.sync可用vue2.0移除了sync修饰符以简化父子组件的双向数据绑定，在vue2.3.0重新引入。但这次它只是一个编译时语法糖。它将扩展为自动更新父组件属性的v-on侦听器。将扩展为props:['title'],data(){return{//创建props属性的副本title_p:this.title}},watch:{//监听props属性的值并更新副本中的值实时标题（val）{这个。title_p=val}}methods:{valueChange(){//当值改变时，显式触发update事件，父组件自动更新this.$emit('update:title',this.title_p)}}v-once只渲染元素和组件一次。随后的重新呈现、元素/组件及其所有子项将被视为静态内容并被跳过。这可用于优化更新性能。自定义指令注册全局注册Vue.directive('focus',{//当绑定元素插入到DOM中时...inserted:function(el){//聚焦元素el.focus()}})local注册指令:{focus:{//指令的定义inserted:function(el){el.focus()}}}Hookfunctionbind:只调用一次，当指令第一次绑定到元素上时。可以在这里进行一次性的初始化设置。inserted：绑定元素插入到父节点时调用（只保证父节点存在，不一定插入到文档中）。update：组件的VNode更新时调用。componentUpdated：命令所在组件的VNode及其子VNode全部更新后调用。unbind：仅在指令与元素解除绑定时调用一次。钩子函数参数el：指令绑定的元素，可用于直接操作DOM。binding：包含以下属性的对象：name：命令名称，不包括v-前缀。value：指令的绑定值，例如：在v-my-directive="1+1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否已更改均可用。expression：字符串形式的指令表达式。例如，在v-my-directive="1+1"中，表达式为"1+1"。arg：传递给命令的参数，可选。例如，在v-my-directive:foo中，参数是“foo”。修饰符：包含修饰符的对象。例如：在v-my-directive.foo.bar中，修饰符对象为{foo:true,bar:true}。vnode：Vue编译生成的虚拟节点。oldVnode：前一个虚拟节点，仅在update和componentUpdatedhooks中可用。对象文字如果指令需要多个值，则可以传入JavaScript对象文字。请记住，指令函数接受所有有效的JavaScript表达式。