零基础-Vue基础模板语法_touchend.native.prevent-优快云博客

本文链接：https://blog.youkuaiyun.com/A3357861/article/details/108842334

这篇博客详细介绍了Vue.js的基础知识，包括插值操作、v-once和v-html指令、属性绑定、计算属性、事件监听以及条件判断。文章通过实例演示了如何动态插入文本、如何使用v-bind动态绑定属性、如何创建计算属性以及如何处理用户事件。此外，还讲解了v-pre、v-cloak、v-bind:style和v-on的修饰符的用法，以及v-for指令在遍历数组和对象时的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

最近公司要用Vue.js,所以就在b站上学习了一下,以下是自己学习的笔记心得:还有分享一下老师的视频连接老师链接,点击前往

1. 准备工作

前往Vue官网,下载最新版的Vue.js,<官网下载地址点击前往>为新建项目,将Vue.js引入
在这里插入图片描述

2. 插值操作

如何将data中的文本数据,插入到HTML中通过MUstache语法(也就是双大括号)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>Hello, {{ message }}</h2>
			<h2>{{ firsName }} {{ lastName }}</h2>
			<h2> {{ counter*2 }} </h2>
			
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			
			let app = new Vue({
				el: '#app',
				data: {
					message : 'Mustache语法插入',
					firsName : '第一',
					lastName : '第二',
					counter	: 2 
				}
			})
		</script>
	</body>
	
</html>

在某些情况下我们可能不希望界面随意的改变,这个时候我们就需要一个Vue的指令:
v-once: 这个指令后面不需要跟任何表达式,该指令标识元素和组件只渲染一次,不会随数据的改变而改变

<div id="app">
			<h2 v-once>Hello, {{ message }}</h2>
			
		</div>

当插值改变时,界面没有跟着改变
在这里插入图片描述
在某些情况下,我们的请求本身就是html代码,此时,我们希望解析出HTML展示
v-html : 该指令往往会跟上一个spring类型,会将spring类型解析出来并且进行渲染

	<body>
		<div id="app">
			<h2>Hello, {{ message }}</h2>
			<h2 v-html="link"></h2>
			
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			
			let app = new Vue({
				el: '#app',
				data: {
					message : '插值操作',
					link : '<a href="https://hao.360.com/?src=lm&ls=n0ea513fa99">360搜索</a>'
				}
			})
		</script>
	</body>

v-text 作用和Mustache语法比较相似,都是用于将数据显示到界面上,v-text 通常情况下会接受一个spring类型

<div id="app">
			<h2>Hello, {{ message }}</h2>
			<h2 v-text="message"></h2>
			
		</div>

v-pre 用于跳过这个元素和他子元素的编译过程,用来显示原本的Mustache语法

<div id="app">
			<!--第一个元素的内容会被编译解析出data的内容-->
			<h2>Hello, {{ message }}</h2>
			<!--第二个元素会直接显示-->
			<h2 v-pre> {{message}} </h2>
			
		</div>

我们浏览器可能会显示出未编译的Mustache标签,此时我们不要未编译是显示就会用到v-cloak
v-cloak不需要表达式，在vue实例编译结束的时候，从绑定的HTML元素中移除，通常是和CSS的display：none结合使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
	<body>
		<div id="app">
			<h2> Hello, {{ message }}</h2>
			<h2 v-cloak> Hello, {{ message }}</h2>
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			setTimeout(() => {
				let app = new Vue({
				el: '#app',
				data: {
					message : '插值操作'
				}
			})
			},1000)
			
		</script>
	</body>
	
</html>

3. 绑定属性

前面我们学习的指令主要作用是将值插入到我们的模板内容中,但是除此之外我们还希望可以动态来绑定
比如说动态绑定a元素的href的属性
比如说动态绑定img元素的src属性
这个是我们就可以用v-bind指令
作用：动态绑定属性
缩写：:
v-bind 用于绑定一个或者多个属性值,或者向另一个组件传递props值(组件传值)

通过Vue实例中的data绑定元素的src和href

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>Hello, {{ message }}</h2>
			<a v-bind:href='link'>搜狗搜索</a>
			<img v-bind:src='logURL' alt='错误' />
			
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			
			let app = new Vue({
				el: '#app',
				data: {
					message : '绑定属性',
					logURL: './img/2.png',
					link : 'https://hao.360.com/?src=lm&ls=n0ea513fa99'
				}
			})
		</script>
	</body>
	
</html>

v-bind语法糖在开发时我们通常会使用语法糖的形式

<div id="app">
			<h2>Hello, {{ message }}</h2>
			<a :href='link'>搜狗搜索</a>
			<img :src='logURL' alt='错误' />
			
		</div>

在很多时候,我们希望动态来切换class,而绑定class主要有两种方式:
对象语法 ,calss后面跟的是一个对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.active{
			color: red;
		}
		.line{
			font-size: 50px;
		}
	</style>
	<body>
		<div id="app">
			<!--直接通过{}来绑定一个类-->
			<h2 :class="{'active':'isActive'}">Hello, {{ message }}</h2>
			<!--也可以通过判定出入多个值-->
			<h2 :class="{'active':'isActive','line':'isline'}">Hello, {{ message }}</h2>
		</div>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			
			let app = new Vue({
				el: '#app',
				data: {
					message : '插值操作',
					isActive : true ,
					isline : true 
				}
			})
		</script>
	</body>
	
</html>

数组语法 class后面跟的是一个数组

div id="app">
			<!--出入一个值-->
			<h2 :class="['active']">Hello, {{ message }}</h2>
			<!--出入多个值-->
			<h2 :class="['active','line']">Hello, {{ message }}</h2>
			
		</div>

我们还可以利用v-bind:style来绑定一些CSS样式
style后面跟一个对象类型,独享的key是CSS的属性名称,对象的value视具体赋值,可以来自data的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2 :style="{color: a,fontSize:b+'px'}">Hello, {{ message }}</h2>
			
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			
			let app = new Vue({
				el: '#app',
				data: {
					message : '插值操作',
					b : 50 ,
					a : 'red'
				}
			})
		</script>
	</body>
	
</html>

数组类型,多个值以,分割即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2 :style="[ a , b ]">Hello, {{ message }}</h2>
			
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			
			let app = new Vue({
				el: '#app',
				data: {
					message : '插值操作',
					a: {
                    color: "red"
               },
               		b: {
                    fontSize: "50px"
                }
				}
			})
		</script>
	</body>
	
</html>

4. 计算属性

在通常情况下,我们会复用某个表达式,此时我们可以将此表达式以函数的形式写入计算属性中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>Hello, {{ message }}</h2>
			<h2>{{ firstName }} {{ lastName }}</h2>
			<h2>{{ fullName }}</h2>
			
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			
			let app = new Vue({
				el: '#app',
				data: {
					message : '计算属性',
					firstName : '刘备',
					lastName : '周瑜'
				},
				computed : {
					fullName(){
						return this.firstName + '..' + this.lastName
					}
				}
			})
		</script>
	</body>
	
</html>

计算属性可以进行一些比较复杂的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>Hello, {{ message }}</h2>
			<ul>
				
				<li v-for="item in books">{{item.name}}</li>
			</ul>
			<h2>书籍的总价值: {{ fullName }}</h2>
			
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			
			let app = new Vue({
				el: '#app',
				data: {
					message : '计算属性',
					books : [
					{id : '001' , name : '音乐鉴赏一' , price : 99 , count : 3},
					{id : '002' , name : '音乐鉴赏二' , price : 89 , count : 4},
					{id : '003' , name : '音乐鉴赏三' , price : 79 , count : 9},
					{id : '004' , name : '音乐鉴赏四' , price : 69 , count : 5}
					]			
				},
				computed : {
					fullName(){
						//在这里使用了一个高阶函数 total:为设置的初始值
					 return this.books.reduce(function (total , book){
							return total+book.price*book.count
						},0)
					}
				}
			})
		</script>
	</body>
	
</html>

每个计算属性都包含一个getter和setter,在上面例子中我们采取的getter方法读取
methods和computed的区别在于计算属性会进行缓存,如果多次使用时,计算属性只会调用一次

5. 事件监听

在前端开发中,我们要经常进行交互,这个时候,我们就必须要监听用户发生的时间,比如点击,拖拽,键盘等等
v-on :绑定事件监听器, 缩写为 @

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>Hello, {{ message }}</h2>
			<p>点击的次数: {{ connter }}</p>
			<button @click="btnclict">点击</button>
			
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			
			let app = new Vue({
				el: '#app',
				data: {
					message : '插值操作',
					connter : 0
				},
				methods : {
					btnclict(){
					this.connter++
					}
				}
			})
		</script>
	</body>
	
</html>

方法传参时,如果方法本身不需要额外参数,方法后面的()可以不写,如上,如果方法本身中有一个参数,那么默认会将原生event参数传递进去

btnclict(event){
					console.log(event)
					this.connter++
					}

在这里插入图片描述
如果需要传递某个参数,同时需要传入event时,可以通过$event传入事件

<button @click="btnclict(666,$event)">点击</button>

v-on的修饰符
在某些情况下,我们拿到event的目的可能是进行一些时间处理,Vue提供了修饰符来帮助我们方便处理一些事件
.stop 调用event.stopPropagation() 阻止事件冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>事件冒泡</h2>
		    <div class="outer" @click="outerClick">事件outer
		      <div class="inner" @click="innerClick">事件inner
		        <button @click="btnclict()">事件冒泡</button>
		        <!--阻止事件冒泡-->
			<button @click.stop="doThis">stop修饰点击阻止冒泡事件</button>
		      </div>
		    </div>
		    <!--<p>当点击按钮时，会从里到外依次触发按钮点击事件、inner点击事件、outer点击事件</p>
		    <p>当点击inner div时，会从里到外依次触发inner点击事件、outer点击事件</p>
		    <p>当点击outer div时，只触发outer点击事件</p>
		    <p>这就是事件冒泡</p-->
			
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			
			let app = new Vue({
				el: '#app',
				data: {
					message : '插值操作',
					connter : 0
				},
				methods : {
					btnclict(){
						console.log('触发了冒泡事件')
					},
					innerClick(){
						console.log('触发了inner事件')
					},
					outerClick(){
						console.log('触发了outer事件')
					},
					doThis(){
						console.log('触发了阻止冒泡事件')					
					}
				}
			})
		</script>
	</body>
	
</html>

.prevert 调用event.prevertDefault() 阻止默认行为

<h2>默认事件</h2>
		    <div class="outer" @click="outerClick">事件outer
		      <div class="inner" @click="innerClick">事件inner
		      	<!--事件冒泡-->
				<a @click="btnclict()"  href="javascript: console.log('xxxx')">事件冒泡-a标签</a>
				
				<!--阻止事件冒泡-->
				<!--某些标签拥有自身的默认事件，如a[href="#"]，button[type="submit"] 这种标签在冒泡结束后会开始执行默认事件。
					注意默认事件虽然是冒泡后开始，但不会因为stop阻止事件传递而停止。-->
				<a @click.stop="btnclict()"  href="javascript: console.log('xxxx')">阻止事件冒泡-a标签</a>
				<!--prevent 是拦截默认事件-->
				<a @click.stop.prevent="btnclict()"  href="javascript: console.log('xxxx')">阻止事件冒泡-阻止默认事件-a标签</a>
		      </div>
		    </div>

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调,可以绑定特定的键盘
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

6. 条件判断

v-if , v-else-if , v-else 这三个指令与javaScript的条件语句if , else , else if 类似,Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

<h2 v-if="false">Hello, {{ message }}</h2>

v-if后面的条件为false时，对应的元素以及其子元素不会渲染,也就是根本没有不会有对应的标签出现在DOM中。

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：
v-if当条件为false时，压根不会有对应的元素在DOM中。
v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
当需要在显示与隐藏之间切片很频繁时，使用v-show,当只有一次切换时，通过使用v-if

<h2 v-show="false">Hello, {{ message }}</h2>

在这里插入图片描述

7. 循环遍历

当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。
v-for的语法类似于JavaScript中的for循环。
格式如下：item in items的形式。

我们来看一个简单的案例：
如果在遍历的过程中不需要使用索引值
v-for=“movie in movies”
依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie
如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？
语法格式：v-for=(item, index) in items
其中的index就代表了取出的item在原数组的索引值。

<ul>
				<!--无索引-->
				<li v-for="item in movios">{{ item }}</li>
				<!--获取索引-->
				<li v-for="(item,index) in movios">{{ index+1 }} - {{ item }}</li>
			</ul>

v-for可以用户遍历对象：比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。

<!--遍历对象-->
				<li v-for="(value, key, index) in info" >
					{{ value }}-{{ key }}--{{ index }}
				</li>

Vue中一些操作数组的常用方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>Hello, {{ message }}</h2>
			<ul>
				<!--获取序号-->
				<li v-for="(item,index) in movios">{{ index+1 }} - {{ item }}</li>
				<!--遍历对象-->
			</ul>
			
			<button @click="updateDate1">push方法</button>
			<button @click="updateDate2">pop方法</button>
			<button @click="updateDate3">unshift方法</button>
			<button @click="updateDate4">shift方法</button>
			<button @click="updateDate5">splice方法</button>
			<button @click="updateDate6">sort方法</button>
			<button @click="updateDate7">reverse方法</button>
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					message : '遍历数组操作',
					movios: [
						'音乐鉴赏一','音乐鉴赏二','音乐鉴赏三','音乐鉴赏四'
					],
					info: {
						name: 'wzg',
						age: 18,
						height: 1.88
					}
				},
				methods: {
					updateDate1(){
						/*从最后新增元素*/
						this.movios.push('新增一','新增二')
					},
					updateDate2(){
						/*从最后删除元素*/
						this.movios.pop()
					},
					updateDate3(){
						/*从前面添加元素*/
						this.movios.unshift('新增一','新增二')
					},
					updateDate4(){
						/*从前面删除元素*/
						this.movios.shift()
					},
					updateDate5(){
						/*传递一个index,将对应index以及后面所有数据删除*/
						this.movios.splice(2)
					},
					updateDate6(){
						/*排序*/
						this.movios.sort()
					},
					updateDate7(){
						/*反转数据*/
						this.movios.reverse()
					}
				}
			})
		</script>
	</body>
	
</html>

8. v-mode

表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定。
案例的解析：
当我们在输入框输入内容时
因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。
当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。
所以，通过v-model实现了双向的绑定。
当然，我们也可以将v-model用于textarea元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>input框输入内容: {{ message }}</h2>
			<input type="text" v-model="message" />
			<textarea v-model="message"></textarea>
			<h2> textarea输入的内容: {{ message }}</h2>
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			
			let app = new Vue({
				el: '#app',
				data: {
					message : ''
				}
			})
		</script>
	</body>
	
</html>

v-model其实是一个语法糖，它的背后本质上是包含两个操作：
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件

<div id="app">
			<h2>input框输入内容: {{ message }}</h2>
			<input type="text" v-model="message" />
			<!--等同于下方代码-->
			<input type="text" 
				:value="message"
				@input=" message = $event.target.value"
				/>
		</div>

lazy修饰符：
默认情况下，v-model默认是在input事件中同步输入框的数据的。
也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
lazy修饰符可以让数据在失去焦点或者回车时才会更新：

<input type="text"  v-model.lazy="message1"/>
			<p>.lazy修饰符--当前内容: {{ message1 }}</p>

number修饰符：
默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
number修饰符可以让在输入框中输入的内容自动转成数字类型：

<input type="text"  v-model.number="message2"/>
			<p>.number修饰符--当前内容: {{ message2 }}</p>

trim修饰符：
如果输入的内容首尾有很多空格，通常我们希望将其去除
trim修饰符可以过滤内容左右两边的空格

<input type="text"  v-model.trim="message3"/>
			<p>.trim修饰符--当前内容: {{ message3 }}</p>