一,全局指令
1,自定义全局指令
使用Vue.directive()定义全局指令,参数1:指令的名称 参数2:对象,这个对象身上 有一些指令相关的钩子函数 这些函数可以在特定的阶段执行相关操作
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
-
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。插入到DOM中会被执行,只除非一次 -
update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。可触发多次
Vue.directive('focus', {
//注意 在每个函数中 第一个参数永远是el,表示被绑定了指令的元素,这个el是一个原生的JS对象
// 在元素刚绑定指令 还没有插入到DOM中去 这时候调用方法没有作用 因为一个元素 只有插入DOM之后才能获取焦点
bind: function(el){
el.focus()
},
inserted: function(el){
el.focus()
},
updated: function(el){
}
})
2,页面调用,Vue中所有的指令 在调用的时候 都是以 v-开头
<div id="app"> <input type="text" name="" id="" v-focus> </div>
二,私有指令
directives:{
'指令名称': function(el,args){
// 钩子函数
bind: function(){}
}
}
例如
var vm = new Vue({
el: '#app',
data: {},
methods: {},
directives: { //自定义私有指令,注意要加s
'fontweight': {
bind: function(el, binding){
el.style.fontWeight = binding.value
}
},
'color': {
bind: function(el, binding){
el.style.color = binding.value
}
}
}
})
2,页面调用
<div id="app"> <input type="text" name="" id="" v-focus > <h3 v-fontweight="200" v-color="'pink'">你好</h3> </div>
三,指令简写
在很多时候,你可能想在 bind
和 update
时触发相同行为,而不关心其它的钩子。比如这样写:
全局指令简写:
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
私有指令简写:
var vm = new Vue({
el: '#app',
data: {},
methods: {},
directives: { //自定义私有指令,注意 这个function等同于把代码写到了bind和update中去
'fontsize': function(el, binding){
el.style.fontSize = binding.value
}
}
})