目錄

簡介
基本使用
常用property

簡介

Vue.js (讀作view.js)
是一個2019左右竄紅的javascript framework
可以相對容易的建造前端、UI
並且也有比如virtual DOM 等效能上的改進
輕量 快速 … 優點

基本使用

先用html檔以script tag 引入 vue.js
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

vue的概念跟大多數template差不多，簡化網頁html的語法與增加可讀性

例子1: render data to DOM

上例可以看出Vue物件藉由指定element為id是app，就可以將data與該element綁定上，因此div可自由取用data內的資料 (此例為message)

例子2: loop

vue有提供tag attribute，這些vue attr大多為v開頭，比如v-bind,v-if,v-for …

例如下例:

可以得知v-for = “item in obj”

• item: 一個自訂變數用於表示iteration中取出的東西
  此例中就是data中todos各個 {text: …}
• obj: 通常是 vue obj 中data的一組key:value 中的key，並且這個key對應的value也是一個json，可以進行iteration
  此例中就是data中的todos

補充寫法

1. v-for=”(item, index) in items”
   其中 index (second variable)會從0開始往下統計，類似python的enumerate

2. v-for = “(value, name) in object”
   其中name (second variable) 就是object裡面的key

註: 以上兩個例子，second variable都只是一個變數名，會有差異是在items是一個array，object是一個物件

3. v-for = “n in 10” 就可以有 1~10的range

例子3: if

一樣藉由vue attr實現，這裡使用到v-if

上例中v-if 若為true，則此tag呈現，反之，此tag不呈現

補充寫法

1. v-else 可以和v-if連用
2. 也有 v-if “key==value” 的條件式

本節重點摘要

• vue 藉由分離html與vue object的方式，簡化html語法
• vue 會以el:“element selector"的方式指定所綁定的element tag
• html 可以自由取用綁定的vue obj中的data
• vue提供的vue tag attribute就可以做到基本的流程控制以及更多

常用property

vue物件除了有el , data以外，也可以有其他常用的property，輔助Vue實現更多功能

computed

可以當作一個function table
裡面的function可以直接被取用

目的: 一樣是簡化template中的可能使用到的函式
比如想要reverse字串，可以直接這樣寫在html裡

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

但是更推薦這樣寫，放在vue.js中處理，可以使html更簡潔
圖中可以看到為reversedMessage建立了一個對應的function
就可以直接在綁定的html tag裡呼叫

methods

基本上和computed功能一樣，也是一個function對應表 但是有一點不一樣，computed每次被呼叫，如果其相依值(dependencies)沒被改變的話，不會重新計算函式值，而會回傳原本計算值
以上例而言，message不改變，reversedMessage不用重新計算
因此靜態值相關函數可以放computed,動態值相關函數再放methods可以節省計算資源

created

相當於物件的建構子，對應一個函數即可

參考資料

vue.js guide