---
tags: Mike課程
---

# Directive 自定義 Vue Template Script
* vue 透過 v-if ，v-show ，等方式快速製作了這些函式、我們也可以自訂義想要的v-函式 來做運用，這樣就減少一頁一頁還要綁定ref等重工的概念。
1. 在main 運用directive自訂義函式內容

const app = createApp(App);
// 自訂義一個 focus 用法
app.directive("focus",{
    mounted(el){
       console.log('el',el);
        el.focus();
    }
})
app.mount('#app')

2. 自訂義的 focus 可轉成v-focus運用在模板上面

<template>
  <input
    v-focus
    ref="textRef"
    id="text-bar"
    type="text"
    placeholder="填選表單"
  />
</template>