XOOPS輕鬆架 - 線上書籍

:::

Vue.js 3.0 筆記
=============

1. 可以自己定義 v-xxx 的模板語法（不需要再用 ref="xxx" 去綁定）
2. 先修改 `main.js` 
    ```javascript
    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 
    ```markup
    <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%2Fmarkdown.php%3Ftbdsn%3D1743

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器