Vue2入门之超详细教程十八-自定义指令
Vue2入门之超详细教程十四-自定义指令
1、简介
- 定义语法
- 分为局部自定义指令和全局自定义指令
- 配置对象中常用的3个回调
- bind：指令与蒜素被插入成功时调用
- inserted：指令所在元素被插入页面时被调用
- update：指令所在模板结构被重新解析时调用
- 备注：
- 指令定义时不加v-，但使用时要加v-
- 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名
学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识 传送门，CSS基础知识 传送门。
2、自定义指令
1. 局部自定义指令
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
需求1实现
<!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/development/vue.js"></script>
</head>
<body>
<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>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data(){
return {
n:1,
}
}
})
</script>
</html>
该错误是因为我们用了一个不存在的指令v-big，v-big是原生Vue中不存在的质量，我们需要给它定义一个
directives:{
big(element,binding){
console.log(element,binding)
}
}
自定义指令接收两个参数，第一个是真实dom第二个是虚拟dom
directives:{
big(element,binding){
element.innerText = binding.value * 10
}
}
需求2实现
<input type="text" v-fbind:value="n">
directives:{
fbind(element,binding){
element.value = binding.value
element.focus()
}
}
这样写有一个问题，即当页面刚渲染时，input输入框并不会获取焦点，只有当点击按钮后才会获取焦点
这是因为我们调用element.focus()时，input输入框还没有形成
fbind:{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
// 指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
// 指令所在模板被重新解析时
update(element,binding){
element.value = binding.value
element.focus()
}
}
2. 全局自定义指令
Vue.directive('fbind',{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
// 指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
// 指令所在模板被重新解析时
update(element,binding){
element.value = binding.value
element.focus()
}
})
Vue.directive('big',{
big(element,binding){
element.innerText = binding.value * 10
console.log(element,binding)
}
})
3、完整代码
1. 局部自定义指令完整代码
<!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/development/vue.js"></script>
</head>
<body>
<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>
<br>
<input type="text" v-fbind:value="n">
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data(){
return {
n:1,
}
},
directives:{
big(element,binding){
element.innerText = binding.value * 10
console.log(element,binding)
},
fbind:{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
// 指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
// 指令所在模板被重新解析时
update(element,binding){
element.value = binding.value
element.focus()
}
}
}
})
</script>
</html>
2. 全局自定义指令完整代码
<!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/development/vue.js"></script>
</head>
<body>
<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>
<br>
<input type="text" v-fbind:value="n">
</div>
</body>
<script type="text/javascript">
Vue.directive('fbind',{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
// 指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
// 指令所在模板被重新解析时
update(element,binding){
element.value = binding.value
element.focus()
}
})
Vue.directive('big',{
big(element,binding){
element.innerText = binding.value * 10
console.log(element,binding)
}
})
new Vue({
el:'#root',
data(){
return {
n:1,
}
}
})
</script>
</html>
