logo头像

求知若渴,虚心若愚

Vue - Vue使用自定义指令和refs进行DOM操作

指令directive

由来

  • 在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
  • 使用场景:
    • 操作DOM元素,可以结合jQuery

全局指令和局部指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})

// 使用
<input v-focus>

// 注册一个局部自定义指令 `v-focus`
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
// 使用
<input v-focus>

自定义指令钩子函数

  • 目前我们知道有钩子函数的知识点:
    • ajax
    • Vuejs生命周期
    • VueRouter路由
    • Vuejs自定义指令
  • bind:
  • inserted:
  • update:
    • 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
  • componentUpdated:
    • 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind:
    • 只调用一次,指令与元素解绑时调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Vue.directive('hello',{
// 指令第一次绑定到元素的时候执行,且只执行一次,一般用于执行初始化操作
bind(el,binding,vnode,oldVnode){
// 这里的el就是我们想要的DOM对象,可以直接操作
// binding能传递我们需要的值
console.log('bind')
},
// 被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)
inserted(el,binding,vnode,oldVnode){
console.log('inserted')
},
// 当被绑定的元素所在模版更新时执行
update(el,binding,vnode,oldVnode){
console.log('update')
},
// 表示被绑定元素所在模板完成一次更新周期时调用
componentUpdated(el,binding,vnode,oldVnode){
console.log('componentUpdated')
},
// 指令与被绑定的元素解绑时使用,只调用一次
unbind(el,binding,vnode,oldVnode){
console.log('unbind')
}
})
  • 指令钩子函数会被传入el,binding,vnode,oldVnode这四个参数
  • el:
    • 指令所绑定的元素,可以用来直接操作 DOM
  • binding:一个对象,包含以下属性:

    • name:指令名,不包括 v- 前缀。
    • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
    • oldValue:指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无论值是否改变都可用。
    • expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"
    • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
    • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }
  • vnode:Vue 编译生成的虚拟节点。

  • oldVnode:上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用。

refs

  • 类似于 jQuery 操作 DOM 结构
  • ref 被用来给元素或子组件注册引用信息
  • 引用信息将会注册在父组件的 $refs 对象上。
  • 如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例
  • 面试时如果被问到操作DOM:

    • 自定义指令
    • refs
  • 使用:

    • $refs是⼀一个对象,⻚页⾯面中所有的ref都会作为$refs对象中的键
    • DOM元素:$refs.xxx

TIP
Vue中进行DOM操作,推荐使用自定义指令和refs

支付宝打赏 微信打赏

赞赏是对我们的肯定!