Vue中自定义指令
文章目录
-
-
-
- 例1：自定义指令 v-big
- 例2：自定义指令 v-fbind
- 例3：注册指令的两种方式
- 例4：关于指令名
-
-
例1：自定义指令 v-big
实现一个自定义指令v-big，功能和v-text类似，用于渲染其所在节点的文本内容，且会把绑定的值放大10倍。
<body>
<div id="root">
<h2>当前的n值是：<span v-text="n">span>h2>
<h2>放大10倍的n值是：<span v-big="n">span>h2>
<button @click="n++">点我+1button>
div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
n: 1
},
directives:{
big(element,binding){
element.innerText = binding.value*10;
console.log(element,binding);
console.dir(element);
}
}
})
script>
body>
第一个参数，element，指令所在DOM节点。
第二个参数，binding，是一个对象。其中，name是指令名，expression是指令绑定的表达式，value是指令绑定的值。
big函数何时会被调用？
指令与元素成功绑定时调用；指令所在模板被重新解析时调用 。
例2：自定义指令 v-fbind
实现一个自定义指令v-fbind，功能和v-bind，单向数据绑定（数据从data流向页面），且指令所在的input默认会获取焦点。
<body>
<div id="root">
<h2>当前的n值是：<span v-text="n">span>h2>
<input type="text" v-fbind:value="n">
<button @click="n++">点我+1button>
div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
n: 1
},
directives:{
fbind(element,binding){
element.focus();
element.value = binding.value;
}
}
})
script>
body>
以上实现的效果是：刷新页面时，input输入框并没有默认获取焦点（没有达到预期）；改变n值时，input输入框获取了焦点。
<body>
<div id="root">
<h2>当前的n值是：<span v-text="n">span>h2>
<input type="text" v-fbind:value="n">
<button @click="n++">点我+1button>
div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
n: 1
},
directives:{
fbind:{
//指令与元素成功绑定时，调用bind函数
bind(element,binding){
element.value = binding.value;
},
//指令所在元素插入页面后，调用inserted函数
inserted(element,binding){
element.focus();
},
//指令所在模板被重新解析时，调用update函数
update(element,binding){
element.value = binding.value;
element.focus();
}
}
}
})
script>
body>
指令与元素成功绑定时，会调用bind函数。
指令所在元素插入页面时，会调用inserted函数。
指令所在模板被重新解析时，会调用update函数。
例3：注册指令的两种方式
注册指令有两种方式：
- 注册局部指令：
new Vue({directives:{}}) - 注册全局指令：
Vue.directive(name,callback)或Vue.directive(name,{})
<body>
<div id="root">
<h2>当前的n值是：<span v-text="n">span>h2>
<h2>放大10倍的n值是：<span v-big="n">span>h2>
<button @click="n++">点我+1button>
div>
<div id="root2">
<h2>当前的x值是：<span v-text="x">span>h2>
<h2>放大10倍的x值是：<span v-big="x">span>h2>
<button @click="x++">点我+1button>
div>
<script>
Vue.config.productionTip = false;
Vue.directive("big",function(element,binding){
element.innerText = binding.value* 10;
})
new Vue({
el:"#root",
data:{
n: 1
}
})
new Vue({
el:"#root2",
data:{
x:1
}
})
script>
body>
<body>
<div id="root">
<h2>当前的n值是：<span v-text="n">span>h2>
<input type="text" v-fbind="n">
<button @click="n++">点我+1button>
div>
<div id="root2">
<h2>当前的x值是：<span v-text="x">span>h2>
<input type="text" v-fbind="x">
<button @click="x++">点我+1button>
div>
<script>
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;
element.focus();
}
})
new Vue({
el:"#root",
data:{
n: 1
}
})
new Vue({
el:'#root2',
data:{
x:1
}
})
script>
body>
例4：关于指令名
<body>
<div id="root">
<h2>当前的n值是：<span v-text="n">span>h2>
<h2>放大10倍的n值是：<span v-bigNumber="n">span>h2>
<button @click="n++">点我+1button>
div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
n: 1
},
directives:{
bigNumber(element,binding){
element.innerText = binding.value*10;
}
}
})
script>
body>
<body>
<div id="root">
<h2>当前的n值是：<span v-text="n">span>h2>
<h2>放大10倍的n值是：<span v-bigNumber="n">span>h2>
<button @click="n++">点我+1button>
div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
n: 1
},
directives:{
bignumber(element,binding){
element.innerText = binding.value*10;
}
}
})
script>
body>
<body>
<div id="root">
<h2>当前的n值是：<span v-text="n">span>h2>
<h2>放大10倍的n值是：<span v-big-number="n">span>h2>
<button @click="n++">点我+1button>
div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
n: 1
},
directives:{
'big-number'(element,binding){
element.innerText = binding.value*10;
}
// 'big-number':function(element,binding){
// element.innerText = binding.value*10;
// }
}
})
script>
body>
自定义指令时，关于指令名：
- 由一个单词组成
第一种写法：首字母小写，如big；
第二种写法：首字母大写，如Big。 - 由两个单词组成
第一种写法：kebab-case命令，如big-number