Vue3 自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

 

下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

 

实例

<div id="app">

    <p>页面载入时，input 元素自动获取焦点：</p>

    <input v-focus>

</div>

 

<script>

const app = Vue.createApp({})

// 注册一个全局自定义指令 `v-focus`

app.directive('focus', {

  // 当被绑定的元素挂载到 DOM 中时……

  mounted(el) {

    // 聚焦元素

    el.focus()

  }

})

app.mount('#app')

</script>