自定义指令
1.自定义指令,即DOM元素需要自己进行操作,比如v-show是内嵌指令,背后有个display的DOM操作是vue帮我们操作了,那么自定义就是不用vue,人工进行操作DOM。
案例需求示范1
2.需求:定义一个v-big指令, 和v-text功能类似, 但会把绑定的数值放大10倍。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义指令</title>
<!--引入vue-->
<script type="text/javascript" src="../vue.js">
Vue.config.productionTip = false
</script>
<!--上边的vue.config选项关闭了启动时生成生产提示-->
</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>
<!--下边的vue.config选项关闭了启动时生成生产提示-->
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#root',
data() {
return {
n: 1
}
},
})
</script>
</body>
</html>
浏览器报错了,说big指令有问题,因为这是我们自定义的。注意一点,我们在起名的时候叫big,但是用的时候要用v-big。
正确的代码编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义指令</title>
<!--引入vue-->
<script type="text/javascript" src="../vue.js">
Vue.config.productionTip = false
</script>
<!--上边的vue.config选项关闭了启动时生成生产提示-->
</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>
<!--下边的vue.config选项关闭了启动时生成生产提示-->
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#root',
data() {
return {
n: 1
}
},
//在directives中写自定义指令,起名叫big,不加v
directives: {
//写法一,写成函数的形式,但不能解决一些细节问题,写法简单
//绑定获取的元素标签,即这里element应该指span标签,然后binding绑定big这个自定义指令
big: function (element, binding) {
element.innerText = binding.value * 10
//innerText修改标签内的值,把获取的绑定的值乘以10。
}
}
})
</script>
</body>
</html>
注意:自定义的big函数何时被调用?
1.当指令与元素成功第一次绑定时。
2.指令所在的模板被重新解析时。
案例需求示范2
3.需求:定义一个v-fbind指令,和v-bind功能 类似,但可以让其所绑定的input元素默认获取焦点。
4.下段代码是用对象式的写法,我们将自定义指令fbind对象式写法,是如何被调用的进行一个打印出来的显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义指令</title>
<!--引入vue-->
<script type="text/javascript" src="../vue.js">
Vue.config.productionTip = false
</script>
<!--上边的vue.config选项关闭了启动时生成生产提示-->
</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>
<hr>
<!--一上来就获取输入框的焦点-->
<input type="text" v-fbind:value="n">
</div>
<!--下边的vue.config选项关闭了启动时生成生产提示-->
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#root',
data() {
return {
n: 1
}
},
//在directives中写自定义指令,起名叫big,不加v
directives: {
//写法一,写成函数的形式,但不能解决一些细节问题,写法简单
//绑定获取的元素标签,即这里element应该指span标签,然后binding绑定big这个自定义指令
big: function (element, binding) {
element.innerText = binding.value * 10
//innerText修改标签内的值,把获取的绑定的值乘以10。
},
//写法二,对象的写法
fbind:{
//bind是vue自带的,当指令与元素成功绑定时执行
bind() {
console.log('bind');
},
//指令所在的元素(标签)被插入页面时调用
inserted() {
console.log('inserted');
},
//指令所在的模板被重新解析时调用
update() {
console.log('updata');
},
// element.value = binding.value
// element.focus()
}
},
})
</script>
</body>
</html>
刚一进页面,没有聚焦到输入框,可以看到打印输出了bind和instred。
点击鼠标后,发现出现update。
那么我们验证了代码中bind、instred、update的运行顺序。所以依次在这三个函数内添加内容,就可以实现自定义函数fbind的细节。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义指令</title>
<!--引入vue-->
<script type="text/javascript" src="../vue.js">
Vue.config.productionTip = false
</script>
<!--上边的vue.config选项关闭了启动时生成生产提示-->
</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>
<hr>
<!--一上来就获取输入框的焦点-->
<input type="text" v-fbind:value="n">
</div>
<!--下边的vue.config选项关闭了启动时生成生产提示-->
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#root',
data() {
return {
n: 1
}
},
//在directives中写自定义指令,起名叫big,不加v
directives: {
//写法一,写成函数的形式,但不能解决一些细节问题,写法简单
//绑定获取的元素标签,即这里element应该指span标签,然后binding绑定big这个自定义指令
big: function (element, binding) {
element.innerText = binding.value * 10
//innerText修改标签内的值,把获取的绑定的值乘以10。
},
//写法二,对象的写法
fbind: {
//bind是vue自带的,当指令与元素成功绑定时执行
bind(element, binding) {
//给获取的标签绑定值
element.value = binding.value
},
//指令所在的元素(标签)被插入页面时调用
inserted(element, binding) {
//聚焦页面输入框
element.focus()
},
//指令所在的模板被重新解析时调用
update(element, binding) {
element.value = binding.value
element.focus()
},
// element.value = binding.value
// element.focus()
}
},
})
</script>
</body>
</html>
总结
自定义指令两种不同写法,分别是函数形式和对象形式。