知识总结 Vue1. Vue实例化2 文本渲染（v-text ，{{msg}} ，v-html ）3 属性渲染4 条件渲染4 列表渲染指令5 点击事件6内联事件

87 阅读 0 评论 58 点赞

我是靠谱客的博主迷你早晨，这篇文章主要介绍知识总结 Vue1. Vue实例化2 文本渲染（v-text ，{{msg}} ，v-html ）3 属性渲染4 条件渲染4 列表渲染指令5 点击事件6内联事件，现在分享给大家，希望可以做个参考。

1. Vue实例化

1.创建一个app （application应用）

2 定义数据data

3 把app实例挂在到#app节点

复制代码

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue/js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg"/>
			<p>{{msg}}</p>
		</div>
		<script type="text/javascript">
            // 创建一个app (Application应用)
			const app = Vue.createApp({
                // 定义数据data
				data(){
					return{msg:"你好vue"}
				}
               // 把app实例挂载到#app节点
			}).mount("#app")
		</script>
	</body>
</html>

2 文本渲染（v-text ，{{msg}} ，v-html ）

1.v-text

2 {{msg}}只能写一行表达式
不能写复杂js如果if

3 v-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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue/js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 我们把app内的内容p 称为模板内容
		v-开头的属性成为 模板的指令
		通过指令把html模板和js联系到一起 从而对模板进行修改和控制-->
		<div id="app">
			<p v-text="msg"></p>
		</div>
		<script type="text/javascript">
		// 创建一个app (Application应用)
			const app = Vue.createApp({
				// 定义数据data
				data(){
					// 返回msg值
					return{msg:"你好vue"}
				}
			})
			// 把app实例挂载到#app节点
			var vm = app.mount("#app")
		</script>
	</body>
</html>

3 属性渲染

v-bind:属性名=“值”

简写 :属性名=“值”

案例渲染p标签的title属性和button的disabled属性

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
			 <p v-bind:title="msg">我是个小p</p>
			 <p :title="msg">我是个小p</p>
			 <button :disabled="!canUse">按钮</button>
		</div>
		
		<script>
		Vue.createApp({
			data(){
				return {
					msg:"我学vue，我骄傲！",
					canUse:false,
				}
			}
		}).mount("#app")
	 
		</script>

4 条件渲染

1 v-if v-show 都是条件渲染通过改变retun的值来渲染p标签的条件

2 区别和利弊

v-show是通过css方法隐藏节点

v-if是直接移除节点隐藏

如果频繁切换显示与隐藏的话就用 v-show

偶尔切换显示隐藏的话用 v-if

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
			<p v-if="can">我会显示的</p>
			<p v-show="can">我也会显示show</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return {can:true}
				}
			}).mount("#app")
			
			// v-show是通过css方法隐藏节点
			// v-if是直接移除节点隐藏
			// 如果频繁切换显示与隐藏的话就用 v-show
			// 偶尔切换显示隐藏的话用 v-if
		</script>

3 多重条件渲染案例改变score的值对score进行输出

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	<div id="app">
			<p v-if="score>=90">优秀</p>
			<p v-else-if="score>=80">良好</p>
			<p v-else-if="score>=70">中等</p>
			<p v-else-if="score>=60">及格</p>
			<p v-else>菜鸟</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return {score:75}
				}
			}).mount("#app")
		</script>

4 列表渲染指令

1 v-for 指令

item变量的当前数据

index 当前的下表

key是给vue遍历的节点一个唯一的标识符，更好的让vue去做排序过滤等操作，为了性能的优化，要求在一个for指令里面key的值要唯一

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
			<ul>
				<!-- item 当前数据   index当前的下标 -->
				<li v-for="(item,index) in list" :key="item">{{item}}-{{index+1}}</li>
			</ul>
			<!-- key属性为了让Vue内部给遍历的节点设置一个唯一的标识,以便更好的去执行
			(排序 过滤 等操作) 为了性能优化:key的唯一性 -->
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return {list:["Vur","react","angular"]}
				}
			}).mount("#app")
		</script>

输出结果

2 对象的遍历

遍历对象
v-for="(value,key) in obj"

复制代码

1
2
3
4
5
6
7
8
9
10
<div id="app">
			<div v-for="(value,key) in obj" :key="key">{{key}}:{{value}}</div>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return {obj:{title:"Vue入门",name:"小凤",pate:"2022-2-24"}}
				}
			}).mount("#app")
		</script>

3 for if 的使用

打印十以内的所有偶数 for + 范围用<template>标签，if + 条件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
			<template v-for="item in 10">
				<p v-if="item%2===0">{{item}}</p>
			</template>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{}
				}	
			}).mount("#app")
		</script>

5 点击事件

1 v-on:click 指令缩写为 @:click

2 methods 存放方法

3 设置事件对象

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
        <div id="app">
			<button v-on:click="num++">{{num}}</button>
			<button @click="say">你好</button>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				// 存放数据
				data(){
					return {num:1}
				},
				// 存放方法
				methods:{
					// e代表事件对象
					say(e){
						console.log(e,e.target);
						alert("别点我"+this.num);
						this.num++;
					}
				}
			}).mount("#app")
		 </script>

6内联事件

在say( )内加上事件后加$event用逗号隔开配置事件对象

复制代码

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">
			<p>
				<button @click="say('中国',$event)">你好</button>
			</p>
			<p>
				<button @click="say(num,$event)">{{num}}</button>
			</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				// 存放数据
				data(){
					return {num:1}
				},
				// 存放方法
				methods:{
					// e代表事件对象
					say(msg,e){
						console.log(e.target);
						alert(msg);
						this.num++;
					}
				}
			}).mount("#app")
		</script>