指令歸納總結
1媒熊、v-if ：可以完全根據(jù)表達式的值在DOM中生成或者移除一個元素。如果v-if表達式賦值為false坟比，對應的元素就會從DOM中移除芦鳍。如果需要切換多個元素，把<template>元素當作包裝元素葛账，并使用v-if柠衅，最終的渲染結果不會包含它。
<div id="example">
<template v-if="ok">
<h1>A</h1>
<p>B</p>
<p>C</p>
</template>
</div>
<script>
var exampleVM2 = new Vue ({
el:'#example',
data: {
ok:true
}
})
</script>
2籍琳、v-show :根據(jù)表達式的值來顯示或者隱藏HTML元素菲宴。當v-show賦值為false時，元素將被隱藏巩割，并且元素增加一個內(nèi)聯(lián)樣式style="display:none"裙顽。v-show不支持<template>語法。
<input type="text" name="" v-model="message" placeholder="edit me">
<div id="example">
<p v-show="ok">HEllo</p>
</div>
<script>
var exampleVM2 = new Vue({
el:'#example',
data: {
ok:false
}
})
</script>
一般來說宣谈，v-if更高的切換消耗愈犹，而v-show有更高的初始渲染消耗，因此需要頻繁地切換闻丑，使用v-show漩怎，在運行條件不大可能改變時，使用v-if嗦嗡。
3勋锤、v-else：必須跟著v-if或者v-show，充當else功能侥祭。
<div id="example">
<p v-if="ok">yes</p>
<p v-else="ok">no</p>
</div>
<script>
var exampleVM2 = new Vue ({
el:'#example',
data: {
ok:'false'
}
})
</script>
4叁执、v-model：用來在input、select矮冬、text谈宛、checkbox
、radio等表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定胎署。
<form id="example">
姓名：
<input type="text" name="" v-model="data.name" placeholder="">
<br>
性別：
<input type="radio" name="" id="man" value="One" v-model="data.sex">
<label for="man">男</label>
<input type="radio" name="" id="male" value="Two" v-model="data.sex">
<label for="male">女</label>
<br>
興趣：
<input type="checkbox" id="book" value="book" name="" v-model="data.interest">
<label for="book">閱讀</label>
<input type="checkbox" id="swim" value="swim" name="" v-model="data.interest">
<label for="swim">游泳</label>
<input type="checkbox" id="game" value="game" name="" v-model="data.interest">
<label for="game">游戲</label>
<input type="checkbox" id="song" value="song" name="" v-model="data.interest">
<label for="song">唱歌</label>
身份：
<select v-model="data.job">
<option value="teacher">教師</option>
<option value="doctor">醫(yī)生</option>
<option value="police">警察</option>
</select>
</form>
<script>
new Vue ({
el:'#example',
data: {
data: {
name:"",
sex:"",
interest:[],
job:''
}
}
}
})
</script>
v-model后面可以添加多個參數(shù)（number吆录、lazy、debounce）
<div id="example">
<input type="text" name="" v-model="msg" lazy>
{{msg}}
</div>
<script>
var Vue({
el:'#example',
data: {
msg: 'change事件之后改變'
}
})
</script>
<div id="example">
<input type="text" name="" v-model="msg" debounce=""5000>
{{msg}}
</div>
<script>
var Vue({
el:'#example',
data: {
msg: '5000s之后改變'
}
})
</script>
5琼牧、v-for : 基于源數(shù)據(jù)重復渲染元素
(1)可以使用$index來呈現(xiàn)相對應的數(shù)組索引恢筝。v-for需要特殊的別名哀卫，形式為“item in items”，（item是數(shù)據(jù)數(shù)組撬槽，item是當前數(shù)組元素的別名）此改。
(2)v-for遍歷一個對象，每一個重復的實例都將有一個特殊的屬性$Key侄柔，或者給對象的鍵值提供一個別名带斑。
<div id="example">
<ul id="repeat-object">
<li v-for="value in primitiveValues">{{ $key }} : {{ value }}</li>
<li>---------</li>
<li v-for="( key, item ) in objectValues">{{ key }} : {{ item.msg }}</li>
</ul>
</div>
<script>
var demo = new Vue ({
el:'#repeat-object',
data: {
primitiveValues: {
FirstName: 'A',
LastName: 'a',
Age: 10
},
objectValues: {
one: {
msg: 'Hello'
},
two: {
msg: 'World'
}
}
}
})
</script>
（3）v-for支持整數(shù)
<div id="range">
<div v-for="n in 10">整數(shù)：{{ $index }}</div>
</div>
6、v-text ：可以更新元素的textContent勋拟，在內(nèi)部，{{ Mustache }}插值也被編譯為textNode的一個v-text指令妈候。
<span v-text="msg"></span>
<br>
<span>{{ msg }}</span>
7敢靡、v-bind：用于響應更新HTML特性，將一個或多個attribute苦银，或者一個組件prop動態(tài)綁定到表達式啸胧。
（1）綁定class或者style，支持其他類型的值幔虏。
<div id="example">
<div : class = "[ classA , { classB:isB , classC:isC }]"></div>
</div>
<script>
var demo = new Vue ({
el:'#example',
data: {
classA: 'A',
isB: false,
isC: true
}
})
</script>
(2)沒有參數(shù)時纺念，可以綁定到一個對象，此時的class和style綁定不支持數(shù)組和對象（key會轉換成小寫）想括。
<div id="example">
<div v-bind="{ id:someProp, 'OTHERAttr': otherProp }"></div>
</div>
<script>
var exampleVM2 = new Vue ({
el:'#example',
data: {
someProp: 'idName',
otherProp: 'prop'
}
})
</script>
8陷谱、v-on : 用于綁定事件監(jiān)聽器，類型由參數(shù)指定瑟蜈。
<!--方法處理器-->
<button v-on:click="doThis"></button>
<!--內(nèi)聯(lián)語句-->
<button v-on:click="doThat('hello',$event)"></button>
<!--縮寫-->
<button @click="doThis"></button>
后面可以增加修飾符:
- .stop —— 調(diào)用event.stopPropagation()烟逊。
- .prevent —— 調(diào)用event.preventDefault()。
- .capture —— 添加事件偵聽器時使用capture模式铺根。
- .self —— 只當事件是從偵聽器綁定的元素本身觸發(fā)時才會出發(fā)回調(diào)宪躯。
9、v-pre : 編譯時跳過當前元素和它的子元素位迂。
自定義指令
1访雪、指令實例屬性
el:指令綁定的元素。
vm:擁有該指令的上下文ViewModel
expression:指令的表達式掂林，不包括參數(shù)和過濾器臣缀。
arg:指令的參數(shù)。
name:指令的名字党饮。
modifiers:一個對象肝陪，包含指令的修飾符。
descriptor:一個對象刑顺，包含指令的解析結果氯窍。
<div id="example" @click="up" >
<div id="demo" v-demo:hello.a.b="msg">
</div>
</div>
<script>
Vue.directive('demo',{
bind: function(){
console.log('demo bound');
},
update: function(value){
this.el.innerHTML =
'name - ' + this.name + '<br>' + 'expression - ' + this.expression + '<br>' + 'argument - ' + this.arg + '<br>' + 'modifiers - ' + JSON.stringify(this.modifiers) + '<br>' + 'value - ' + value + '<br>' + 'vm-msg' + this.vm.msg
}
})
var demo = new Vue ({
el:'#example',
data: {
msg: 'hello'
},
methods: {
up: function() {
console.info("click");
}
}
})
</script>
