vue2.0和vue3.0全局指令的区别

最新推荐文章于 2024-07-18 21:08:45 发布

代码包工头

最新推荐文章于 2024-07-18 21:08:45 发布

阅读量331

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_56435537/article/details/117200393

版权

这篇博客探讨了Vue.js中自定义指令的使用，从Vue 2.0的`Vue.directive()`注册方式到Vue 3.0的`Vue.createApp().directive()`的改变。通过示例展示了如何在Vue组件中实现自动聚焦功能，同时对比了两个版本在指令注册和应用上的差异。

摘要由CSDN通过智能技术生成

vue2.0

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

<div id="app">
  <input type="text" v-focus="1+1">
</div>

<script>
  // 自动聚焦的功能
  Vue.directive('focus', {
    inserted(el, binding) {
      // 聚焦功能
      // 调用原生dom身上的focus方法
      console.log(binding)
      el.focus()
      // 只要需要操作dom身上的属性或者方法 都可以写到这里
      // 如果还需要传进来表达式的值  binding.value
      // img dom src
    }
  })
  new Vue({
    el: '#app'
  })
</script>

<!-- 
  vue2.x
  1.核心API
    Vue.directive('focus', {

    })
 -->

vue3.0

<script src="https://unpkg.com/vue@next"></script>


<div id="app">
 <input type="text" v-focus="1+1" />
</div>

<script>
 // 1.使用createApp方法生成一个app实例对象
 const app = Vue.createApp({})
 // 2.全局指令注册
 app.directive('focus', {
   mounted(el, binding) {
     el.focus()
     console.log(binding)
   }
 })
 // 3.挂载app到真实的dom
 app.mount('#app')
 
</script>