自定義模板語法 v-xx

Vue.js 3.0 筆記

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

可以自己定義 v-xxx 的模板語法（不需要再用 ref="xxx" 去綁定）

先修改 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')

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

子組件：@/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>