Vue2——Vue自定义指令
需要在directives:中进行指令的配置定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。尝试使用函数形式实现但是focus函数需要等element的值修改成功并插入页面后执行才奏效,而使用函数的写法我们无法指定在elemen插入页面后执行focus函数才执行,所以这样写
·
vue运行我们进行自定义指令。我们自定义的指令,就是实现对js语句的封装。
需要在directives:
new Vue({
directives:{
//指令的配置,两种写法:
//函数写法
指令名(element,binding){
// element:是绑定的真实DOM元素,binding
// binding:包含绑定的信息,包括绑定的n值
}
//或者键值对写法
指令名: {
// 指令与元素成功绑定时(一上来)调用
bind(element,binding) {},
// 指令所在元素被插入页面时调用
inserted(element,binding) {},
// 指令所在模板被重新解析是调用
update(element,binding){
}
},
}
});
中进行指令的配置
自定义的指令函数什么时候调用
- 指令与元素成功绑定时(一上来)。
- 指令所在的
模板被重新解析时.
v-big
定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div>当前的n值是:<span v-text="n"></span></div>
<div>放大10倍的n值是:<span v-big="n"></span></div>
<button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
n: 1,
},
directives:{
big(element,binding){
// element:是绑定的真实DOM元素,binding
// binding:包含绑定的信息,包括绑定的n值
element.innerText = binding.value*10
}
}
});
</script>
</body>
</html>
v-fbind
定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。
尝试使用函数形式实现
fbind(element,binding){
element.value = binding.value
element.focus()
//focus函数需要等element的值修改成功之后执行才奏效,所以这样写第一次是无法获取焦的
}
但是focus函数需要等element的值修改成功并插入页面后执行才奏效,而使用函数的写法我们无法指定在elemen插入页面后执行focus函数才执行,所以这样写第一次是无法获取焦点的。
所以需要采取对象的(键值对)写法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div>当前的n值是:<span v-text="n"></span></div>
<div>放大10倍的n值是:<span v-big="n"></span></div>
<button @click="n++">点我n+1</button>
<hr />
<input type="text" v-fbind:value="n" />
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
n: 1,
},
directives: {
big(element, binding) {
// element:是绑定的真实DOM元素,binding
// binding:包含绑定的信息,包括绑定的n值
element.innerText = binding.value * 10;
},
// fbind(element,binding){
// element.value = binding.value
// element.focus()
// focus函数需要等element的值修改成功之后执行才奏效,所以这样写第一次是无法获取焦的
// }
fbind: {
// 指令与元素成功绑定时(一上来)调用
bind(element,binding) {
element.value = binding.value
},
// 指令所在元素被插入页面时调用
inserted(element,binding) {
element.focus()
},
// 指令所在模板被重新解析是调用
update(element,binding){
element.value = binding.value
}
},
},
});
</script>
</body>
</html>
对象写法中,配置对象中常用的3个回调
(1).bind:指令与元素成功绑定时调用。
(2).inserted:指令所在元素被插入页面时调用。
(3).update:指令所在模板结构被重新解析时调用。
自定义指令注意问题
- 如果定义的指令名由多个单词组成,不要使用驼峰式命名方法。多个单词之间使用
-
进行分隔。
<div>放大10倍的n值是:<span v-big-number="n"></span></div>
<script>
new Vue({
el: "#root",
data: {
n: 1,
},
directives: {
'big-number'(element, binding) {
element.innerText = binding.value * 10;
},
},
});
</script>
- 自定义指令中的this
都是windows
,指令就是DOM操作元素的,所以this都设置成的时windows
全局指令
在
new Vue({
directives: {
},
});
中定义的指令时局部指令只能供该vue实例使用。
全局指令的定义
格式:
对象格式的全局定义
Vue.directive('指令名',{
配置内容
})
函数格式的全局定义
Vue.directive('指令名',function (element, binding) {
})
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div>当前的n值是:<span v-text="n"></span></div>
<div>放大10倍的n值是:<span v-big-number="n"></span></div>
<button @click="n++">点我n+1</button>
<hr />
<input type="text" v-fbind:value="n" />
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
Vue.directive("fbind", {
// 指令与元素成功绑定时(一上来)调用
bind(element, binding) {
element.value = binding.value;
},
// 指令所在元素被插入页面时调用
inserted(element, binding) {
element.focus();
},
// 指令所在模板被重新解析是调用
update(element, binding) {
element.value = binding.value;
},
});
Vue.directive("big-number", function (element, binding) {
element.innerText = binding.value * 10;
});
new Vue({
el: "#root",
data: {
n: 1,
},
directives: {
// 'big-number'(element, binding) {
// // element:是绑定的真实DOM元素,binding
// // binding:包含绑定的信息,包括绑定的n值
// element.innerText = binding.value * 10;
// },
// fbind(element,binding){
// element.value = binding.value
// element.focus()
// focus函数需要等element的值修改成功之后执行才奏效,所以这样写第一次是无法获取焦的
// }
// fbind: {
// // 指令与元素成功绑定时(一上来)调用
// bind(element,binding) {
// element.value = binding.value
// },
// // 指令所在元素被插入页面时调用
// inserted(element,binding) {
// element.focus()
// },
// // 指令所在模板被重新解析是调用
// update(element,binding){
// element.value = binding.value
// }
// },
},
});
</script>
</body>
</html>
更多推荐
已为社区贡献5条内容
所有评论(0)