vue -＞自定义指令

最新推荐文章于 2025-02-06 20:30:35 发布

原创最新推荐文章于 2025-02-06 20:30:35 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

框架类专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了Vue.js中父组件与子组件的生命周期钩子加载顺序，并通过实例展示了自定义指令的应用，包括指令的不同阶段如何操作DOM以及与组件生命周期的交互。

一个父组件和一个子组件生命周期钩子加载顺序

父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted

<body>
  <div id="app">
    商品价格
    <input type="text" v-focus="50">
  </div>
  <script src="./vue.js"></script>
  <script>
    // 全局组件
    Vue.directive('focus', {
      bind(){},//只加载一次，指令第一次绑定要元素上调用，作用一次性的初始化
      inserted(el, binding){
      // el 指令所在 元素 插入到父节点时触发，el是这个dom对象 binding.value是使用这个指令传的值
        console.log(el);
        console.log(binding)
        el.focus();
      },
      componentUpdated(el,binding){
        // 指令所占组件（及其子组件）的虚拟dom更新完毕时触发
      },
      upbind(){}
      // 指令和元素解绑时触发 （比如元素移除了 ）
      // 指令中如果涉及到了 定时器或者全局事件绑定在这里要清除
    })
    const vm = new Vue({
      el: '#app',
      data: {
        item:{
          price: 10
        }
      },
    })
  </script>
</body>

局部指令

+ 局部指令
const Home = {
  directives: {
    '指令名': {
      inserted(el,binding){
        // el 指令所在 元素 插入到父节点时触发，el是这个dom对象 binding.value是使用这个指令传的值
      },
      componentUpdated(el,binding){
        // 指令所占组件（及其子组件）的虚拟dom更新完毕时触发
      },
      unbind(){
        // 指令和元素解绑时触发 （比如元素移除了 ）
        // 指令中如果涉及到了 定时器或者全局事件绑定在这里要清除
      }
    }
  }
}