携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情
“v-”在vue.js中称为vue指令，更明确一点，它们是vue中html标签的指令，因为它们都是应用在template中的html标签上。本文以vue.js2.x版本为例，将以四篇文章详细介绍vue指令用途和使用方法。
Vue指令使用指北（一）数据绑定指令 v-bind v-model
Vue指令使用指北（二）内容显示指令 v-text v-html v-pre v-clock
Vue指令使用指北（三）显示判断指令 v-show v-if-else
Vue指令使用指北（四）循环列表指令 v-for
1 v-bind 单向数据绑定
v-bind叫做单向数据绑定，它应用在html标签，使data里定义的变量单向绑定到html标签的某个属性值上。所谓单向，即data中的变量值影响标签属性值，反过来修改标签属性值不会修改data中的变量值，这和下一个要讲的v-model双向绑定有所区别。其语法是：
<span v-bind:title="showText"> 鼠标放在这里，看看显示什么 </span>
同时，在data中定义变量showText:Hello Vue:
data: {
showText: 'Hello 掘金'
}
那么，我们把鼠标放到span标签上的时候，就会浮现出来Hello 掘金的title。或者我们动态绑定一个标签的类名 v-bind:class="title"：
<div id="ex1" v-bind:class="title">
Hello 掘金
</div>
然后，定义title变量值是“my-title”：
data: {
showText: 'Hello 掘金',
title: 'my-title'
}
最后，在style标签内，声明my-title类：
my-title {
color:red
}
那么，html就会渲染成：
<div id="ex1" class="my-title">
Hello 掘金
</div>
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#ex1 {
width: 200px;
height: 200px;
background-color: aqua;
}
.change {
background-color: blue !important;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind 可以动态修改HTML标签的属性 -->
<span v-bind:title="showText"> 鼠标放在这里，看看显示什么 </span>
<div id="ex1" v-bind:class="title">
Hello 掘金
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
showText: 'Hello 掘金',
title: 'my-title'
}
});
</script>
<style>
my-title {
color:red
}
</style>
</body>
</html>
在vue里，v-bind有一个语法糖（简写），一个冒号“:”:
<span v-bind:title="showText"> 鼠标放在这里，看看显示什么 </span>
<!-- 语法糖写法 -->
<span :title="showText"> 鼠标放在这里，看看显示什么 </span>
2 v-model 双向数据绑定
与v-bind不同的是，v-model 是应用在表单元素中的。所谓双向绑定指的是V和M层数据相互影响，通俗一句话你变我也变，我变你也变。狭义理解就是使用v-model 会把表单元素input、select、radio、textarea的值和data里定义变量值进行绑定。以input标签为例：
<!-- html渲染的内容 view -->
<input type="text" v-model="inputValue"/>
在data中定义inputValue的值：
data: { // model 数据
inputValue: ''
}
双向绑定的原理：
- view->model：当我们在页面中的这个input里填上“
掘金”两个字的时候，此时我们在打印台，打印inputValue的值，就是“掘金”两个字。 - model->view：当我们在js脚本里，动态修改
inputValue=“Hello 掘金”时，我们也会惊奇的发现页面上的input自动被“Hello 掘金”填充。
v-model原理，是一个前端面试高频题，实际上它是一个语法糖，做了两件事：
1、绑定数据inputValue
2、触发输入事件input
也就是说，v-model等同于下面这句代码：
<input type="text" v-bind:value="inputValue" @input="inputValue=$event.target.value">
v-model通过触发input事件绑定input text元素，它还会根据不同的表单元素，调用不同的事件：
text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
下面展示各个元素的绑定语法：
textarea 用来输入大段文字，它的用法和input一致：
<div id="app">
<h1>应聘登记表</h1>
<h2>介绍一下自己：</h2>
<textarea v-model="intro"></textarea>
</div>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
el:"#app",
data:{
intro:''
}
})
</script>
radio表示单选，具有互斥性，v-model为某一个单选选项的value值。
<div id="app">
<h1>应聘登记表</h1>
<label for="front">
<input type="radio" value="前端" v-model="job">男
</label>
<label for="back">
<input type="radio" value="后端" v-model="job">女
</label>
<h2>您应聘的岗位是：{{job}}</h2>
</div>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
el:"#app",
data:{
job:'前端' //双向绑定，默认会勾选前端，给予checked属性
}
})
</script>
checkbox有单个使用的情况，即单选，这时v-model是布尔值；多选的情况，v-model是一个数组，例如：
<div id="app">
<h1>应聘登记表</h1>
<!--单选框-->
<label for="fresh">
<input type="checkbox" id="fresh" v-model="isFresh">是否应届毕业生
</label>
<h2>您选择的是：{{isFresh}}</h2>
<hr>
<h2>您擅长的前端框架有：{{skills}}</h2>
<label for="">
<input type="checkbox" value="React" v-model="skills">React
<input type="checkbox" value="Vue" v-model="skills">Vue
<input type="checkbox" value="Angular" v-model="skills">Angular
</label>
</div>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
el:"#app",
data:{
isFresh:false,//单选框
skills:[] //多选框
}
})
</script>
同checkbox，select标签也拥有单选和多选两种情况，单选时，v-model的值是一个选项的value，多选时，绑定的是一个数组：
<div id="app">
<h1>应聘登记表</h1>
<!--单选-->
<h2>您的工作经验是：{{workYear}}</h2>
<select v-model="workYear">
<option value="应届">应届</option>
<option value="1-3年">1-3年</option>
<option value="3-5年">3-5年</option>
<option value="5-8年">5-8年</option>
<option value="老油条子">老油条子</option>
</select>
<hr>
<!--多选-->
<h2>您前端技能有：{{skills}}</h2>
<!--使用 multiple 开启多选-->
<select v-model="skills" multiple>
<option value="React">React</option>
<option value="Vue">Vue</option>
<option value="Angular">Angular</option>
</select>
</div>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8">
<script>
const app = new Vue({
el:"#app",
data:{
workYear:'',
skills:[]
}
})
</script>
v-model还有三个常用的修饰符，
.lazy：
在默认情况下，
v-model在每次input事件触发后将输入框的值与数据进行同步 。你可以添加lazy修饰符，从而转为在change事件之后进行同步。
.number
如果想自动将用户的输入值转为数值类型，可以给
v-model添加number修饰符。
.trim
如果要自动过滤用户输入的首尾空白字符，可以给
v-model添加trim修饰符。
<div id="app">
<!-- 修饰符：lazy-->
<input type="text" v-model.lazy="msg"><br>
<h2>{{msg}}</h2>
<!-- 修饰符：number-->
<input type="number" v-model.number="workYear"><br>
<h2>您的工作年限是：{{workYear}}——{{typeof workYear}}</h2>
<!-- 修饰符：trim-->
<input type="text" v-model.trim="youName">
<h2>您输入的名字是：{{youName}}</h2>
</div>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8">
<script>
const app = new Vue({
el:"#app",
data:{
msg:'',
workYear:'',
youName:''
}
})
</script>
好了，vue的绑定指令v-bind和v-model，我们介绍到这里。下一篇，我们谈谈内容显示指令 v-text v-html v-pre v-clock。
参考：Vue.js官网文档
