Home Vue 学习
Post
Cancel

Vue 学习

Vue 指令

Vue 会根据不同的指令,针对标签实现不同的功能,指令为带有 v- 前缀的特殊标签属性

v-html

用于设置元素的 innerHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
	<head>
		<meta charset="utf-8">
		<title>v-html</title>
	</head>
	<body>
		<div id="app">
			<div v-html="link"></div>
		</div>
		
		<script src="js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					link:'<a href="https://yexca.net/">yexca</a>'
				}
			})
		</script>
	</body>
</html>

v-show 与 v-if

\ v-show v-if
作用 控制元素显示隐藏 控制元素显示隐藏 (条件渲染)
语法 v-show=”表达式” v-if=”表达式”
表达式值 ture 显示,false 隐藏 ture 显示,false 隐藏
隐藏说明 通过控制属性 style="display:none;" 直接删除或创建元素
场景 频繁切换 不频繁切换

v-else 与 v-else-if

用于辅助 v-if 进行渲染,需要紧挨着 v-if 一起使用

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
<html>
	<head>
		<meta charset="utf-8">
		<title>v-else and v-else-if</title>
	</head>
	<body>
		<div id="app">
			<p v-if="gender === 1">性别:男</p>
			<p v-else>性别:女</p>
			<hr />
			<p v-if="score >= 90">成绩判定 A</p>
			<p v-else-if="score >= 70">成绩判定 B</p>
			<p v-else-if="score >= 60">成绩判定 C</p>
			<p v-else>成绩判定 D</p>
		</div>
		
		<script src="js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					gender: 1,
					score: 89
				}
			})
		</script>
	</body>
</html>

v-on

用于注册事件 = 添加监听 + 提供处理逻辑

语法一

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
24
25
26
27
28
29
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on 1</title>
	</head>
	<body>
		<div id="app">
			<button v-on:click="count1--">-</button>
			<span> </span>
			<!-- v-on: 可以替换为 @ -->
			<button @click="count1++">+</button>
			<hr />
			<button v-on:mouseenter="count2--">-</button>
			<span></span>
			<button v-on:mouseenter="count2++">+</button>
		</div>
		
		<script src="js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					count1: 1,
					count2: 2
				}
			})
		</script>
	</body>
</html>

语法二

v-on:事件名=”methods中的函数名”

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
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on 2</title>
	</head>
	<body>
		<div id="app">
			<button @click="fun">切换显示隐藏</button>
			<p v-show="isShow">hello yexca</p>
		</div>
		
		<script src="js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					isShow: true
				},
				methods: {
					fun(){
						// this 始终指向当前实例
						this.isShow = !this.isShow
					}
				}
			})
		</script>
	</body>
</html>

调用传参

直接上案例

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
32
33
34
35
36
37
38
39
40
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on 3</title>
		<style>
			.box{
				border-style: solid;
				border-color: aqua;
				padding: 10px;
				margin: 10px;
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="box">
				<h3>自动售货机</h3>
				<button @click="fun(5)">可乐5元</button>
				<button @click="fun(10)">咖啡10元</button>
			</div>
			<div style="padding-left: 20px;">余额:</div>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					balance: 900
				},
				methods: {
					fun(a){
						this.balance -= a
					}
				}
			})
		</script>
	</body>
</html>

v-bind

用于动态的设置 html 的标签属性,如 src、url、title 等

语法: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
26
27
28
29
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind</title>
		<style>
			img{
				width: 400px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- v-bind 可以省略 -->
			<img v-bind:src="imgURL" :title="imgTitle" :alt="imgAlt" />
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					imgURL: '../img/01.jpg',
					imgTitle: 'warma',
					imgAlt: 'warma'
				}
			})
		</script>
	</body>
</html>

v-for

基于数据循环,多次渲染整个元素

语法:v-for=”(item, index) in 数组”

item:每一项,index:下标

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
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for</title>
	</head>
	<body>
		<div id="app">
			<h3>fruit shop</h3>
			<ul>
				<!-- 当 index 不需要时可以省略 -->
				<li v-for="item in list"></li>
			</ul>
			<ul>
				<li v-for="(item,index) in list"></li>
			</ul>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					list: ['apple', 'banana', 'watermelon']
				}
			})
		</script>
	</body>
</html>

为便于 Vue 进行列表项的正确排序复用,需要给元素添加唯一标识,即 key 属性

key 的值只能是字符串或数字类型,且必须具有唯一性

1
<li v-for="(item, index) in list" :key="item.id"></li>

推荐使用 id 作为 key,不推荐使用 index 作为 key (会变化,不对应)

v-model

给表单元素使用,实现双向数据绑定,以可以快速获取或设置表单元素内容

双向数据绑定即视图变化,数据自动更新

语法:v-model=’变量’

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
32
33
34
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model</title>
	</head>
	<body>
		<div id="app">
			username: <input type="text" v-model="username"/><br /><br />
			password: <input type="password" v-model="password" /><br /><br />
			<button @click="login">登录</button>
			<button @click="reset">重置</button>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					username: '',
					password: ''
				},
				methods: {
					login(){
						console.log(this.username, this.password)
					},
					reset(){
						this.username = ''
						this.password = ''
					}
				}
			})
		</script>
	</body>
</html>

指令修饰符

通过 . 指明一些指令后缀,不同后缀封装了不同的处理操作

按键修饰符

@keyup.enter 键盘回车监听

v-model 修饰符

v-model.trim 去除首尾空格

v-model.number 转数字

事件修饰符

@事件名.stop 阻止冒泡

@事件名.prevent 阻止默认行为

计算属性

基于现有的数据,计算出来的新属性。依赖的数据变化,自动重新计算

Vue 生命周期

生命周期指一个对象从创建到销毁的整个过程

Vue 生命周期有 8 个阶段,每触发一个生命周期事件,会自动执行一个生命周期方法 (钩子)

状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

其中 mounted 较为常用,指 Vue 初始化成功,HTML 渲染成功。(发送请求到服务端,加载数据)

1
2
3
4
5
6
7
8
9
10
11
12
new Vue(){
    el: "#app",
    data: {
        
    },
    mounted(){
        console.log("Vue 挂载完成,发送请求获取数据");
    },
    methods: {
        
    }
}
This post is licensed under CC BY 4.0 by the author.

HTML 学习三 - 网页布局

形式语言与自动机 - 基本概念