宣告資料

HTML基本結構就是指定一個區塊給 VUE綁定

<div id="app"></div>

app 物件主要有三個基本屬性參照上圖 data(資料)，API(方法、生命週期)，渲染

const appData = {
  data() {
		return {} // 必須回傳物件
  },
	created() {
		init...  // 初始化會寫在這裡
  },
  methods: {
    someEvent...  // 方法
  }
}
Vue.createApp(appData).mount(app) // 將 HTML 綁定

v-model

雙向綁定資料 v-model=“data 裡的資料”

v-for

迴圈 v-for=“(item, index) in list :key="唯一值"” list 為 data 裡的陣列或物件資料

• 陣列迴圈第二個參數為索引，物件迴圈第二個參數為屬性值

純數值迴圈v-for=i in 5 印出1~5

• 進階技巧：在 template 標籤使用 v-for

v-bind

動態更改屬性 簡寫 :attr v-bind:class=“class” :href=“data”

v-on

綁定事件 簡寫 @event == v-on:event

v-on:click.prevent=“method”

@keyup=“method”

@keyup.ctrl.enter=“method” **** keyCode 已不建議使用)****