一、指令
1.什么是指令
指令的定义:Vue提供的 带有v-前缀 的 特殊特性。
2.指令的职责
当表达式的值发生变化时,将其产生的连带影响 响应式的作用于 DOM。
3.常用的指令(vue的内置指令)
v-if、v-for等
二、自定义指令
1.什么是自定义指令
与内置指令比较:
如 v-show 实质上是对DOM中的display元素操作(是否显示)
而自定义指令
如 v-xxx (xxx 这一名称是我们自定义的) 对DOM上的某个元素进行操作(操作的元素,如何操作 都是我们自己定义的)
自定义指令实质上就是自定义对DOM的操作 进行封装
2.如何自定义指令
自定义指令写法:
1.函数式
2.对象式
1.自定义-函数式:写成一个函数function。
弊端:不能处理一些细节性的问题
优势:易于编写
例:定义一个v-big指令,类似与v-text,将绑定的数值放大十倍
<template>
<div class="home">
<div>
<!-- 函数式: 定义一个v-big指令,类似与v-text,将绑定的数值放大十倍-->
<h2>当前n的值为:<span v-text="n"></span></h2>
<h2>放大10倍n的值为:<span v-big="n"></span></h2>
<button @click="n++">点我n+1</button>
</div>
</div>
</template>
<script>
export default {
name: 'HomeView',
data() {
return {
n: 1,
}
},
directives: {
big(element, binding) {
// console.log(element, binding)
element.innerText = binding.value * 10;
},
},
}
big指令何时被调用?
- 指令和元素被成功绑定时(一上来)
- 指令所在的模板重新解析时
big(element,binding)
element (本次绑定的元素)
binding:(本次绑定的信息)
expression: 表达式 n
name: big
value: n的值
2.自定义-对象式:写成一个对象{}。
弊端:没有函数式易于编写,代码量较多,步骤更多;
优势:可以处理一些细节性的问题
例:定义一个v-fbind函数,和v-bind方法类似,让所绑定的input元素 默认获取焦点
<template>
<div class="home">
<div>
<h2>当前n的值为:<span v-text="n"></span></h2>
<h2>放大10倍n的值为:<span v-big="n"></span></h2>
<button @click="n++">点我n+1</button>
<!-- 对象式 定义一个v-fbind函数,和v-bind方法类似,让所绑定的input元素 默认获取焦点-->
<hr/>
<input v-fbind:value="n" type="text"/>
</div>
</div>
</template>
<script>
export default {
name: 'HomeView',
data() {
return {
n: 1,
}
},
directives: {
bind(element, binding) {
element.value = binding.value;
},
fbind:{
//指令和元素被成功绑定时
bind(element, binding){
element.value = binding.value;
console.log('bind')
},
//指令所在元素被插入页面时
inserted(element, binding){
element.focus();
console.log('inserted')
},
//指令所在的模板重新解析时
update(element, binding){
element.value = binding.value;
console.log('update')
},
},
},
}
</script>
自定义指令何时被调用?
1.指令和元素被成功绑定时 这时还只是在内存中绑定了,页面未渲染
2.指令所在的模板重新解析时 如n的值变化一次就会重新解析一次
常用的三个回调:
3.需要注意的点
1.如果定义的指令不止一个单词如 v- + 'big number'
应写为 v-big-number
在directives里面应写成
2.directives里面的叫局部指令 是定义在组件内部的,只能在当前组件中使用
全局指令