适合后端程序员的Vue教程_part2_Vue事件处理和条件渲染

Vue中事件绑定(v-on)

绑定事件基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
<h2>年龄:{{age}}</h2>
<input type="button" value="点我改变年龄" v-on:click="changeage"/>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello唯有义!",
age: 23,
},
methods: { //methods 用来定义Vue中的事件
changeage: function () {
alert('长大一岁');
this.age++;
}
}
});
</script>
1
2
3
4
5
6
7
8
9
总结:
事件三要素:
1. 事件源:发生事件dom元素
2. 事件:发生特定的动作 click....
3. 监听器 发生特定动作之后的事件处理程序 通常是js中函数
- 在Vue中绑定事件是通过v-on指令来完成的,写法是v-on:事件名 如 v-on:click
- 在v-on:事件名的赋值语句中是当前时间触发调用的函数名
- 在Vue中事件的函数统一定义在Vue实例的methods属性中
- 在Vue定义的事件中this指的就是当前的Vue实例,可以在事件中通过使用this获取Vue实例中的相关数据

Vue中事件的简化语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
<h2>{{age}}</h2>
<input type="button" value="通过v-on事件修改年龄每次+1" v-on:click="changeage"/>
<input type="button" value="通过@绑定事件修改年龄每次-1" @click="editage"/>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app", //element:用来指定vue作用范围
data: { //data:用来定义vue实例中相关数据
age:23,
},
methods:{ //methods:用来定义事件的处理函数
changeage:function () {
this.age++;
},
editage:function () {
this.age--;
}
}
});
</script>
1
2
总结
- 在Vue中绑定事件可以通过@符号形式简化 v-on 的事件绑定

Vue事件函数两种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="app">
<span>{{count}}</span>
<input type="button" value="改变count的值" @click="changecount">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
count:1,
},
methods:{
// 写法1
/*changecount:function () {
this.count++;
}*/
// 写法2(推荐)
changecount(){
this.count++;
}
}
});
</script>
1
2
总结:
- 在Vue中事件定义存在两种写法,一种是函数名:function(){},一种是函数名(){}。推荐后者

Vue事件的参数传递

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
<span>{{count}}</span>
<input type="button" value="改变count为指定的值" @click="changecount(23,'小明')">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
count:1,
},
methods:{
changecount(c,name){
this.count = c;
alert(name);
}
}
});
</script>
1
2
总结:
- 在使用事件时,可以直接在事件调用处给事件进行参数传递,在事件定义处通过定义对应变量接收传递的参数

v-show v-if v-bind

v-show

v-show:用来控制页面中某个标签元素是否展示,底层控制标签的display属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="app">
<!--
v-show:用来控制标签展示或隐藏
-->
<h2 v-show="false">唯有义针棒!</h2>
<h2 v-show="show">唯有义针棒!这是vue中定义变量true</h2>
<input type="button" value="展示/隐藏标签" @click="showmsg">
<h1 v-show="age>=30">唯有义</h1>
<input type="button" @click="changeAge" value="通过修改age值控制标签展示">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
show:false,
age:23,
},
methods:{
// 定义事件
showmsg(){
this.show = !this.show;
},
changeAge(){
this.age++;
console.log(this.age);
}
}
});
</script>
1
2
3
总结:
- 在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏
- 在v-show中可以通过boolean表达式控制标签的展示和隐藏

v-if

v-if:用来控制页面元素是否展示,底层是控制dom元素,操作dom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
<h2 v-if="false">唯有义</h2>
<h2 v-if="show">唯有义真棒</h2>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
show:false
},
methods:{
}
});
</script>

v-bind

v-bind:用来给标签绑定相应属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
<img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601921815014&di=e9503fe4157d72b7505284a4a8d32fe4&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181209%2Fcd9eb28e2f374610a2c01391a0e24eb7.jpeg">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
msg:"vue官方logo!!!",
showCss:true,
},
methods:{
}
});
</script>

v-bind简化写法

对属性绑定写法如v-bind:属性名简化后:属性名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="app">
<img width="300" height="300" :title="msg" :class="{aa:showCss}" :src="src" alt="">
<input type="button" value="动态控制加入样式" @click="addCss">
<input type="button" value="改变图片" @click="changeSrc">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
msg:"vue官方logo!!!",
showCss:true,
src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601921815014&di=e9503fe4157d72b7505284a4a8d32fe4&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181209%2Fcd9eb28e2f374610a2c01391a0e24eb7.jpeg"
},
methods:{
addCss(){
this.showCss = !this.showCss;
},
changeSrc(){
this.src = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3852259233,79695454&fm=26&gp=0.jpg";
}
}
});
</script>
0%