從零開始的 Vue3 生活- Computed 計算屬性 和 watch 監聽器
前言這篇主要介紹 computed 和 watch 這兩個 Options API。
Computed 計算屬性在模板中表達式非常的便利，但如果在模板中放入太複雜的邏輯，它會讓模板過度複雜。例如，我們想反轉一個字串：
<div id="app">
<p>{{ string.split('').reverse().join('') }}</p>
</div>
const app = Vue.createApp({
data() {
return {
string: 'Hello World'
}
}
})
在上面程式碼可以看到，我們在模板裡放入這種複雜的表達式，畫面會變得非常雜亂，為解決此問題，我們可以把這些表達式寫在 computed 屬性裡：
<div id="a ...
從零開始的 Vue3 生活- 事件監聽
前言這篇主要講解 v-on 這個事件監聽的指令，以及簡單描述一下 methods 這個物件，是 Vue 中最常用的指令。
監聽事件v-on 這個指令讓我們可以監聽 DOM 事件，如同 JavaScript 中的 addEventListener，在裡面可以帶入一個方法或是對 data 裡的屬性直接賦值。這裡以 click 事件舉例，用法為 v-on:click="xxxx"，或是使用 @ 簡寫 @click="xxxx" 的方式：
<div id="app">
<button @click="count += 1">click</button>
{{ count }}
</div>
const app = Vue.createApp({
data() {
return {
count: ...
從零開始的 Vue3 生活- 列表渲染與條件渲染
前言這篇主要介紹 v-for、v-if、v-show 是甚麼，以及如何使用。
v-if 和 v-showv-ifv-if 這個指令可以把它想成是元素的是 if 語法，當 v-if 的值等於 true 時，才會渲染，否則元素不會出現在網頁上，並且 v-if 也支援 JavaScript 的表達式。Vue 也提供了 v-else 和 v-else-if，作用是甚麼應該不用我多說了：
<div id="app">
<h1 v-if="who === 'tom'">Hello Tom!</h1>
<h1 v-else-if="who === 'lucy'">Hello Lucy!</h1>
<h1 v-else>Hello Brah!</h1>
</div>
con ...
從零開始的 Vue3 生活- 動態屬性指令 v-bind
前言這篇主要說明 Vue 的 v-bind 指令，它可以將資料綁定在 HTML 的標籤上，是非常實用又常用的指令，但在介紹 v-bind 前，我們先來介紹比較簡單的兩個指令：v-text 和 v-html。
v-text 和 v-htmlv-text 這個指令只能用來呈現資料裡的文字，而 v-html 則是如果資料裡面有包含 html 的標籤，可以把它解析成 html：
<!-- 顯示帶有 html 結構的文字 -->
<div v-text="message"></div>
<!-- 顯示解析 html 後的文字 -->
<div v-html="message"></div>
const app = Vue.createApp({
data() {
return {
message: 'Hi <strong>Vue3</s ...
從零開始的 Vue3 生活- MVVM 概念和 v-model
前言這篇要來介紹一下 MVVM 模型，雖然 Vue 沒有完全遵循 MVVM 的概念，但 Vue 的設計也是受到此模型的影響。
甚麼是 MVVM?是一種軟體架構模式，MVVM 的全名為 Model-View-ViewModel，它們分別代表：
Model 是資料存取層(資料狀態)
View 是畫面顯示層，也就是你現在看到的網頁(視圖)
View-Model 是資料與顯示互動中介層(資料聯繫器)
在 MVVM 架構下，View 和 Model 並沒有直接的聯繫，而是透過 View-Model 來進行交流。View-Model 透過資料雙向綁定將 View 和 Model 聯繫起來，使得 View 和 Model 的同步工作是自動的。所以當 Model 改變時，View 也會跟著做改變；反過來也是一樣。
v-model 資料雙向綁定v-model 這個指令常用在表單元素，為實現資料雙向綁定。
綁定 <input>：
<div id="app">
<input type="text" v-mo ...
從零開始的 Vue3 生活-安裝環境及建立應用程式
前言Vue 是一個漸進式框架，那麼何謂漸進式框架? 這裡簡單來的講就是想要使用甚麼功能可以自己決定，只需載入 Vue 的核心就好
將 Vue 加入到專案的方式總共有 4 種：
在 HTML 上以 CDN 方式引入
下載 JavaScript 並自行管理 (這個方法其實跟 CDN 方式差不多)
使用 npm 安裝
使用官方的 CLI 來建立專案
CDN 載入在學習時或是在開發小專案時，用 CDN 載入是比較方便的選擇：
<script src="https://unpkg.com/vue@next"></script>
CDN 上 @next 指的是 Vue 目前最新的版本，目前最新的版本是 3.x，當然你也可以使用 2.x 版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
npm 載入用 Vue ...