Vue.js提供了一些常用的内置指令，接下来我们将介绍以下几个内置指令：
v-if指令
v-bind指令
v-for指令
v-on指令
v-model指令
1.v-if
根据表达式的真假值来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 ，将提取它的内容作为条件块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
</head>
<body>
<script src=></script>
<div id="app">
<h1 v-if="ok">OK</h1>
<h1 v-else>No</h1>
<h1 v-if="age>=15">Age:{{age}}</h1>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
ok:true,
age:20
}
});
</script>
</body>
</html>
运行结果如下所示:
由于数据data中的ok属性为true，所以"OK"会被输出；
由于age属性大于等于15，所以Age：age便会输出！
2.v-bind
动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层 ${} 模板-->
<!--绑定元素-->
<div id="app">
<span v-bind:title="message">
鼠标悬浮几秒钟查看动态绑定的信息
</span>
</div>
<!--导入Vue.js-->
<script src></script>
<script>
<!-- new Vue对象-->
var vm=new Vue({
el:"#app",
//Model:数据
data:{
message:"hello vue!"
}
});
</script>
</body>
</html>
运行结果如下：
通过v-bind将数据隐藏，只有将鼠标悬浮在特定位置才能显示出来。
3.v-for
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：
用法类似于Jsp中的foreach遍历循环。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src></script>
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
items:[
{message:"Java"},
{message: "Vue"},
{message: "Python"}
]
}
});
</script>
</body>
</html>
items是一个数组，item是当前被遍历的数组元素。
4.v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src></script>
<div id="app">
<button v-on:click="sayHi">click me</button>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"你点击了我"
},
methods:{//方法必须定义在vue的Methods对象中,v-on:事件
sayHi:function (){
alert(this.message);
}
}
});
</script>
</body>
</html>
Vue中通过v-on绑定了sayHi点击事件，定义sayHi事件只能在methods中，另外也可以用@click来简化v-on的书写。
点击按钮后的运行结果如下：
5.v-model
在表单控件或者组件上创建双向绑定.
数据双向绑定，即当数据发生改变时，视图发生改变，当视图发生改变时，数据也会同步改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src=></script>
<div id="app">
性别：
<input type="radio" name="sex" value="男" v-model="message">男
<input type="radio" name="sex" value="女" v-model="message">女
<p>选中了:{{message}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:""
}
});
</script>
</body>
</html>
运行结果如下：
通过v-model实现了，上面选中的数据将会在下面显示出来。
