# Vue 2 與 Vue 3 建立實體與掛載

第一個圖是 Vue CLI 建立的 Vue 2 專案其中的 main.js 檔 (詳細運行指令可參考 Vue CLI 官網)

第二個圖則是使用 Vite 建立的 Vue 3 專案其中的 main.js 檔 (詳細運行指令可參考 Vite 官網)

Instance

# 表單綁定(v-model)

# 輸入框

Vue 2.6.12: 使用 Options API 時,先把資料定義在 data 裡面,而 v-model 跟我們的輸入框作綁定,並且搭配模板語法{ { } }即可把我們在 data 內的資料給渲染到畫面上

Vue 3.0.0: 這邊使用 Composition API ,setup()函式會在元件建立之前執行,並且 this 不再指向元件實體,取而代之的是我們可以使用 ref 或是 reactive 來定義我們的資料,而 ref 可接受任何型別,reactive 只接受物件或是陣列

(Vue 2.6.12 - Options API)

(Vue 3.0.0 - Composition API)

# Form

(Vue 2.6.12 - Options API)

(Vue 3.0.0 - Composition API)

...待新增

# Checkbox

...待新增

# 屬性綁定(v-bind)

...待新增

參考文獻:

Last Updated: 2021-09-22 00:37