Vue之自定义指令

技术

Vue

2020-06-23 09:41:18

257

作者:黑夜男神

// 和自定义过滤器一样,我们这里定义的是全局指令 Vue.directive('focus',{ inserted(el) { el.focus() } })


 ---
先总结几个点:

- 使用 Vue.directive()来新建一个全局指令,(指令使用在HTML元素属性上的)
 - Vue.directive第一个参数focus是指令名,指令名在声明的时候,不-需要加 v-
- 在使用指令的HTML元素上,<input type="text" v-focus  placeholder="我有v-focus,所以,我获取了焦点"/> 我们需要加上 v-.
Vue.directive('focus',{}) 第二个参数是一个对象,对象内部有个 inserted() 的函数,函数有 el 这个参数.
el 这个参数表示了绑定这个指令的 DOM元素,在这里就是后面那个有 placeholder 的 input
el 就等价于 document.getElementById('el.id')....
可以利用 $(el) 无缝连接 jQuery

---

### Vue 指令的声明周期函数

Vue.directive('gqs',{ bind() { // 当指令绑定到 HTML 元素上时触发.只调用一次 console.log('bind triggerd') }, inserted() { // 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 div#app).但不保证,父元素已经插入了 DOM 文档. console.log('inserted triggerd') }, updated() { // 所在组件的VNode更新时调用. console.log('updated triggerd') }, componentUpdated() { // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。 console.log('componentUpdated triggerd')

},
unbind() {
  // 只调用一次,指令与元素解绑时调用.
  console.log('unbind triggerd')
}

})

评论 (0)

用户名
邮箱
评论

    Copyright © 2020 darkNightMan All Rights Reserved Pro 黔ICP备20005477号