指令归纳总结
1、v-if ：可以完全根据表达式的值在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 :根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素将被隐藏，并且元素增加一个内联样式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等表单控件元素上创建双向数据绑定。
<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">医生</option>
<option value="police">警察</option>
</select>
</form>
<script>
new Vue ({
el:'#example',
data: {
data: {
name:"",
sex:"",
interest:[],
job:''
}
}
}
})
</script>
v-model后面可以添加多个参数（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 : 基于源数据重复渲染元素
(1)可以使用$index来呈现相对应的数组索引。v-for需要特殊的别名，形式为“item in items”，（item是数据数组，item是当前数组元素的别名）。
(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支持整数
<div id="range">
<div v-for="n in 10">整数：{{ $index }}</div>
</div>
6、v-text ：可以更新元素的textContent，在内部，{{ Mustache }}插值也被编译为textNode的一个v-text指令。
<span v-text="msg"></span>
<br>
<span>{{ msg }}</span>
7、v-bind：用于响应更新HTML特性，将一个或多个attribute，或者一个组件prop动态绑定到表达式。
（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)没有参数时，可以绑定到一个对象，此时的class和style绑定不支持数组和对象（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 : 用于绑定事件监听器，类型由参数指定。
<!--方法处理器-->
<button v-on:click="doThis"></button>
<!--内联语句-->
<button v-on:click="doThat('hello',$event)"></button>
<!--缩写-->
<button @click="doThis"></button>
后面可以增加修饰符:
- .stop —— 调用event.stopPropagation()。
- .prevent —— 调用event.preventDefault()。
- .capture —— 添加事件侦听器时使用capture模式。
- .self —— 只当事件是从侦听器绑定的元素本身触发时才会出发回调。
9、v-pre : 编译时跳过当前元素和它的子元素。
自定义指令
1、指令实例属性
el:指令绑定的元素。
vm:拥有该指令的上下文ViewModel
expression:指令的表达式，不包括参数和过滤器。
arg:指令的参数。
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>
