【Vue教程七】自定义指令、钩子函数
一、钩子函数先来看一个场景,有一个input框,我们想让页面加载完成后,给输入框自动获得焦点,那应该怎么做呢?其实很简单,现在让我们用全局自定义指令来实现这个功能:<body><div id="app"><input v-focus /></div><script>......
一、钩子函数
先来看一个场景,有一个input框,我们想让页面加载完成后,给输入框自动获得焦点,那应该怎么做呢?
其实很简单,现在让我们用 全局自定义指令 来实现这个功能:
<body>
<div id="app">
<input v-focus />
</div>
<script>
// 注册一个全局自定义指令 `v-focus`
//参数1:指令的名称,在调用的时候,必须在指令名称前添加"v-"
//参数2:是一个对象,包含指令相关的函数
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时调用
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
var vm = new Vue({
el: '#app',
data: {
},
})
</script>
</body>
我们先用 Vue.directive('focus', {...}) 注册一个全局自定义指令,然后给input框添加 <input v-focus />,即可实现自动获得焦点。
注意:指令名称不能包含大写字母!
我们也可以用局部自定义指令来实现上述功能:
<body>
<div id="app">
<input v-focus />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
// 注册一个局部自定义指令 `v-focus`
directives: {
focus: {
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
</script>
</body>
上面例子中,inserted 就是一个钩子函数。一个指令定义对象可以提供如下几个钩子函数 (均为可选):
1、bind:只调用一次,指令第一次绑定到元素时调用。和样式相关的操作可以用 bind。
2、inserted:元素插入父节点时调用。和js行为有关的操作,最好用 inserted。
3、update:更新时调用,一般里面的代码逻辑与 bind方法中一致。
4、componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
5、unbind:只调用一次,指令与元素解绑时调用。
二、钩子函数的参数
下面再来写个例子,实现输入框输入的颜色值是红色的:
<body>
<div id="app">
<input v-color />
</div>
<script>
Vue.directive('color', {
bind: function (el) {
console.log("this---",this)//此时的this代表window
el.style.color='red';
}
})
var vm = new Vue({
el: '#app',
data: {
},
})
</script>
</body>
1、如果想给v-color传参的方式设置颜色,可以改成下面这样:
<body>
<div id="app">
<input v-color="'blue'" />
</div>
<script>
Vue.directive('color', {
bind: function (el, binding) {
el.style.color = binding.value;
}
})
var vm = new Vue({
el: '#app',
data: {
},
})
</script>
</body>
注意:上面的blue一定要单引号再包一层,不然它就会取data中的blue值。传参通过 binding.value 来获取值。
指令钩子函数会被传入以下参数:
A、el :指令所绑定的元素,可以用来直接操作 DOM 。
B、binding :一个对象,包含以下属性:name:指令名,不包括 v-
前缀。value:指令的绑定值。
2、如果指令需要传多个参数,可以传入一个 JavaScript 对象字面量。
<div v-demo="{ color: 'white', text: 'hello!' }">123</div>
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color); // => "white"
console.log(binding.value.text); // => "hello!"
})
三、函数简写
在很多时候,你可能想在 bind
和 update
时触发相同行为,而不关心其它的钩子。所以上面的color指令可以修改成下面这种:
Vue.directive('color', function (el, binding) {
el.style.color = binding.value;
})
此时这个function 代表写到了bind 和 update 函数中去。
更多推荐
所有评论(0)