二、Vue指令
一、文本指令
1. v-text
不能解析html语法的文本，会原样实处。
2. v-html
不能解析html语法的文本。
3. v-once
处理的标签的内容只能被解析一次。
<p v-on:click="pClick" v-once>{{ msg }}</p>
二、事件指令
1. 语法
v-on:事件名=‘方法变量’
@事件名=‘方法变量’
2. 同一标签绑定多个事件
鼠标事件示例
<body>
<div id="app">
<p @mouseover="f1" @mouseout="f2">{{ action }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
action: '鼠标事件'
},
methods:{
f1 () {
this.action = '悬浮';
console.log('aaaaaaaa')
},
f2 () {
this.action = '离开'
},
}
})
</script>
3. 给绑定事件传参
a. 不加括号默认传事件对象：$event
b. 加括号表示自己传参，系统不自动传事件对象，可以手动传入事件。
<p @click="f1($event, 'a')">{{ action }}</p>
三、属性指令
1. 语法
v-bind:属性名=‘变量’
：属性名=‘变量’
2. class属性绑定方法
a. 变量的值就是类名
<p :class="c1"></p>
b. 多类名可以用[ ],采用多个变量来控制
<p :class="[c1, c2]"></p>
c. 选择器可设置为常量
<p :class="['d1', c3]"></p>
d. {类名：布尔值}控制某类名是否起作用
<p :class="['d1', {d2: is_true}]"></p
3. 调整class属性示例
><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: orange;
}
.d2 {
border-radius: 50%;
}
.d3 {
border-radius: 20%;
}
</style>
</head>
<body>
<div id="app">
<p :class="c1"></p>
<p :class="[c1, c2]"></p>
<p :class="['d1', c3]"></p>
<p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
c1: 'd1',
c2: 'd2',
c3: 'd3',
is_true: 0,
}
})
</script>
4. style属性绑定方式1
<body>
<div id="app">
<p :style="myStyle">样式属性</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
myStyle: {
width: '100px',
height: '100px',
backgroundColor: 'red'
}
}
})
</script>
5. style属性绑定方式2
<body>
<div id="app">
<p :style="{width: w, height: h, backgroundColor: bgc}">样式属性</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
w: '100px',
h: '100px',
bgc: 'red'
}
})
</script>
四、表单指令
1. 语法
v-model=‘变量’
2. 特点
a. v-model可实现数据的双向绑定，v-model绑定的变量值可以影响表单标签的值，
反过来单标签的值也可以影响变量的值。
b. 在选择框中，v-model能确定选择的初始值。
3. v-model关联input框
<body>
<div id="app">
<input type="text" :value="v1" v-model="v1">
<input type="text" :value="v1">
{{ v1 }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '123'
}
})
</script>
4. 在单选框中的应用（value）
<body>
<div id="app">
<form action="">
男：<input type="radio" name="sex" value="male" v-model="v1">
女：<input type="radio" name="sex" value="female" v-model="v1">
{{ v1 }}
<hr>
<input type="submit" >
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: 'male',
}
})
</script>
5. 在单一复选框中的应用（布尔值）
<body>
<div id="app">
<form action="">
卖身契：同意 <input type="checkbox" name="agree" v-model="v1">
<hr>
<button type="submit">提交</button>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: true,
}
})
</script>
6. 在多复选框中的应用（数组）
<body>
<div id="app">
<form action="">
性别：<br>
男：<input type="checkbox" name="gender" value="male" v-model="v1">
女：<input type="checkbox" name="gender" value="female" v-model="v1">
其他：<input type="checkbox" name="gender" value="other" v-model="v1">
{{ v1 }}
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: ['male'],
}
})
</script>
五、条件指令
1. 语法
a. v-show=‘布尔变量’
b. v-if=‘布尔变量’
2. 特点
a. 用v-show隐藏时，采用display：none进行渲染。
b. 用v-if隐藏时，不在页面中渲染。
3. 修改v-if参数调整显示的内容
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-vloak] {display: none;}
.box {
width: 200px;
height: 200px;
}
.r{background-color: red}
.b{background-color: blue}
.g{background-color: green}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="wrap">
<div class="box r" v-if="0"></div>
<div class="box b" v-else-if="0"></div>
<div class="box g" v-else></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
is_show: true,
}
})
</script>
4. 用button按钮选择颜色
<head>
<meta charset="UTF-8">
<title></title>
<style>
[v-cloak] { display: none; }
.box {
width: 200px;
height: 200px;
}
.r {background-color: red}
.b {background-color: blue}
.g {background-color: green}
.active {
background-color: deeppink;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="wrap">
<div>
<button @click="page='r_page'" :class="{active: page === 'r_page'}">红</button>
<button @click="page='b_page'" :class="{active: page === 'b_page'}">蓝</button>
<button @click="page='g_page'" :class="{active: page === 'g_page'}">绿</button>
</div>
<div class="box r" v-if="page === 'r_page'"></div>
<div class="box b" v-else-if="page === 'b_page'"></div>
<div class="box g" v-else></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
page: 'r_page'
}
})
</script>
六、循环指令
1. 语法
v-for='ele in string|array|obj'
2. 遍历字符串、数组及对象
<body>
<div id="app">
<i v-for="(c, i) in info">{{ i }}: {{ c }}<br> </i>
<hr>
<div v-for="e in stus">{{ e }}</div>
<hr>
<div v-for="v in people">{{ v }}</div>
<hr>
<div v-for="(v, k, i) in people">{{ i }}-{{ k }}: {{ v }}</div>
<hr>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: 'good good study',
stus: ['aaa', 'bbb', 'ccc'],
people: {
name: 'byx',
age: 18,
gender: 'male'
}
}
})
</script>
3. for循环嵌套
<body>
<div id="app">
<div v-for="stu in student">
<span v-for="(v, k, i) in stu"><span v-if="i !== 0"> | </span>{{ k }}:{{ v }}</span>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
student: [
{
name: 'a',
age: 16,
gender: 'female'
},
{
name: 'b',
age: 17,
gender: 'female'
},
{
name: 'c',
age: 18,
gender: 'male'
}
]
}
})
</script>
