Vue－基本架構與懶人包

懶人包總是最方便的。

這邊先透過 CDN 把 Vue 引入：

<script src="https://unpkg.com/vue@3.0.2"></script>

接著就能開始寫 JS 了：

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue',
      name: 'PeaNu',
      age: 20
    }
  },
  methods: {
    handleChangeMsg(newMessage) {
      this.message = newMessage
    }
  }
})

app.mount('#app')

只要透過 Vue 的 createApp 我們就能建立一個元件，裡面會傳入一個物件來儲存元件的 data、methods 等等之類的東西。

app.mount 則是讓我們用來告訴 Vue 要把元件「綁定」到哪一個元件上？基本上綁定就等於把「控制權交給 Vue」，所以現在只要是包含在 #app 這個裡的 HTML 元素都會被 Vue 控制。

只有被 Vue 控制的元素才可以用「v-directive」跟「template」這些東西，簡單來說就是 Vue 的語法。

這邊只是帶你認識一些基本結構所以才用 CDN，不然基本上現在要開發一個 Vue 專案時會透過「Vue－CLI」來開發比較多，這點要注意一下。

v-directive

• @event 建立事件監聽
• v-if / v-else 條件渲染（操作 DOM 元素）
• v-show 條件渲染（透過 CSS 來控制 display）
• v-for 列表渲染（要用 in 或 of 都可以，沒有差別）
• v-slot:name 建立命名 slot
• :attr 動態的屬性值
• v-model 資料與畫面雙向綁定

modifier

• keyup.ctrl 按著 ctrl 時才會 trigger
• v-model.trim 去掉頭尾空白字元
• keydown.prevent 取消預設行為（可以用來避免 enter 送出表單）

順道一提關於 v-modal 背後的機制其實只是這樣：

<input type="email" @input="email = $event.target.value" :value="email" />

這就跟你在 React 裡面把 value 跟 state 綁再一起，接著再用 onChange 去改變 state 的道理是差不多的。只是 Vue 綁定的事件有點不同而已（onInput 或 onChange）

跟 $ 有關的東西

基本上只要是 $ 開頭的東西都是被綁在 Vue 的實體上，所以會需要透過 this 來取得。

• $event 用來取得 Event 物件
• $ref 用來取得 DOM 元素
• $emit 用來自定義事件
• $route 用來取得路由資訊
• $router 用來操作路由

也因為和 this 有關，所以如果是寫 Composition API 的話基本上看不太到跟 $ 有關的東西 XD