1、插值
1 A：<span>TEXT:{{text}}</span> 2 {{text}}會被相應的數據類型text屬性值替換，當text值改變時候，文本中的值也會相應的發生變化 3 4 B：有時候只需要渲染一次數據，后續的數據變化不再關心，可以通過“*”實現 5 <span>TEXT:{{*text}}</span> 6 7 C：雙大括號標簽會將里面的值作為字符串來處理，如果值是HTML代碼，可以使用過3個大括號表示
2、表達式
表達式：
1 <!-- 合法表達式 --> 2 A：js表達式 {{cents/100}} 3 B：三元表達式 {{true ? 1 : 0}} 4 C：{{example.split(",")}} 5 6 <!-- 無效實例 --> 7 A：{{var logo = 'DDFE'}} 8 B: {{if(true) return 'DDFE'}} 條件控制語句是不支持的，可以使用三元表達式
表達式后面添加過濾符：
A: {{examole | toUpperCase}} 這里的toUpperCase就是過濾器
B: 允許過濾器串聯 {{example | filter1 | filter2}}
C: 過濾器支持傳入參數，{{example | filter a b}}，這里的a和b均為參數，用空格隔開
3、指令
1 A：指令是帶有v-前綴的特殊特性，值限定為綁定表達式，也就是js表達式以及過濾器 2 3 B：指令的作用是當表達式的值發生變化的時候，將這個變化也反應到DOM上， 4 eg：<div v-if="show">DDFE</div> 當show為true的時候，展示DDFE字樣，否則不展示 5 6 C：有一些指令的語法有些不一樣，在指令與表達式之間插入一個參數，用冒號分隔，如v-bind指令 7 eg:<a v-bind:href="url"></a> 8 <div v-bind:click="action"></div>
內部指令：
v-if：根據表達式的值在DOM中生成或移除一個元素
1 <div id="example"> 2 <p v-if="greeting">hello</p> 3 </div> 4 5 <script> 6 var exampleVM2 = new Vue({ 7 el : '#example', 8 data : { 9 greeting : false 10 } 11 }) 12 </script> 13 14 結果： 15 <div id="example"></div> 16 17 <!-- 因為v-if指令是一個指令，需要添加到一個元素 --> 18 <!-- 如果想切換多個元素，可以使用template元素包裝元素 --> 19 <template v-if="ok"> 20 <p>Title</p> 21 <p>ssss</p> 22 <p>aaaa</p> 23 </template> 24 25 結果： 26 <div id="example"> 27 <p>Title</p> 28 <p>ssss</p> 29 <p>aaaa</p> 30 </div>
v-show：根據表達式的值來顯示或者隱藏HTML元素，也就說說要是為false，元素上面就會多一個內聯樣式style="display:none",v-show不支持<template>語法
v-else：必須跟着v-show或v-if，充當else的功能，最好不要和v-show一塊使用，可以用另一個v-show替代
v-model：在表單控件元素上創建雙向數據綁定
1 <body id="example"> 2 <form> 3 <input type="text" v-model="data.name" placeholder=""> 4 5 <input type="radio" id="one" name="" value="One" v-model="data.sex"> 6 <input type="radio" id="two" name="" value="Two" v-model="data.sex"> 7 8 <input type="checkbox" name="" value="book" id="book" v-model="data.interest"> 9 <input type="checkbox" name="" value="swim" id="swim" v-model="data.interest"> 10 <input type="checkbox" name="" value="game" id="game" v-model="data.interest"> 11 12 <select v-model="data.indentity"> 13 <option value="teacher" selected>教師</option> 14 <option value="doctor">醫生</option> 15 </select> 16 </form> 17 </body> 18 <script> 19 new Vue({ 20 el : '#example', 21 data : { 22 data : { 23 name : "", 24 sex : "", 25 interest : [], 26 indentity : '' 27 } 28 } 29 }) 30 </script>
-----------
除了以上用法，該指令后面還可以添加多個參數（number，lazy，debounce）：
number：將用戶的輸入自動轉化為Number類型，如果原值的轉化結果為NaN,則返回原值
-----------
lazy：在默認情況下，v-model在input事件中同步輸入框的值與數據，添加lazy屬性，將數據改到在change事件中發生
1 <input type="" name="" v-model="msg" lazy>
-----------
debounce：設置一個延時，在每次敲擊之后延時同步輸入框的值與數據
<input type="text" v-model="msg" debounce="5000"> <-- 5s之后才會改變 -->
v-repeat：基於源數據重復渲染元素，數組中的每一個對象，都會創建一個Vue對象，在重復元素中，可以訪問重復實例以及父實例的屬性，使用$index呈現對應的數組索引
1 <body id="example"> 2 <ul id="demo"> 3 <li v-repeat="items" class="item-{{$index}}"> 4 {{$index}} - {{parentMsg}} {{childMsg}} 5 </li> 6 </ul> 7 </body> 8 <script> 9 var demo = new Vue({ 10 el : '#demo', 11 data : { 12 parentMsg : '滴滴', 13 items : [ 14 {childMsg : '順風車'}, 15 {childMsg : '專車'} 16 ] 17 } 18 }) 19 </script>
有時候，我們更希望顯式的訪問變量，而不是隱式的回退到父元素，這時可以通過使用別名的方式進行實現：
v-repeat = ‘item in items’ （vue.js 0.12.8 及以后版本支持in分隔符）
-----------
要是要重復一個包含多個DOM元素的塊，可以使用<template>
-----------
對於含有原始值的數組，可以簡單的通過使用$value來獲取值
1 <body id="example"> 2 <ul id="tags"> 3 <li v-repeat="tags"> 4 {{$value}} 5 </li> 6 </ul> 7 </body> 8 <script> 9 var demo = new Vue({ 10 el : '#tags', 11 data : { 12 tags : ['js','mvvm','value'] 13 } 14 }) 15 </script> 16 17 //輸出 18 js 19 mvvm 20 value
-----------
數組數據發生變動的時候，vue的監測方法，能觸發視圖更新：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
$set ----- demo.items.$set(0,{childMsg : 'Changed!'})
$remove --- demo.item.$remove(0)
filter ： 返回新數組
concat ： 返回新數組
slice ： 返回新數組
demo.items = demo.items.filter(function(item){
return item.childMsg.match(/hello/);
})
-----------
在vue中不能檢測到下面數組的變化：
A: 直接用索引設置元素,eg:vm.items[0] = {}
解決方案：可以直接用$set方法
B: 修改數據的長度 ,eg:vm.items.length=0
解決方案：用一個空數組替換items
-----------
也可以使用v-repeat遍歷一個對象，每一個重復的實例都有一個特殊的屬性$key,對於原始值，可以使用$value獲取
3種方法：$add(key,value),$set(key,value),delete(key,value)
<body id="example"> <ul id="repeat-object"> <li v-repeat="primitiveVlaue">{{$key}} : {{$value}}</li> <li>======</li> <li v-repeat="objectVlaue">{{$key}} : {{msg}}</li> </ul> </body> <script> var demo = new Vue({ el : '#repeat-object', data : { primitiveVlaue : { a : 'a', b : 'b', c : 'c' }, objectVlaue : { one : { msg : 'hello' }, two : { msg : 'didi' } } } }) </script> <!-- 輸出 --> a : a b : b c : c ======= one : hello two : didi
-----------
v-repeat支持整數，就是重復的次數
<div id="range"> <div v-repeat="val">hi! {{$index}}</div> </div> <!-- 輸出 --> hi! 0 hi! 1 hi! 2 <span v-repeat="n in 6">{{n}}</span> <!-- 輸出 --> 0 1 2 3 4 5
-----------
filterBy：
<input type="" name="" v-model="searchText"> <ul> <li v-repeat="user in users | fiterBy searchText in 'name">{{user.name}}</li> </ul> users[ { name : '快1', tag : '1' } { name : '快2', tag : '2' } { name : '快3', tag : '3' } ]
orderBy：
<body id="example"> <ul> <li v-repeat="user in users | orderBy field reverse">{{user.name}}</li> </ul> </body> <script type="text/javascript"> var demo = new Vue({ el : '#example', data : { filed : 'tag', reverse : false, users : [ { name:'快1', tag : 1 }, { name:'快5', tag : 5 }, { name:'快3', tag : 3 } ] } }) </script> <!-- 輸出 --> 快1 快3 快5
v-for:基於源數據重復渲染元素，使用$index呈現相應的數據索引
v-for='item in items' 或者 在1.0.17版本之后支持 v-for='item of items'
<body id="example"> <ul id="demo"> <li v-for='item in items' class="item-{{$index}}"> {{$index}} - {{parentMessage}} {{item.msg}} </li> </ul> </body> <script> var demo = new Vue({ el : '#demo', data : { items : [ {msg : 'didi'}, {msg : 'ddddd'} ] } }) </script>
v-text：更新元素的textContent
<span v-text="msg"></span> <!-- same as --> <span>{{msg}}</span>
v-html：更新元素的innerHTML。如果想要復用模板，則應當使用partials
<span v-html="html"></span> <!-- same as --> <span>{{html}}</span>
v-bind：用於響應更新HTML特性，將一個或多個attribute或者一個組件prop動態綁定到表達式
<!-- 綁定attribute --> <img v-bind:src="imageSrc" alt=""> <!-- 縮寫 --> <img :src="imageSrc"> 在綁定class或者style的時候，支持其他類型的值，如數組或對象 <body id="example"> <div :class="[classA,{classB:isB,classC:isC}]"></div> </body> <script type="text/javascript"> var demo = new Vue({ el : '#example', data : { dataA : 'A', isB : false, isC : true } }) </script>
-----------
當沒有參數的時候，可以綁定到一個對象，但是此時的class以及style綁定不支持數組和對象
<body id="example"> <div v-bind="{id:someProp,'OTHERAttr':otherProp}"></div> </body> <script type="text/javascript"> var demo = new Vue({ el : '#example', data : { someProp : 'idName', otherProp : 'prop' } }) </script>
v-on：綁定事件監聽
在監聽自定義事件時，內聯語句可以訪問一個$arguments屬性，他是一個數組，包含了傳給子組件的$emit回調的參數
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
在監聽原生DOM事件時，如果只定義一個參數，DOM event為事件的唯一參數，如果在內聯語句處理器中訪問原生DOM事件，則可以用特殊變量$event把它傳入方法
<!-- 方法處理器 --> <button v-on:click="doThis"></button> <!-- 內聯語句 --> <button v-on:click="doThat('hello',$event)"></button> <!-- 縮寫 --> <button @click="doThis"></button>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
v-on后面不僅可以跟參數，還可以增加修飾符
.stop --- event.stopPropagation()
.prevent --- event.preventDefault()
.capture --- 添加事件偵聽器時使用capture模式
.self --- 只當事件從偵聽器綁定的元素本身觸發時才會觸發回調
.{keyCode | keyAlias} -- 只在指定按鍵上觸發回調，鍵值包含【esc:27、tab：9、enter：13、spac：32、'delete'：[8,46]、up：38、left:37、right：39、down：40】
<!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默認行為 --> <button @click.prevent="doThis"></button> <!-- 阻止默認行為，沒有表達式 --> <button @click.prevent></button> <!-- 串聯修飾符 --> <button @click.stop.prevent="doThis"></button> <!-- 鍵修飾符，鍵別名 --> <button @keyup.enter="onEnter"></button> <!-- 鍵修飾符，鍵代碼 --> <button @keyup.13="onEnter"></button>
v-el:為DOM元素注冊一個索引，方便通過所屬實例的$els訪問這個元素，可以用v-el:some-el設置this.$els.someEL
<span v-el:msg>hello</span> <span v-el:other-msg>world</span> 通過this.$els獲取相應的DOM元素 this.$els.msg.textContent this.$els.otherMsg.textContent
v-pre:編譯時跳過當前元素和它的子元素
v-cloak：保持在元素上直到關聯實例結束編譯