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

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>