指令（Directive）是特殊的带有前缀v-的特性。指令的值限定为绑定表达式，指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上
1、v-if是条件渲染指令，它根据表达式的值在DOM中生成或移除一个元素。如果表达式赋值为false，那么对应的元素就会从DOM移除；否则对应元素的一个克隆将被重新插入DOM中
（1）基本语法：
v-if="expression"
expression是一个返回布尔值的表达式，表达式可以是一个布尔属性，也可以是一个返回布尔值的运算式。
（2）示例：
<html>
<head>
<meta charset="utf-8" />
<title>内部指令</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="demo">
<p v-if="flag">Hello</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#demo",
data:{
flag:false
}
})
console.log(app.$data.flag);
</script>
</html>
通过Vue.js的构造函数实例化出一个根实例 app ，就是面向对象的对象的实例化，直接 new 一个对象。
el:"#demo", 这是在挂载我们实例化对象的元素节点，就是这个demo对象作用域是那一个标签里面的。这里可以是 id、class、tagname。但是主要还是用id，因为它的唯一性。
data:{} 是定义 这个对象的变量和方法，注意所有在和demo有关联的变量、方法都必须在data中声明。
注意： (1)作用域。js5 只有函数作用域，所以 data 中的函数如果想调用变量，就必须通过 this. 调用，或者直接通过对象名调用。
(2)外部调用。app.$data.flag； 在js中直接调用 vue 对象的属性、方法时，需要链式语法，一层层点出来，这里用 $data ，主要还是和js的变量作区别
2、v-show指令：是根据表达式的值来显示或隐藏HTML元素。当v-show赋值为false时，元素将被隐藏。查看DOM时，会发现元素上多了一个内联样式style="display:none"
<div id="app">
<div v-if="isMale">男士v-if</div>
<div v-show="isMale">男士v-show</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isMale:true
}
})
</script>
3、v-else指令：就是javaScript中的else的意思，必须与v-if或者v-show同时使用，v-if条件不成立则会显示v-else内容
<div id="app">
<div v-if="isMale">男士</div>
<div v-else>女士</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isMale:true
}
})
</script>
4、v-model指令：用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。 它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步。
（1）绑定单行文本框
<div id="app">
<input type="text" v-model="myText" placeholder="请输入" />
<p>{{myText}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
myText:""
}
})
</script>
（2）绑定单行文本框
<div id="app">
<input type="radio" id="one" name="aa" value="男" v-model="picked">
<label for="one">男</label>
<br>
<input type="radio" id="two" name="aa" value="女" v-model="picked">
<label for="two">女</label>
<br>
<span>您选择了: {{ picked }}</span>
<br><br>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
picked:""
}
})
</script>
（3）绑定复选按钮
<div>
<input type="checkbox" id="jack" value="好帅！" v-model="checkedNames">
<label for="jack">好帅！</label>
<input type="checkbox" id="john" value="你是我的男神！" v-model="checkedNames">
<label for="john">你是我的男神！</label>
<input type="checkbox" id="mike" value="我爱你，猴哥！" v-model="checkedNames">
<label for="mike">我爱你，猴哥！</label>
</div>
<br>
<span>您对猴哥的评价: {{ checkedNames }}</span><br><br>
<script type="text/javascript">
var app= new Vue({
el:"#app",
data:{
checkedNames:[]
}
})
</script>
（4）绑定单选下拉列表框
<select v-model="selected1">
<option>亲猴哥</option>
<option>向猴哥表白</option>
<option>请猴哥吃饭</option>
</select><br>
<span>真心话大冒险: {{ selected1 }}</span><br><br>
<script type="text/javascript">
var app= new Vue({
el:"#app",
data:{
selected1:""
}
})
</script>
（5）绑定多选下拉列表框
<select v-model="selected2" multiple>
<option>亲亲</option>
<option>抱抱</option>
<option>举高高</option>
</select>
<br>
<span>你想和猴哥偷偷干些啥: {{ selected2 }}</span><br>
<script type="text/javascript">
var app= new Vue({
el:"#app",
data:{
selected2:[]
}
})
</script>
5、v-for指令：基于一个数组渲染一个列表，它和JavaScript的遍历语法相似
v-for="item in list"
list是一个数组，item是当前遍历的数组元素
v-for="(item,index) in list"其中index是当前循环的索引，下标从0开始
示例：
<div id="app">
<table border="1">
<tr class="thead">
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="(item,index) in list">
<td v-text="index+1"></td>
<td v-text="item.name"></td>
<td v-text="item.age"></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
list:[{
name:'杨过',
age:18
},{
name:'小龙女',
age:23
}]
}
})
</script>