初體驗 Vue 的簡潔與威力

用幾分鐘的時間，

就能快速體驗 Vue 的簡潔與威力！

原來，解決 html 和 js 之間的典型需求和痛點，

是這麼容易 ~顯示與操作網頁上的資訊。

一天一點點，就可以持續有進展。

就像馬克吐溫說的 ~

把複雜的事情，拆成一件一件做得到的小事，然後從第一件開始

重點

1.
{{ variable }} ~ 綁定資料 (mustache 模版語法)
怎樣在 html 動態顯示資料呢？

定義
{{message}}

透過 js 顯示
data() { return {
return {
message: "Hello World"
}
}

Q. 多個變數可以嗎？

當然，這是前端 3 大主流框架的 Vue 耶

怎麼做呢？

{{m1}} -- {{m2}}
data() { return {
return {
msg1: "Hello World",
msg2: "Vue"
}
}
2.

v-pre ~ 就是想顯示 {{message }}
如果不特別處理，就會被 Vue 執行 ...

解法就是，用 v-pre
3.
{{ operator }} ~ 運算式，也會通喔
可以用這個例子試試看唷

{{ numbers.map(x => x*2 }}
return {
numbers: [1, 2, 3, 4]
}

輸出結果：

Vue 太厲害了，

居然直接用 array 典型的表達形式輸出
4.

{{ foo() }} ~ function 也可以耶
除了字串、運算子，

連 function 也可以耶，真方便！
5.

v-text ~ 直接取代 {{ variable }}
這樣有什麼好處呢？

這我怎麼會知道，我也是初學者呀

那就問 AI 好了 (回應如下圖)

簡單來說，就是會覆蓋元素內的所有原有內容

想想也合理，

因為它是定義在元素的屬性，好像也只能這樣做！

小提醒：

AI 或人的回答不一定完全正確喔

如果覺得有道理，就先暫時接受好了，但可以持保留態度。

反正在現階段也不太重要，

等到越來越熟悉，真正遇到問題時再確認也 OK。
6.
綁定屬性 (v-bind)，例如 :src
The v-bind directive lets us bind an HTML attribute to data in the Vue instance. This makes it easy to change the attribute value dynamically. (w3school)

<div v-bind:[attribute]="[Vue data]"></div>

用舉例的比較快

HTML 屬性設定： <img src="a.jpg" />
Vue 的寫法：<img :src="url_var" /> (or 完整寫法，使用 v-bind:src=" url_var ")

綁定 style：

<div v-bind:style="{ fontSize: size }"> ... </div>

Q. 為什麼用 fontSize 而不是用標準的 css 屬性 "font-size"？

這是因為 JavaScript 物件屬性名稱不能有連字號，所以 CSS 的 kebab-case（連字號命名）會被轉換成 camelCase（駝峰式命名）

例如 element.style.fontSize = '16px';
7.

綁定事件 (v-on)，例如 @click
事件驅動 (event-driven) 是 Windows 人機與系統運作的關鍵

也就是「遇到什麼情況，就做什麼事情」

例如，在圖片上按滑鼠左鍵，就會觸發 onclick 事件

這時候程式就可以「聽」這個事件並做對應的處理

Vue 綁定事件的方式，就如期待，使用 v-on:event

例如 v-on:click

Q1. 可以省略 v-on 嗎？

當然，類似 :src，Vue 的設計用 @click (如果是你應該也會這樣設計吧)

Q2. 可以帶參數嗎？
當然，之後等要用到時再說囉
8.

v-model 雙向資料綁定
顧名思義，

就是 html 的資料和變數之間是互相綁定的。

之前的 {{ }} 只是很單純的，將變數綁定到 HTML 的資料，

反過來也可以喔，用 v-model 就可以將 HTML 的資料綁定到變數
9.

v-html ~ 直接輸出 html
前面的 v-text 或是 {{ }} 都會將內容當作「文字」輸出

即使你想要顯示一個連結網址 <a href="/">home</a> 都不行喔

解法就是使用 v-html