Vue 框架：從安裝到基本數據綁定的入門指南
更新日期： 2024 年 11 月 8 日
Vue 是一個漸進式 JavaScript 框架，可以快速構建動態應用程式。
本文將介紹如何安裝 Vue、初始化應用，以及一些基本的數據綁定方法，幫助新手理解 Vue 的基礎功能。
安裝 Vue
Vue 可以通過 NPM 安裝，或直接在 HTML 中使用 CDN 版本。
使用 NPM 安裝
- 在專案中執行以下命令以安裝 Vue：
npm i vue- 安裝完成後，編輯
main.js檔案並加入以下代碼：
import { createApp } from "vue";
console.log(createApp);createApp 是 Vue 3 提供的 API，用來創建新的 Vue 應用實例。
使用 CDN 安裝
如果不想使用 NPM，可以直接在 HTML 中引用 Vue 的 CDN 版本：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>然後在程式碼中使用解構賦值取出 createApp：
const { createApp } = Vue;建立 Vue 應用程式
Vue 應用程式建立之後，我們可以撰寫 Vue 結構，包括 data 和 mount 方法。
基本範例：建立計數應用
以下是一個簡單的範例程式碼，展示如何建立 Vue 應用並綁定數據：
import { createApp } from 'vue'
const app = createApp({
data() {
return {
count: 0
}
}
})
app.mount('#app')在此範例中：
data方法返回一個物件，用來存儲應用中的數據。mount('#app')將 Vue 應用安裝在 HTML 中id為app的 DOM 元素上。
簡化範例
上述範例可簡化如下：
const dataObject = {
data() {
return {};
}
}
createApp(dataObject).mount("#abc")此簡化版的應用程式步驟如下：
- 建立一個
dataObject物件，其中的data方法會返回一個空物件。 - 將
dataObject傳入createApp函數，以生成 Vue 應用。 - 使用
mount方法將應用安裝在id為abc的元素上。
在 HTML 中綁定數據
Vue 提供了一個特殊的數據綁定語法 {{ }}，能夠快速將 JavaScript 的數據綁定到 HTML 上。
修改範例代碼並綁定數據
- 更新
dataObject，添加一個數據cc：
const dataObject = {
data() {
return {
cc: 123
};
}
}
createApp(dataObject).mount("#abc")- 在 HTML 中使用
{{ }}綁定cc：
<body>
<div id="abc">{{cc}}</div>
</body>此範例的效果是，cc 的值 123 會顯示在 id 為 abc 的 <div> 內。
需要注意的是，{{cc}} 必須在 Vue 應用掛載的 DOM 節點中（此處為 id="abc"），如果將 {{cc}} 放置在 #abc 節點之外，將無法顯示。
例如，以下放置方式無效：
<body>
<div id="abc"></div>
{{cc}}
</body>使用 v-model 進行雙向數據綁定
Vue 提供 v-model 指令來實現雙向數據綁定，這在表單中尤為實用。
v-model 能夠自動將 HTML 表單元素的輸入值，與 Vue 應用中的數據同步。
使用 v-model 的範例
假設我們有一個 <input> 元素，並想將輸入值綁定到 cc：
- 更新 HTML，將
v-model="cc"加入<input>元素：
<div id="abc">
<input type="text" v-model="cc"><br />
{{cc}}
</div>- 修改
dataObject以包含cc數據：
const dataObject = {
data() {
return {
cc: ""
};
}
}
createApp(dataObject).mount("#abc")當使用者在輸入框中輸入文字時，cc 的值會即時更新並顯示在 <div> 中。
這是因為 v-model 實現了雙向數據綁定，將使用者的輸入即時更新到 Vue 應用的數據上。
總結
本文介紹了 Vue 的基本使用方法，包括如何安裝、初始化應用、綁定數據，以及使用 v-model 實現雙向數據綁定的功能。
通過這些基本操作，新手可以開始熟悉 Vue 的核心概念和操作方式，並建立自己的動態應用程式。