【前端新手日記】Vue.js學習筆記(2)-Vue的常用指令－文科少女學程式

在Vue這個框架下，有不少方便好用的常見語法。
這次就以這部分的內容為主，整理Vue的學習筆記。

Vue的常見指令
v-on 事件監聽
以前利用DOM API監聽事件的時候，會需要先把要觸發事件的節點長出來，
再用addEventListener()監聽事件。
在Vue裡面只需要將v-on寫在想觸發事件的HTML標籤上，就可以進行事件監聽。
使用方法
要觸發事件的標籤上，加上v-on:事件="事件觸發後，要進行的方法method"
*也可以簡寫成@click="事件觸發後，要進行的方法method"
範例
在HTML上加上v-on

簡寫用法

這是觸發事件後，會執行的method

v-bind 增加HTML屬性值或把父元件的資料帶入子元件
在需要透過HTML屬性值切換樣式，或是需要把資料帶到HTML裡面渲染時，可以使用v-bind帶入。
使用方法
在要使用的標籤上，加上v-bind:屬性名稱或要被使用之資料現在使用時要用的名稱="屬性值(主要會用true和false操控)或資料名稱"
*也可以簡寫成:屬性名稱或要被使用之資料現在使用時要用的名稱="屬性值(主要會用true和false操控)或資料名稱"
範例
在HTML上加上v-bind

簡寫用法

當completed為true的狀態下，li會被套用completed的設定

v-for 將資料用迴圈渲染
在Vue框架中的迴圈用法，可以將陣列資料依序渲染到HTML裡面，
只需要一組固定的HTML，不需要像操控DOM一樣，還要額外插入HTML。
使用方法
在要使用的標籤上，加上v-for="(item, index) in items"，另外還需要加上:key="item.id"，
因為Vue會用key值判斷資料有無被修改，有key的時候，在渲染資料時，
就可以避免ㄧ些因為資料所造成的渲染問題。
範例
在HTML上加上v-for和key

這樣設定後，就會依照資料的數量決定有幾個<li></li>，並且將內容渲染出來。

v-model 雙向綁定表單資料
若沒有將資料雙向綁定，一般就只能單方面從後段資料儲存處更改渲染的資料內容，
做了雙向綁定，從畫面的輸入也能更改資料內容。
使用方法
在標籤上加上v-model="要綁定的資料"，就可以將資料雙向綁定。
範例
在下面這個案例中，當我們在input欄位輸入內容後，vue上的newTodo資料內容就會變成輸入的內容。

v-if, v-else, v-else-if 條件設定
在標籤上設定一個條件，來決定是否渲染這部分的HTML。
如果為true，就會出現HTML
如果為false，就不會出現HTML
使用方法
在要使用的標籤上，加上v-if="條件內容"，可以搭配v-else使用，
多條件則可以搭配v-else-if使用。
範例
再要依照條件決定是否顯示的HTML上用v-if寫上條件。

這樣設定後，就會依照資料的內容決定顯示那一個部分的畫面。

v-show
跟v-if很像，都可以用true和false來控制是否顯示指定部分的內容，
但是跟v-if不一樣的地方是，v-if會決定是否渲染，
而v-show不管是true還是false都會渲染出來，只是會用CSS隱藏指定的畫面，
所以從開發者工具查看的話，不管是true還是false的HTML都會被顯示在上面。
使用方法
使用方式跟v-if一樣，在要使用的標籤上，加上v-show="條件內容"。
範例

當todos有資料時，才會顯示這部分，但是在開發者工具中，可以看到這一段的HTML，
只是先用CSS先把這個部分隱藏不顯示。