1. 列表渲染 — v-for=""
功能：根據(jù)一組數(shù)據(jù)的選項列表進(jìn)行渲染（自動for循環(huán)）。
語法： value,key in items / value,key for items
變異方法： vue提供一組方法喧锦，對數(shù)組進(jìn)行操作的時候涧狮，會觸發(fā)視圖更新（map()不會觸發(fā)） ,但其并不是原生的方法锅风，原生的方法是不會觸發(fā)視圖的更新
push() | pop() | shift() | unshift()
splice() | sort() | reverse()
Eg：定義一個水果數(shù)組數(shù)據(jù)
<body>
<div id="app">
<ul>
<li v-for="(val,key) in fruitsArr">{{ val }} => {{ key }}</li> //循環(huán)出來的列表項
</ul>
</div>
</body>
<script src="../vue.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function () {
var vm = new Vue({
el: '#app',
data:{
fruitsArr:['apple','banana','orage','pear'] //數(shù)據(jù)源
}
});
},false);
</script>
在頁面展示如下：
2. 事件處理器（指令殖蚕，綁定事件） — v-on=""
功能：用來監(jiān)聽DOM事件觸發(fā)代碼。
語法： v-on:eventName = "eventHandle"
指令簡寫： @eventName = "eventHandle"
事件處理函數(shù)： 寫在Vue實例的methods中統(tǒng)一進(jìn)行管理节吮。
事件對象是事件系統(tǒng)提供的奕剃，在事件處理函數(shù)中獲取
a) 當(dāng)行間不觸發(fā)的時候
v-on:keyup.enter = "addTodo"
addTodo(ev){ ｝ //這里的ev就是事件對象
b) 當(dāng)行間觸發(fā)的時候（也就是加了個執(zhí)行的括號）
v-on:keyup.enter = "addTodo(123,$event)" //行間傳入事件對象$event
addTodo(data,ev){ } //需要在頁面?zhèn)鲄⒌臅r候衷旅，第一個參數(shù)為傳入的參數(shù)，第二個參數(shù)才是事件對象纵朋。
3. 事件修飾符
事件處理函數(shù)只有純粹的邏輯判斷柿顶，不處理DOM事件的細(xì)節(jié)。
例如操软，阻止冒泡嘁锯，取消默認(rèn)行為、判斷按鍵
修飾符位置： 以“.”寫在事件名稱后面聂薪。 （ v-on:eventName.修飾符 = "xxx"）
事件修飾符：
.stop（冒泡） | .prevent（默認(rèn)事件） | .capture（捕獲） | .self | .once（執(zhí)行一次）
按鍵修飾符（常用的） --
.enter | .tab | .delete | .esc
.space | .up | .down | .left | .right
.ctrl | .alt | .shift | .meta
.鍵值
Eg:
//等價
@keyup.enter = "addTodo()"
@keyup.13 = "addTodo()"
4. 條件渲染 — v-show=""
** 根據(jù)表達(dá)式的值家乘，用來顯示/隱藏元素**
語法： v-show="表達(dá)式"，根據(jù)表達(dá)式的值true和false藏澳，來判斷顯示或隱藏
元素會被渲染到頁面中仁锯，只是根據(jù)表達(dá)式的值進(jìn)行css切換（display:none）
Eg：數(shù)據(jù)list數(shù)組是否有內(nèi)容
v-show="!list.length"
v-if = "xxx"，是不在頁面渲染的
5. 動態(tài)綁定class
** class也為元素的屬性翔悠，可以使用v-bind:class**
語法：
:class = "{className:表達(dá)式}"
表達(dá)式值為true添加className(add)
表達(dá)式值為flase不添加className(remove)
:class="{completed: item.isChecked}"
