Web全栈探索，Vue基础系列，常用特性（二）自定义指令
自定义指令的语法规则（获取元素焦点）
Vue.directive('自定义指令名称' {
inserted: function(el) {
el.自定义指令名称();
}
})自定义指令用法
<input type="text" v-自定义指令名称>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-focus aria-label="输入框">
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
自定义指令
*/
Vue.directive('focus', {
inserted: function(el){
// el表示指令所绑定的元素
el.focus();
}
});
let vm = new Vue({
el: '#app',
data: {
},
methods: {
handle: function(){
}
}
});
</script>
</body>
</html>
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
-
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 -
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中) -
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下) -
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用 -
unbind：只调用一次，指令与元素解绑时调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!--自定义指令名称不要写成驼峰式
等号左边是指令名，等号右边是指令参数
-->
<input aria-label="" type="text" v-self_color='this.msg' >
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
自定义指令-带参数
*/
Vue.directive('self_color', {
// el 代表被指令修饰的元素本省
// 通过 binging.value 可以得到传入的参数值
bind: function(el, binding){
// 根据指令的参数设置背景色
el.style.backgroundColor = binding.value.color;
}
});
let vm = new Vue({
el: '#app',
data: {
msg: {
color: 'blue'
}
},
methods: {
handle: function(){
}
}
});
</script>
</body>
</html>
局部指令
在 vue 实例中新定义一个属性 directives
directives: {
自定义指令名称: {
// 指令的定义
inserted: function (el) {
el.自定义指令名称()
}
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!--自定义指令名称不要写成驼峰式
等号左边是指令名，等号右边是指令参数
-->
<input aria-label="" type="text" v-self_color='this.msg' >
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data: {
msg: {
color: 'blue'
}
},
methods: {
handle: function(){
}
},
/*
自定义局部指令
*/
directives:{
self_color:{
bind: function (el, binding) {
el.style.backgroundColor = binding.value.color;
}
}
}
});
</script>
</body>
</html>
