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.valueelement.focus()}
}
这样写有一个问题，即当页面刚渲染时，input输入框并不会获取焦点，只有当点击按钮后才会获取焦点
这是因为我们调用element.focus()时，input输入框还没有形成
fbind:{//指令与元素成功绑定时（一上来）bind(element,binding){element.value = binding.value},// 指令所在元素被插入页面时inserted(element,binding){ element.focus()},// 指令所在模板被重新解析时update(element,binding){element.value = binding.valueelement.focus()}
}
2. 全局自定义指令
Vue.directive('fbind',{//指令与元素成功绑定时（一上来）bind(element,binding){element.value = binding.value},// 指令所在元素被插入页面时inserted(element,binding){ element.focus()},// 指令所在模板被重新解析时update(element,binding){element.value = binding.valueelement.focus()}
})
Vue.directive('big',{big(element,binding){element.innerText = binding.value * 10console.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 * 10console.log(element,binding)},fbind:{//指令与元素成功绑定时（一上来）bind(element,binding){element.value = binding.value},// 指令所在元素被插入页面时inserted(element,binding){ element.focus()},// 指令所在模板被重新解析时update(element,binding){element.value = binding.valueelement.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.valueelement.focus()}})Vue.directive('big',{big(element,binding){element.innerText = binding.value * 10console.log(element,binding)}})new Vue({el:'#root',data(){return {n:1,}}})
</script>
</html>
