vue01,插值表达式、基础指令、属性绑定、事件绑定及修饰符、样式绑定

本文链接：https://blog.youkuaiyun.com/Function0zyn/article/details/115675703

本文详细介绍了Vue.js的基础知识，包括插值表达式用于显示数据，基础指令如v-if和v-for，属性绑定用于组件间的数据交互，事件绑定允许用户交互，以及事件修饰符如.stop和.prevent用于精细化控制事件处理。通过示例代码展示了各种概念的实际应用。

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

vue01,插值表达式、基础指令、属性绑定、事件绑定及修饰符、样式绑定

1. 插值表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{msg}}</h1>
			<p>{{n+100}}</p>
			<p>{{"今年"+age+"岁"}}</p>
			<p>{{arr[2]}}</p>  <!-- //表示的是数组的第三个元素 -->
			<p>{{a===10?"=10":"不等于10"}}</p>  <!--  三目运算符 -->
			<p>{{obj.age}}</p> <!--  对象 -->
		</div>
		<!-- {{}}是vue的一种模板语法，代表解析时遇见了这个符号中的表达式运行然后取到结果-->
		<!-- 普通插值表达式插入数据，在标签内使用{{}}插入js表达式：变量、函数调用、三目运算符-->
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					msg:'hello',
					n:100,
					age:23,
					arr:[12,12,5],
					a:9,
					obj:{age:31}
				}
			})
		</script>
		<!-- 其他写法，原生写法
		 1.获取或者创建节点
		 2.给节点添加属性 innerHTML innerText
		 3.渲染（绘制或者回流）
		 -->
	</body>
</html>

代码运行结果
在这里插入图片描述

2. 基础指令

<body>
		<div class="app">
			<!-- 文本指令 -->
			<h1 v-cloak>{{msg}}</h1>
			<p v-text="msg2"></p>
			<p v-html="msg3"></p>
			<p v-pre>{{msg2}}</p> <!-- v-pre的作用是不会解析里面的msg2 -->
			<p v-cloak>{{msg2}}</p>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '.app',
				data: {
					msg: '666666',
					msg2: `我是zyn,现在是${new Date().toLocaleString()}`,
					msg3: "<a href='#'>点击</a>"
				}
			})
		</script>
	/* 解决vue第一次加载的时候页面上使用数据会闪烁？
			1.界面加载的时候会把节点直接挂载到文档树中,导致{{msg+"666"}}这个字符串会显示一下
			2.vue对象生成data数据时候 回去刷新界面 把{{msg+"666"}}字符串替换成结果字符串
			3.导致界面第一次加载的时候会闪屏
			4.解决方案:使用v-html,v-text指令操作,或者css中加[v-cloak] {display:none};
			笔试题:写出vue常用的文本指令 v-html v-text 
			v-pre */ 
	</body>

代码运行结果
在这里插入图片描述

3.属性绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<h1 v-text="msg"></h1>
			<img v-bind:src="img">
			<a :href="link">点击跳转</a>
			
			<!-- <a v-bind:href="link">点击跳转</a> -->
			<!-- 语法糖，简写形式，但是v-bind解析更快 -->
			<!-- 所有标签中属性绑定js中变量:
			标准写法:   v-bind:src="变量"
			简写形式:   :src="[10,20,30]" -->
			
		</div>
		<script type="text/javascript">
			let app = new Vue({
				el: '#app',
				data: {
					link: "http://www.baidu.com",
					msg: "标题",
					img: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2620306848,1106594030&fm=26&gp=0.jpg"
				}
			})
		</script>
	</body>
</html>

代码运行结果
在这里插入图片描述

4.事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
			<button onclick="alert(66666)" type="button">点击</button>
			<button v-on:click="fn" type="button">点击这里1</button>
			<button @click="fn2" type="button">点击这里2</button>
			<button @click="fn3(100)" type="button">点击这里3</button>
			<button @click="fn4(111)" type="button">点击这里4</button>
			<!-- <button @click="fn5" type="button">点击这里5</button> -->

			<!-- 绑定事件 v-on  @ 都是绑定事件的指令，值就是methods中的方法，
			可以加小括号，也可以不加-->

		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					msg: '6666'
				},
				methods: {
					fn: function(arg) {
						this.msg = '6669874'
						console.log(132123)
						console.log(this); //vue对象
						console.log(arg); //鼠标事件
					},
					fn2: () => {
						console.log(this);
						//指向window。箭头函数
					},
					fn3:function(arg) {
						console.log(arg);
						this.msg="点击这里3"
						// 点击 后台输出 100  页面输出：点击这里3
					},
					fn4:(eg)=>{
						console.log(eg);
						console.log(66666);
						// 点击后台输出 111  66666
					}
				}
			})
			// 总结：es5  es6的语法写点击事件的方法都可以。在methods中写方法。
		</script>
	</body>
</html>

5.事件修饰符

原生写法阻止事件冒泡

	<script type="text/javascript">
			function  (e) {
				e.stopPropagation();
				e.stopImmediatePropagation()
				e.cancelBubble()
				// 阻止事件冒泡
			}
	</script> -->

事件修饰符

.stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为
.prevent 阻止默认事件
.capture 添加事件侦听器时让事件在捕获阶段触发
.self 其他元素的事件触发时事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素
.once 事件只触发一次,触发完之后,事件就解绑
多修饰符一起使用:连点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div @click="fn2">
				<button @click="fn" type="button">点击</button>


				<img @click="fn3"
					src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2620306848,1106594030&fm=26&gp=0.jpg">

				<div>
					666661
					<button @click="fn6" type="button">555</button>
				</div>

				<a @click.prevent.stop.="fn4" href="http://www.baidu.com">跳转到百度</a>
			</div>
		</div>

		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {},
				methods: {
					fn() {console.log("111")},
					fn2() {console.log("222")},
					fn3() {console.log("333")},
					fn4() {console.log(444)},
					fn5() {console.log("555")},
					fn6() {console.log("666")},
				}
			})
			
		</script>
		<!-- 
		<script type="text/javascript">
			function  (e) {
				e.stopPropagation();
				e.stopImmediatePropagation()
				e.cancelBubble()
				// 阻止事件冒泡
			}
		</script> -->
	</body>
</html>

6.样式绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type="text/css">
			.green {
				background-color: green;
				width: 200px;
				height: 100px;
			}

			.red {
				background-color: #FF0000;
				color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>class样式的绑定</h1>
			<button type="button" :class="btn">点击这里</button>
			<div :class="[btn,btn2]">xxx</div>
			<hr >
			<div :class="[btn,{red:n}]">xxx</div>
			<!-- 这里是用了两个样式 -->

			<h1>行内style样式的绑定</h1>
			<div v-bind:style="{color:color1}">66666</div>


		</div>

		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					btn: 'green',
					btn2: 'red',
					color1:"red",
					n:false
				}
			})
		</script>
	</body>
</html>