《Vue学习从入门到精通(一)》我们开启了Vue的学习之路，今天我们就来一块学习一下Vue.js中的内部指令。
###v-if
v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。书中源码如下：

<template>
<div id="example">
	<p v-if="greeting">Hello</p>
</div>
</template>
<script>
export default {
name:'HelloWorld',
data(){
	return {
   greeting:true
  }
}
}
</script>

我们改变greeting这个字段的值为false,可以看到hello隐藏了起来。

v-show

v-show 指令是根据表达式的值来显示或者隐藏HTML元素。当v-show 赋值为false时，元素将被隐藏。书中代码如下：

<template>
<div id="example">
	<input type="text" v-model="message" placeholder="edit me"/>
	<p v-show="greeting">Hello!</p>
</div>
</template>


<script>
	export default{
		name:'HelloWorld',
		data(){
			return {
				message:'',
				greeting:false
			}
		}
	}
</script>

注：v-if 有更高的切换消耗，而v-show 有更高的初始渲染消耗，因此，如果需要频繁地切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。
###v-model
v-model指令用来在input, select, text, checkbox,radio等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。代码如下：

<template>
	<div id="example">
		<form>
		姓名：
		<input type="text" v-model="data.name" placeholder=""/>
		<br/>
		性别：
		<input type="radio" id="man" value="One" v-model="data.sex"/>
		<label for="man">男</label>
		<input type="radio" id="male" value="Two" v-model="data.sex"/>
		<label for="male">女</label>
		<br/>
		兴趣：
		<input type="checkbox" id="book" value="book" v-model="data.interest">
		<label for="book">阅读</label>
		<input type="checkbox" id="swim" value="swim" v-model="data.interest">
		<label for="swim">游泳</label>
		<input type="checkbox" id="game" value="game" v-model="data.interest">
		<label for="game">游戏</label>
		<input type="checkbox" id="song" value="song" v-model="data.interest">
		<label for="song">唱歌</label>
		<br/>
		身份：
		<select v-model="data.identity">
			<option value="teacher" selected>教师</option>
			<option value="doctor">医生</option>
			<option value="lawyer">律师</option>
		</select>
	    </form>
	</div>	
</template>

<script>
	export default{
		name:'HelloWorld',
		data(){
			return{
				data:{
					name:"",
			sex:"",
			interest:[],
			identity:''
				}
			}
		}
	}
</script>

###number
如果想将用户的输入自动转换为Number类型（如果原值的转换结果为NaN,则返回原值），则可以添加一个number特性。示例代码如下：

<input type ="number" v-model.number= "msg" />

注：书中没有源码

lazy

在默认情况下，v-model在input事件中同步输入框的值与数据，我们可以添加一个lazy特性，从而将数据改到change事件中发生。代码如下：

<template>
<div id="example">
<input type = "text" v-model.lazy ="msg"  />
<br/>
{{msg}}
</div>
</template>


<script>
	export default {
		name:'HelloWorld',
		data(){
			return {
				msg:'内容是在change事件后后才改变的～'	
				
			}
		}
	}
	
</script>

###debounce
本来是用来设置延时的，但是现在已经被废弃掉了，具体可以参考这个网址：
https://vuejs.org/v2/guide/migration.html#debounce-Param-Attribute-for-v-model-removed
###v-for
v-for指令基于元数据重复渲染元素。具体实例代码如下：

<template>
	<div>
		<ul>
			<li v-for="(item, index) in items">
			{{index}} - {{parentMessage}} {{item.msg}}
			</li>
		</ul>
	</div>
</template>
<script>
	export default{
		name:'HelloWorld',
		data(){

			return {
				parentMessage:'滴滴',
				items: [
					{msg:'顺风车'},
					{msg:'专车'}
				]
			}
		}
	}
</script>

注：书中3.1.5中关于v-for的代码已经失效，可以使用我贴出来的代码哦

v-for还可以解析字典哦，具体代码如下：

<template>
	<div>
		<ul>
			<li v-for="item in items" >
				<span v-for="(value, key) in item">{{key}} : {{value}} </span>
			 </li>
		</ul>
	</div>
</template>
<script>


	export default{
		name:'HelloWorld',
		data(){

			return {
				items: [
					 {name:"张三",age:10},
					 {name:"李四",age:15}
				]
			}
		}
	}
</script>

运行结果如下：

v-for还可以在一段范围内取值，代码如下：

<template>
	<dir>
		<span v-for="n in 10">{{n}}</span>
	</dir>
</template>

运行结果如下：


注：当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
更多优质文章，可以微信扫码关注：