vue模板语法详细解释2

最新推荐文章于 2024-02-04 14:52:21 发布

迟早嘚秃

最新推荐文章于 2024-02-04 14:52:21 发布

阅读量87

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_54067126/article/details/121021214

版权

vue模板语法详细解释2

一样式绑定

将原来写在style中的代码定义为变量然后通过vue进行调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<style type="text/css">
		.f100 {
			font-size: 100px;
		}
	</style>
	<body>
		<div id='app'>
			<!-- 将样式写入变量通过color取到color:red
			 通过size取到f100-->
			<h3 :class="size" :style="color">{{msg}}</h3>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					msg: 'helllo word',
					color: 'color:red;',
					size: 'f100'
				}
			}
		})
	</script>
</html>

在这里插入图片描述

二事件

Vue通过由点(.)表示的指令后缀来调用修饰符，
.stop
.prevent
.capture
.self
.once

  <!-- 阻止单击事件冒泡 -->
  <a v-on:click.stop="doThis"></a>
  <!-- 提交事件不再重载页面 -->
  <form v-on:submit.prevent="onSubmit"></form>
  <!-- 修饰符可以串联  -->
  <a v-on:click.stop.prevent="doThat"></a>
  <!-- 只有修饰符 -->
  <form v-on:submit.prevent></form>
  <!-- 添加事件侦听器时使用事件捕获模式 -->
  <div v-on:click.capture="doThis">...</div>
  <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
  <div v-on:click.self="doThat">...</div>
  <!-- click 事件只能点击一次 -->
  <a v-on:click.once="doThis"></a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<style type="text/css">
		.red {
			height: 300px;
			width: 300px;
			background-color: red;
		}
		.black {
			height: 200px;
			width: 200px;
			background-color: black;
		}
		.blue {
			height:100px;
			width: 100px;
			background-color: blue;
		}
	
	</style>
	<body>
		<div id='app'>
			<h3>冒泡事件</h3>
			<!-- 给三个div设置三个点击事件@设置大小和颜色是v-on:缩写 -->
			<div class="red" @click="red">
				<div class="black"  @click="black">
					<div class="blue" @click="blue">
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					msg: 'helllo word'
				}
			},
			methods:{
				red(){
					alert("red");
				},
				black(){
					alert("black");
				},
				blue(){
					alert("blue");
				}
			}
		})
	</script>
</html>

点击蓝色div的同时相当于也点击了黑色和红色
所以会有触发黑色div和红色div的点击事件
我们再代码上面加上stop无论点击谁都只会触发当前点击的事件不会触发三个事件

<div class="red" @click.stop="red">
				<div class="black"  @click.stop="black">
					<div class="blue" @click,stop="blue">
					</div>
				</div>
			</div>
		</div>

在这里插入图片描述
按键的快捷键
将触发事件的方式由点击给按键

<input v-on:keyup.enter="方法"/>

  **.enter
  .tab
  .delete (捕获 "删除" 和 "退格" 键)
  .esc
  .space
  .up
  .down
  .left
  .right
  .ctrl
  .alt
  .shift
  .meta**

三自定义组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id='app'>
			<!-- 自己定义的组件 -->
			<mybutton m="小明"></mybutton>
		</div>
	</body>
	<script type="text/javascript">
		
		Vue.component("mybutton", {
			//参数m
			props: ["m"],
			template: "<button v-on:click='incrn'>我被{{m}}点击了{{n}}次</button>",
			data: function() {
				return {
					n: 1
				}
			},
			methods:{
				incrn(){
					this.n++;
				}
			}
		});
		new Vue({
			el: '#app',
			data() {
				return {
				}
			}
		})
	</script>
</html>

在这里插入图片描述

四组件通信

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id='app'>
			<!-- 自己定义的组件 -->
			//three-click自定义的事件
			//xxx方法的参数要与事件的参数一致
			<mybutton m="小明" v-on:three-click="xxx"></mybutton>
		</div>
	</body>
	<script type="text/javascript">
		
		Vue.component("mybutton", {
			//参数m
			props: ["m"],
			template: "<button v-on:click='incrn'>我被{{m}}点击了{{n}}次</button>",
			data: function() {
				return {
					n: 0
				}
			},
			methods:{
				incrn(){
					console.log("incrn方法被调用");
					this.n++;
					if(this.n%3==0){
					//触发自定义组件触发的事件，可以传递任意参数
					//但触发的事件绑定的函数要与参数个数一致three-click（是自定义的事件相当于click点击事件一样）
					//this.n,"aaaaaaa"是传过去的参数
					this.$emit('three-click',this.n,"aaaaaaa")	
					}
				}
			}
		});
		new Vue({
			el: '#app',
			methods:{
				xxx(a,b,c){
					console.log("three-click方法被调用");
					console.log(a);
					console.log(b);
					console.log(c);
				}
			}
			
		});
	</script>
</html>