:::
8. Template Refs 模板引用
8-1 自定義模板語法 v-xx
- 可以自己定義 v-xxx 的模板語法（不需要再用 ref="xxx" 去綁定）
- 先修改
main.jsimport { 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就是傳進來的資料- 若是用
<div v-xxx="值"></div>的，其值要用binding.value - 若是用
<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> - 直接套用定義好的樣板語法即可
完整範例：
