新玩家Vue笔记13

提示：该文章为笔者的个人笔记并不是权威，如有错误，谢谢指出。

---

自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

---

<div id="root">
	<h2>当前的n值是：<span v-text="n"></span> </h2>
	<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
	<button @click="n++">点我n+1</button>
	<hr/>
	<input type="text" v-fbind:value="n">
</div>
	
<script>
	Vue.config.productionTip = false
	new Vue({
		el:'#root',
		data:{
			n:1
		},
		directives:{
            //big函数何时会被调用？1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时
			big(element,binding){
				console.log('big',this) //注意此处的this是window
				element.innerText = binding.value * 10
			},
			fbind:{
				//指令与元素成功绑定时（一上来）
				bind(element,binding){
					element.value = binding.value
				},
				//指令所在元素被插入页面时
				inserted(element,binding){
					element.focus()
				},
				//指令所在的模板被重新解析时
				update(element,binding){
					element.value = binding.value
				}
			}
		}
	})
</script>

---

总结

1. 局部指令：
   • new Vue({ directives:{指令名:配置对象} })
   • new Vue({ directives:{指令名:回调函数} })
2. 全局指令：
   • Vue.directive(指令名,配置对象)
   • Vue.directive(指令名,回调函数) 
3. 配置对象中常用的回调函数： 
   • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
   • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
   • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。