置顶 vue 指令

javascript 技术

JavaScript

2020-05-14 19:56:42

694

作者:黑夜男神

// 和自定义过滤器一样,我们这里定义的是全局指令
Vue.directive('focus',{
    inserted(el) {
      el.focus()
    }
})
<div id='app'>
    <input type="text">
    <input type="text" v-focus placeholder="我有v-focus,所以,我获取了焦点">
  </div>

先总结几个点:

  • 使用 Vue.directive()来新建一个全局指令,(指令使用在HTML元素属性上的)
    • Vue.directive第一个参数focus是指令名,指令名在声明的时候,不-需要加 v-
  • 在使用指令的HTML元素上, 我们需要加上 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号