文章目录
自定义指令：
需求
- 定义一个v-big指令，把绑定的值放大10倍
- v-fbind指令，和v-bind类似，可以让绑定的input元素默认获取焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
</body>
<div id="app">
<h2>当前值： <span v-text="n"></span></h2>
<h2>放大后的n： <span v-big="n"></span></h2>
<!-- <h2>放大后的n： <span v-big-number="n"></span></h2>-->
<button @click="n++">点击n+1</button>
<hr>
<!--autofocus属性可以自动获取焦点-->
<input type="text" v-fbind:value="n" >
</div>
<script>
/*
//全局自定义fbind指令
Vue.directive('fbind',{//指令与元素成功绑定时
bind(element,binding){
element.value = binding.value
console.log(this)//指令回调的this是window
},
//指令所在元素被插入页面时
inserted(element,binding){
//获取焦点
element.focus()
},
//指令所在模板被重新解析时
update(element,binding){
element.value = binding.value
}})
*/
let app = new Vue({
el: '#app',
data: {
n: 1
},
//自定义指令
directives: {
//另一种写法：限于较复杂的指令，不可用驼峰
// 'big-number'(element,binding){
// element.innerText = binding.value * 10
// console.log(element,binding.value)
// },
//自定义指令,何时调用？
//1.指令与元素成功绑定时
//2.指令所在模板被重新解析时
big(element,binding){
element.innerText = binding.value * 10
console.log(element,binding.value,this)
},
//局部自定义指令
fbind: {
//指令与元素成功绑定时
bind(element,binding){
element.value = binding.value
console.log(this)//指令回调的this是window对象，不是vue实例
},
//指令所在元素被插入页面时
inserted(element,binding){
//获取焦点
element.focus()
},
//指令所在模板被重新解析时
update(element,binding){
element.value = binding.value
}
}
}
})
</script>
</html>
测试：
总结：
-
指令语法
定义语法：
局部指令：
new Vue({
directives: {指令名：配置对象}
})
或
new Vue({
directives(){}
})
全局指令：
1.Vue.directive(指令名,配置对象)
2.Vue.directive(指令名,回调函数) -
配置对象中常用的3个回调
bind：指令与元素成功绑定时调用
inserted：指令所在元素被插入页面时调用
update：指令所在模板结构被重新解析时调用 -
注意：
1.指令定义时不加v-，但使用时要加v-
2.指令名如果是多个单词，使用kebab-case命名方式,不要用camelCase驼峰命名
