Vue成神之路（三）：Vue自带指令学习和自定义指令了解

一：vue内置指令学习

1. v-model（.lazy .trim .number）
   

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

6. v-text 相当于 {{变量名}}
   用途：渲染数据是单向的，单纯的文本
7. v-html 相当于 变量名当做html解析
   用途：渲染数据是单向的，需要渲染html内容
8. v-for
   用途：用于数组进行渲染节点，同时展现数据内容
   注意：上面的指令可以组合使用，就可以完成比较复杂的业务场景
9. v-cloak
   用途：直到先渲染
   {{masseg}}
   然后再渲染
   内容
   ，就是给用户一种良好的页面感觉，用户最终看到的内容不会有中间的{{}}出现
10. v-once
    用途：v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。

二：vue自定义指令学习

1. 自定义指令的两种注册方式
   全局注册和局部注册，和组件的注册方式一样

//全局注册
Vue.directive('focus',{
 //指令选项
});
 
//局部注册
var app = new Vue({
		 el: '#app',
		 directive: {
				 focus: {
				 //指令选项
			  }
       }
});

2.自定义组件注册属性以全局注册为例
Vue.directive(‘focus’,{bind(el, binding, vnode,oldVnode){

		},

//指令选项
});
a.自定义指令名称
b.指令钩子函数选项：
bind： 指令挂载到元素上只调用一次。
inserted： 指令所在元素插入到父元素时候调用。
update：指令所在元素更新调用。
componentUpdated： 被绑定元素所在模板完成一次更新周期时调用。
unbind： 元素销毁与指令解绑调用。
c.钩子函数参数：
el： 指令所绑定的元素，可以用来直接操作DOM
binding： 一个对象，包含以下属性：
name：指令名，不包括v-前缀
valule：指令的绑定值，例如v-my-directive=“1 + 1”，value的值是2
oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用
expression：绑定值的字符串形式。例如v-my-directive=“1 + 1”，expression的值是”1 + 1“
arg：传给指令的参数。例如v-my-directive:foo，arg的值是foo
modifiers：一个包含修饰符的对象。例如v-my-directive.foo.bar，修饰符对象modifiers的值是{ foo:true, bar:true}
vnode： Vue编译生成的虚拟节点。
oldVnode： 上一个虚拟节点仅在update和componentUpdated钩子中可用。