進階模板語法

v-html可能被XSS攻擊

Vue的v-html的語法，盡量不要用在可以讓使用者提交資料的欄位中。
因為，有可能被有心人士使用XSS的方式，來攻擊你的網站。

v-once單次綁定

當你希望該欄位的資料，只會變更一次，那你就要使用v-once
ex:

1
2
3

<input type="text" class="form-control" v-model="text">

<div v-text="text">內容</div>

在以上這個範例，當你在input欄位輸入的內容，會更改到text成員屬性的值，
而div這個內容因為有利用v-text去綁定text成員屬性的值，所以，
div內的內容，會連動input所輸入的內容。

以下是用v-once綁定更改後的內容
ex:

1
2
3

<input type="text" class="form-control" v-model="text">

<div v-text="text" v-once>內容</div>

透過在div的html標籤內，寫入v-once，我們就可以讓，div的內容，只會更動一次。

在大括號中輸入表達式

ex:

---HTML---
<div id="app">
	{{text + rwHtml}}
	{{text.split('').reverse().join('')}}
	{{number1 + number2}}  // 也可以在你面放入計算式
</div>

---JavaScript---
var app = new Vue({
	el: '#app',
	data:{
		text: '這是一段文字',
        rawHtml: '示範文字',
		number1: 100,
		number2: 400
	}
})

透過資料狀態，來操作HTML屬性

我們可以透過v-bind來為HTML標籤動態綁定一些屬性，像是id或是className
而下面的範例，我們是要透過v-bind來為一個input欄位的disabled綁定一個成員屬性值。
ex:

---HTML---
<input type="text" class="form-control" :disabled="isDisabled">

---JavaScript---
var app = new Vue({
	el:{
		isDisabled:true
	}
})

以上的範例，就可以看到我們透過v-bind將disabled屬性透過v-bind綁定isDisabled，
如此，該input欄位的disabled屬性值會為true，造成該input欄位不能被輸入任何內容。
若你希望該input欄位可以被輸入內容的話，就只要將isDisabled改成false即可。

動態切換className 及 style多種方法

動態切換className的傳統寫法

ex:

---html---
<div class="box" :class="{'rotate':isTransform, 'background_red':boxColor}"></div>
<button class="btn" @click="isTransform = !isTransform">旋轉方塊</button>

<div class="form-check">
    <input type="checkbox" class="form-check-input" id="classToggle1" v-model="boxColor">
    <label class="form-check-label" for="classToggle1">切換色彩</label>
</div>


---JavaScript---
var app = new Vue({
	el: '#app',
	data:{
		isTransform: false,
		boxColor: false
	}
})

---CSS---
.rotate{
	transform: rotate(45deg)
}
.background_red{
	background: red
}

以上這個範例，
因為:class="{}"，這個語法其實是傳入一個物件，所以，在物件內容中可以輸入不只一種內容，
只要內容和內容之間用,(逗號)隔開就可以了，所以，{'rotate':isTransform, 'background_red':boxColor}，就可以用這兩種方式塞入兩個判斷式。
那回到上面這個例子的功能，
當我們點下button和input這兩個選項的時候，分別會切換isTransform和boxColor這兩個屬性值，並決定是否要為.box加上.rotate和.background_red這兩個className，進而改變該區塊的樣式。

動態切換className的物件傳入寫法

你可以看到，我們在.box上利用v-bind動態綁定className，直接把styleObj物件丟進去，
那在下面的按鈕和input欄位，分別綁定了styleObj的成員屬性styleObj.rotate和styleObj[‘bg-danger’]。
以此來達成切換.box的樣式效果。
這邊要特別注意的是，button是用@click的事件去綁定styleObj.rotate
而input欄位是利用v-model去綁定styleObj[‘bg-danger’]。
第二個要注意的是
因為，屬性值bg-danger中間是一個-，你如果用styleObj.bg-danger來提取該成員值，會報錯，
所以你要用陣列的方式丟入該屬性值的字串名稱，來取得它的屬性內容，就不會報錯囉~
第三個要注意的是，
要變動的CSS樣式的class名稱，和你要傳入的綁定的物件的屬性值的名稱要一樣，如果不一樣，就會無法綁定成功。

陣列方式加入className

ex:

1
2
3

---HTML---
<button clas="btn" :class="['btn-outline-primary', 'active']">修改按鈕樣式</button>

以上的範例，藉由丟入一個陣列，裡面再加入你想放入的className，如此，就可以為這個btn物件
加入btn-outline-primary 和 active這兩個className了。

另外一種陣列的方式加入className

ex:

---HTML---
<button class="btn" :class="arrayClass">請操作本元件</button>

<div class="form-check">
    <input type="checkbox" class="form-check-input" id="classToggle3" v-model="arrayClass" value="btn-outline-primary">
    <label class="form-check-label" for="classToggle3">切換樣式</label>
</div>
<div class="form-check">
	<input type="checkbox" class="form-check-input" id="classToggle4" v-model="arrayClass" value="active">
	<label class="form-check-label" for="classToggle4">啟用元素狀態</label>
</div>

---JavaScript---
var app = new Vue({
	el: '#app',
	data:{
		arrayClass:[]
	}
})

以上這個範例，我們直接把.btn按鈕的class綁定陣列arrayClass。
那在”切換樣式” 這個input欄位的value設為btn-outline-primary，並用v-model綁定陣列arrayClass。
那在”啟用元素狀態” 這個input欄位的value設為active，並用v-model綁定陣列arrayClass。

所以，當我們點選了這兩個input欄位中，就可以為arrayClass這個陣列分別加入btn-outline-primary和active這兩個元素。
也就可以順便為我們的.btn按鈕添增或刪減這兩個樣式了。

綁定行內樣式

語法是 :style=""

綁定行內樣式的傳統寫法

ex:

1	<div class="box" :style="{'backgroundColor': red}">

用以上這種方式就可以為這個.box區塊加入背景紅色的樣式。
另外，要注意一下，background-Color這個樣式要用駝峰式的方式來撰寫backgroundColor這樣才可以。

綁定行內樣式的物件寫法

用上面這個寫法，把stlye丟入styleObj物件，就可以為這個.box區塊同時加入backgroundColor和
outline這兩個樣式了。

綁定行內樣式的陣列寫法

ex:

---HTML---
<div id="app">
	<div class="box" :style="[{backgroundColor: 'red'}, {borderWidth: '5px'}]">
</div>

以上這個範例，你可以看到用style丟入一個陣列。
但是，要注意裡面的樣式的元素都要用物件的方式來撰寫喔~~

綁定行內樣式的陣列寫法-2

ex:

---HTML---
<div id="app">
	<div class="box" :style="[styleObject, styleObject1]">
</div>


---JavaScript---
var app = new Vue({
	el: '#app',
	data:{
		styleObject:{
			backgroundColor: 'red',
			borderWidth: '5px'
		},
		styleObject1:{
			color: 'red'
		}
	}
})

用上面這種方式，我們可以一次為一個元素加入大量的css樣式喔～

自動加上 Prefix

我們不需要手動加入prefix，Vue會為我們自動加入。
就是像-webkit這種要讓語法適應各種不同瀏覽器的前綴詞，Vue會為我們自動加入囉~

v-for

除了陣列以外，物件也可以使用v-for遍歷陣列和物件。

以上這個範例，可以看到其實v-for的寫法是一樣的，不管你是遍歷陣列或物件陣列。
唯一兩者個差別在索引值，也就是上方範例中的key的值。
陣列會是數字0, 1 ，而物件陣列會是成員屬性的名稱auntie 和ming。