Vue 簡介
Vue 是一個JavaScript 框架。它可以透過 <script> 標籤新增到 HTML 頁面。
Vue 使用指令擴充套件 HTML 屬性，並使用表示式將資料繫結到 HTML。
Vue 是一個 JavaScript 框架
Vue 是一個用 JavaScript 編寫的前端 JavaScript 框架。
與 Vue 類似的框架有 React 和 Angular，但 Vue 更輕量級，更容易上手。
Vue 以 JavaScript 檔案的形式分發，可以透過 script 標籤新增到網頁中
<script
src="https://unpkg.com/vue@3/dist/vue.global.js">
</script>
為什麼學習 Vue？
- 它簡單易用。
- 它能夠處理簡單和複雜的專案。
- 它日益增長的普及度和開源社群支援。
- 在普通的 JavaScript 中，我們需要寫清楚 HTML 和 JavaScript 如何連線，但在 Vue 中，我們只需要確保存在連線，讓 Vue 來處理其餘的事情。
- 它提供了更高效的開發流程，具有基於模板的語法、雙向資料繫結和集中的狀態管理。
如果其中一些要點難以理解，不用擔心，你將在本教程結束時理解它們。
Options API
Vue 中有兩種不同的編寫程式碼的方式：Options API 和 Composition API。
Options API 和 Composition API 的底層概念是相同的，所以學習完一種後，你可以輕鬆切換到另一種。
本教程使用的是 Options API，因為它被認為更適合初學者，結構更易於識別。
在本教程結束時，請檢視 此頁面，瞭解 Options API 和 Composition API 之間的區別。
我的第一個頁面
現在我們將學習如何在 5 個基本步驟中建立我們的第一個 Vue 網頁。
- 從一個基本的 HTML 檔案開始。
- 新增一個帶有
id="app"的 <div> 標籤，供 Vue 連線。 - 透過新增一個連結到 Vue 的 <script> 標籤來告訴瀏覽器如何處理 Vue 程式碼。
- 新增一個包含 Vue 例項的 <script> 標籤。
- 將 Vue 例項連線到 <div id="app"> 標籤。
這些步驟將在下面詳細介紹，並在最後以“自己動手”示例提供完整程式碼。
第 1 步：HTML 頁面
從一個簡單的 HTML 頁面開始
<!DOCTYPE html>
<html lang="en">
<head>
<title>我的第一個 Vue 頁面</title>
</head>
<body>
</body>
</html>
第 2 步：新增一個 <div>
Vue 需要你的頁面上有一個 HTML 元素來連線。
在 <body> 標籤內放置一個 <div> 標籤併為其指定一個 id
<body>
<div id="app"></div>
</body>
第 3 步：新增 Vue 的連結
為了讓瀏覽器能夠解析我們的 Vue 程式碼，請新增這個 <script> 標籤
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
第 4 步：新增 Vue 例項
現在我們需要新增我們的 Vue 程式碼。
這被稱為Vue 例項，可以包含資料、方法等，但現在它只包含一個訊息。
在這個 <script> 標籤的最後一行，我們的 Vue 例項已連線到 <div id="app"> 標籤
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
第 5 步：使用文字插值顯示 'message'
最後，我們可以使用文字插值，即雙大括號 {{ }} 的 Vue 語法，作為資料的佔位符。
<div id="app"> {{ message }} </div>
瀏覽器會將 {{ message }} 替換為 Vue 例項中儲存的 'message' 屬性的值。
這是我們的第一個 Vue 頁面
示例：我的第一個 Vue 頁面！
使用下面的“自己動手”按鈕測試此程式碼。
<!DOCTYPE html>
<html lang="en">
<head>
<title>我的第一個 Vue 頁面</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
</body>
</html>
自己動手試一試 »
文字插值
文字插值是指從 Vue 例項中獲取文字並在網頁上顯示。
瀏覽器收到帶有此程式碼的頁面
<div id="app"> {{ message }} </div>
然後瀏覽器找到 Vue 例項的 'message' 屬性中的文字，並將 Vue 程式碼翻譯成如下內容
<div id="app">Hello World!</div>
文字插值中的 JavaScript
簡單的JavaScript 表示式也可以寫在雙大括號 {{ }} 中。
示例
使用 JavaScript 語法在 div 元素內的訊息中新增一個隨機數
<div id="app">
{{ message }} <br>
{{'隨機數：' + Math.ceil(Math.random()*6) }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
開始
本教程將教你 Vue 的基礎知識。
你需要具備基本的 HTML、CSS 和 JavaScript 經驗才能跟上本教程。
點選“下一頁”按鈕繼續本教程。
