VUE---自定义指令-Toy模板网

这篇具有很好参考价值的文章主要介绍了VUE---自定义指令。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

自定义指令：自己定义的指令，可以封装一些dom操作，扩展额外功能。可分为全局注册与局部注册。

全局注册（main.js中注册）：

Vue.directive('指令名称',{

bind(ele,binding) {}, // 只执行一次；DOM渲染之前执行，里面可以进行样式操作

        inserted(ele,binding) {}, // 只执行一次；DOM渲染之后执行，里面可以进行行为操作                                                 --常用

        update(ele,binding) {}, // 数据更新后执行--常用

        componentUpdated(ele,binding) {}, // 父子组件都更新后执行

unbind(ele,binding) {}, // 指令解绑的时候执行

})

局部注册（main.js中注册）：

export default {

        Vue.directive('指令名称',{

        bind(ele,binding) {}, // 只执行一次；DOM渲染之前执行，里面可以进行样式操作

                inserted(ele,binding) {}, // 只执行一次；DOM渲染之后执行，里面可以进行行                                                              为操作--常用

  update(ele,binding) {}, // 数据更新后执行--常用

                componentUpdated(ele,binding) {}, // 父子组件都更新后执行

        unbind(ele,binding) {}, // 指令解绑的时候执行

        })

}

指令值的语法：

        ① v-指令名 = "指令值" ，通过等号可以绑定指令的值

        ② 通过 binding.value 可以拿到指令的值

        ③ 通过 update 钩子 ，可以监听指令值的变化，进行dom更新操作

示例1---打开页面时，输入框自动获取焦点（全局注册，main.js）

// vue页面
<input type="text" v-focus />

// main.js
Vue.directive('focus', {
  // 获取焦点
  inserted(ele, binding) {
    console.log(ele) // 绑定指令的元素
    console.log(binding) // 指令的相关信息（指令的值等）
    ele.focus() // 让元素获取焦点
  },
})

结果如下：

VUE---自定义指令,VUE基础,vue.js,javascript,前端

控制台打印的消息如下：

VUE---自定义指令,VUE基础,vue.js,javascript,前端

示例2--改变页面字体颜色（局部注册，在页面中注册）：

// vue页面
<h3 v-color="color">需求2：Ajax请求数据，并设计loading指令</h3>

<script>
export default {
  data() {
    return {
      color: 'red',
    }
  },
  directives: {
    color: {
      inserted(el, binding) {
        el.style.color = binding.value
      },
      update(el, binding) {
        el.style.color = binding.value
      },
    },
  },
}
</script>

结果如下：

VUE---自定义指令,VUE基础,vue.js,javascript,前端