8-1 自定義模板語法 v-xx

1. 可以自己定義 v-xxx 的模板語法（不需要再用 ref="xxx" 去綁定）
2. 先修改 main.js

   import { createApp } from 'vue'
   import { numPrice } from './lib/tools'
   import App from './App.vue'
   
   const app = createApp(App)
   app.directive('focus', {
       mounted(el) {
           el.focus()
       }
   })
   
   app.directive('money', {
       mounted(el, binding) {
           const p = numPrice(binding.value)
           el.innerHTML = p
       },
       updated(el, binding) {
           const p = numPrice(binding.value)
           el.innerHTML = p
       }
   })
   app.directive('price', {
       mounted(el) {
           const p = numPrice(el.innerHTML)
           el.innerHTML = p
       },
       updated(el) {
           const p = numPrice(el.innerHTML)
           el.innerHTML = p
       }
   })
   app.mount('#app')
   

   1. 引入 lib/tools.js 時，不要加副檔名
   2. 利用 app.directive('名稱', {生命週期}) 就可以定義一組樣板語法
   3. mounted(el, binding) 中的 el 就是代表該元件實體，binding 就是傳進來的資料
      1. 若是用 <div v-xxx="值"></div> 的，其值要用 binding.value
      2. 若是用 <div v-xxx>{{值}}</div>，其值要用 el.innerHTML，也就是取得包著的內容
   4. 用 el.innerHTML = 新值 可以替換該元件的顯示值
   5. 此外，資料改變時，也要處理其值，所以記得加入updated() 事件，內容和 mounted()一致
3. 子組件：@/components/TemplateRef.vue

   <script>
   import { ref } from "vue";
   export default {
     setup() {
       const num = ref(12345678);
       return { num };
     },
   };
   </script>
   
   <template>
     <input v-focus v-model="num" type="text" placeholder="請輸入文字" />
     <h1 v-money="num"></h1>
     <h2 v-price>{{ num }}</h2>
   </template>
   
   <style></style>

4. 直接套用定義好的樣板語法即可

完整範例：