指令是带有 v- 前缀的特殊属性，下面对学习中遇到的指令简单总结
1、v-html 指令
指令用于输出 html 代码
双大括号 {{ }} 会将数据解释为纯文本，而非HTML。为输出真正HTML，用v-html指令
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-常见指令简单复习</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-html = "message"></div>
</div>
<script src="../Vue_JavaScript/0201_03.js"></script>
</body>
</html>
JavaScript：
var vm = new Vue({
el:"#app",
data:{
message:"<h1>学习Vue知识</h1>"
},
});
2、v-bind 指令
v-bind指令可用于属性绑定，这里我只列举了绑定class属性：传给 v-bind:class 一个对象active，动态切换 class，由isAactive的布尔值为true或false决定
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue v-bind复习</title>
<script src="vue.js"></script>
</head>
<body>
<style>
.active{
width: 300px;
height: 300px;
background-color: red;
}
</style>
<div id="app">
<div v-bind:class="{ active: isActive }"></div>
</div>
<script src="../Vue_JavaScript/0202_01.js"></script>
</body>
</html>
JavaScript：
var vm = new Vue({
el:"#app",
data:{
isActive:true,
},
});
3、v-if 指令
v-if 指令用于条件性地渲染内容，指令返回 true时被渲染，false不渲染
这里举一个例子，根据表达式 seen 的值true 或 false来决定是否插入 p 元素
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-v-if</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="seen">如果seen的值是true这行标题可被看见</h1>
</div>
<script src="../Vue_JavaScript/0202_02.js"></script>
</body>
</html>
JavaScript：
var vm = new Vue({
el:"#app",
data:{
seen: true,
},
});
4、v-model 指令
此指令可实现在表单控件或者在组件上创建双向数据绑定，修改model后界面view会自动更新
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-v-if</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<input type="text" v-model="message">
</div>
<script src="../Vue_JavaScript/0202_02.js"></script>
</body>
</html>
JavaScript：
var vm = new Vue({
el:"#app",
data:{
message:"标题和输入框内容实时同步",
},
});
5、v-on 指令
v-on 指令绑定事件后，会监听相应的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-v-if</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<button v-on:click = "onClick">点击</button>
</div>
<script src="../Vue_JavaScript/0202_02.js"></script>
</body>
</html>
var vm = new Vue({
el:"#app",
data:{
message:"点下按钮",
},
methods:{
onClick:function () {
this.message = "点了按钮标题会改变";
}
}
});
6、v-for指令
根据遍历数组来进行渲染，需要以 site in sites 形式的特殊语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-v-for</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-for="site in sites">
<p>{{site.title}}</p>
</h1>
</div>
<script src="../Vue_JavaScript/0202_03.js"></script>
</body>
</html>
var vm = new Vue({
el:"#app",
data:{
sites:[
{title:"v-for"},
{title:"v-if"},
{title:"v-bind"},
]
}
})
