vue -＞自定义指令

最新推荐文章于 2023-07-20 15:51:08 发布

this-way

最新推荐文章于 2023-07-20 15:51:08 发布

阅读量79

点赞数

分类专栏：框架类文章标签： vue

本文链接：https://blog.csdn.net/Un_YUI/article/details/113573593

版权

框架类专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

父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(){
        // 指令和元素解绑时触发 （比如元素移除了 ）
        // 指令中如果涉及到了 定时器或者全局事件绑定在这里要清除
      }
    }
  }
}

this-way

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue -＞自定义指令

一个父组件和一个子组件生命周期钩子加载顺序父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted<body> <div id="app"> 商品价格 <input type="text" v-focus="50"> </div> <script src="./vue.js"></s
复制链接

扫一扫