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

書籍目錄

快速登入

計數器