:::

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. 直接套用定義好的樣板語法即可

完整範例:


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1743

計數器

今天: 2718271827182718
昨天: 3755375537553755
總計: 4458557445855744585574458557445855744585574458557