8.Vue常用指令
1.v-if、 v-else、v-show
v-if用来判断是否加载html的DOM
v-else和v-if对应
v-show和v-if的功能类似，但是v-show：调整css dispaly属性，可以使客户端操作更加流畅
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
</head>
<body>
<h1>Hello Vue</h1>
<div id="app">
<div v-if="isLogin">已登陆</div>
<div v-else>未登录</div>
<div v-show="isLogin">v-show指令dom已经加载，主要控制css的display属性</div>
</div>
</body>
</html>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
isLogin: true
}
});
</script>
2.v-for
v-for指令是循环渲染一组data中的数组，v-for 指令需要以 value in items 形式的特殊语法，通常还可以这样书写(value, index) in items，index代表数组中的索引，从0开始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-for</title>
</head>
<body>
<h1>Hello Vue</h1>
<div id="app">
<ul>
<li v-for="value in items">{{ value }}</li>
</ul>
</div>
</body>
</html>
//引入vue.js
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
items: [20, 23, 18, 65, 7, 19, 54, 56, 41],
}
});
</script>
3.v-on
v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
</head>
<body>
<div id="app">
本场比赛得分: {{ score }}
<button v-on:click="addScore">加分</button>
<button @click="subScore">减分</button>
<input type="text" v-on:keyup.enter="enterNumber" v-model="inputScore">
</div>
</body>
</html>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
score: 0,
inputScore: 1
},
methods: {
addScore: function() {
this.score++;
},
subScore: function() {
if(this.score > 0) {
this.score--;
}
},
enterNumber: function() {
this.score += parseInt(this.inputScore)
}
}
});
</script>
4.v-model
v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model只是v-bind的语法糖<input v-model="sth" />等价于<input v-bind:value="sth" v-on:input="sth = $event.target.value" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
</head>
<body>
<h1>Hello Vue</h1>
<div id="app">
<p>{{ message }}</p>
<p><input type="text" v-model="message"></p>
<p><input type="text" v-bind:value="message" v-on:input="message = $event.target.value"></p>
<p><input type="text" v-model.lazy="message"></p>
<p><input type="text" v-model.lazy.trim="message"></p>
</div>
</body>
</html>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: '你好'
}
});
</script>
5.v-bind
v-bind绑定标签属性，v-on绑定事件的，可以缩写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
</head>
<body>
<h1>Hello Vue</h1>
<div id="app">
<a v-bind:href="url" target="_blank">百度</a>
</div>
</body>
</html>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
url: 'http://www.baidu.com'
}
});
</script>
6.v-text、v-html
{{xxx}},这种情况是有弊端的，当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的
如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-text介绍</title>
</head>
<body>
<div id="app">
<span v-text="message"></span>
<span v-html="content"></span>
</div>
</body>
</html>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'I * You',
content: '<h2>我爱你</h2>'
}
});
</script>
