Vue基础语法【下】

.prevent

修饰符可以阻止事件的默认行为,提交事件不再重载页面
<form v-on:submit.prevent="submitForm">
  
  <button type="submit">Submit</button>
</form>
当表单被提交时，事件的默认行为（刷新页面）会被阻止，而是会触发submitForm方法。

.capture

修饰符可以将事件监听器添加到捕获阶段，而不是冒泡阶段。
<div v-on:click.capture="doSomething">Click me</div>
当点击div元素时，事件会在捕获阶段触发doSomething方法。

.self

只当事件在该元素本身（而不是子元素）触发时触发回调
<div v-on:click.self="handleClick">
  <button>Click me</button>
</div>
只有当点击div元素本身时，事件处理函数handleClick才会被触发。如果点击div内部的button元素，事件将不会被触发。

.once

修饰符只能让事件只触发一次。
<button v-on:click.once="doSomething">Click me</button>
当按钮被点击时，doSomething方法只会被触发一次。

注1：什么是事件冒泡?

案例


<!DOCTYPE html>
<html>
	 <head>
		<meta charset="utf-8">
		<title>插值</title>
		<!-- 导入工具 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<style type="text/css">
			.one{
				background-color: aqua;
				height: 25rem;
				width: 25rem;
			}
			.two{
				background-color: beige;
				height: 18.75rem;
				width: 18.75rem;
			}
			.three{
				background-color: blue;
				height: 12.5rem;
				width: 12.5rem;
			}
			.four{
				background-color: blueviolet;
				height: 6.25rem;
				width: 6.25rem;
			}
		</style>
	
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<div id="" class="one" @click="fun1">
				<div class="two" @click="fun2">
					<div class="three" @click="fun3">
						<div class="four" @click="fun4">
							
						</div>
					</div>
				</div>
			</div>
			
			
		</div>
		
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return{
						msg:"hello meinv",
					};
				},
				methods:{
					fun1(){
						alert("你是不是就想点我");
					},
					fun2(){
							alert("你为什么点我");
					},
					fun3(){
							alert("你怎么点我");
					},
					fun4(){
							alert("你点我");
					}
				}
			});
		</script>
		
		
	</body>
</html>

如何避免类似的冒泡呢？

我们可以在点击事件中添加我们的.stop阻止单击事件冒泡！！


<div id="" class="one" @click="fun1">
				<div class="two" @click.stop="fun2">
					<div class="three" @click.stop="fun3">
						<div class="four" @click.stop="fun4">
							
						</div>
					</div>
				</div>

2.按键修饰符

.enter

当用户按下回车键时触发事件。
<input v-on:keyup.enter="submitForm">
当用户在输入框中按下回车键时，会触发submitForm方法。

.tab

当用户按下Tab键时触发事件。
<input v-on:keyup.tab="nextField">
当用户在输入框中按下Tab键时，会触发nextField方法。

.delete

当用户按下删除键或退格键时触发事件。
<input v-on:keyup.delete="deleteItem">
当用户在输入框中按下删除键或退格键时，会触发deleteItem方法。

.esc

当用户按下Esc键时触发事件。
<input v-on:keyup.esc="cancelAction">
当用户在输入框中按下Esc键时，会触发cancelAction方法。

.space

当用户按下空格键时触发事件。
<button v-on:keyup.space="startGame">Start</button>
当用户在按钮上按下空格键时，会触发startGame方法。

.up

当用户按下上箭头键时触发事件。
<input v-on:keyup.up="increaseValue">
当用户在输入框中按下上箭头键时，会触发increaseValue方法。

.down

当用户按下下箭头键时触发事件。
<input v-on:keyup.down="decreaseValue">
当用户在输入框中按下下箭头键时，会触发decreaseValue方法。

.left

当用户按下左箭头键时触发事件。
<input v-on:keyup.left="moveLeft">
当用户在输入框中按下左箭头键时，会触发moveLeft方法。

.right

当用户按下右箭头键时触发事件。
<input v-on:keyup.right="moveRight">
当用户在输入框中按下右箭头键时，会触发moveRight方法。

.ctrl、.alt、.shift、.meta

当用户按下对应的修饰键时触发事件。
<input v-on:keyup.ctrl="saveData">
当用户在输入框中按下Ctrl键时，会触发saveData方法。

二、表单赋值与取值

表单赋值与取值综合案例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入工具 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="ctb">
			<h1>表单赋值与取值</h1>
			<div>
				<label>账号：</label>
				<input type="text" v-model="uname" placeholder="请输入账号">
			</div>
			<div>
				<label>密码：</label>
				<input type="password" v-model="upwd" placeholder="请输入密码">
			</div>
			<div>
				<label>年龄：</label>
				<input type="text" v-model.number="age" placeholder="请输入年龄">
			</div>
			<div>
				<label>性别：</label>
				<input type="radio" v-model="sex" value="1">男
				<input type="radio" v-model="sex" value="2">女
			</div>
			<div>
				<label>爱好：</label>
				<div style="display: inline;" v-for="h in hobbies">
					<input type="checkbox" :value="h.id" v-model="hobby" />{{h.name}}
				</div>
			</div>
			<div>
				<label>地区</label>
				<select v-model="area">
					<option value="">-- 请选择 --</option>
					<option v-for="c in city" :value="c.id">{{c.name}}</option>
				</select>
			</div>
			<div>
				<label>备注：</label>
				<textarea v-model="remark" placeholder="请输入注明"></textarea>
			</div>
			<div>
				<input type="checkbox" v-model="agreed">是否已阅读并同意协议
			</div>
			<div>
				<button @click="submit" :disabled="disabled">提交</button>
			</div>
		</div>
		<script>
			var vm = new Vue({
				el: "#ctb",
				data: {
					// 设置表单
					uname: null,
					upwd: null,
					age: 18,
					sex: 1,
					hobbies: [{
							id: '1',
							name: 'music'
						},
						{
							id: '2',
							name: 'basketball'
						},
						{
							id: '3',
							name: 'travel'
						}
					],
					hobby: [],
					remark: null,
					city: [{
							id: "1",
							name: "长沙"
						},
						{
							id: "2",
							name: "永州"
						},
						{
							id: "3",
							name: "道州"
						},
						{
							id: "4",
							name: "勾八"
						},
						{
							id: "5",
							name: "衡阳"
						},
						{
							id: "6",
							name: "大理"
						}
					],
					area: null,
					agreed: false,
					disabled: true
				},
				watch: {
					agreed: function(val) {
						if (val) {
							this.disabled = false;
						} else {
							this.disabled = true;
						}
					}
				},
				/* 获取表单内容 */
				methods: {
					submit: function() {
						let data = {
							uname: this.uname,
							upwd: this.upwd,
							age: this.age,
							sex: this.sex,
							hobby: this.hobby,
							city: this.area,
							remark: this.remark
						}
						console.log(data);
					}
				}
 
			});
		</script>
	</body>
</html>

三、自定义组件

1.组件介绍

组件(Component)是Vue最强大的功能之一

组件可以扩展HTML元素，封装可重用的代码

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

2.局部组件

在Vue实例中定义和使用局部组件非常简单。我们可以在Vue实例的components选项中定义组件，并在模板中使用它。


<div id="app">
    <my-button>点我</my-button>
  </div>
 
<script>
  // 在Vue实例中定义局部组件
  new Vue({
			el: '#app',
			components: {
				"my-button": {
					template: ""
				}
			}
		})
</script>

3.全局组件

全局组件可以在整个应用程序中使用，无需在每个Vue实例中重新定义。我们还可以在Vue实例之外定义全局组件，并在需要的地方使用它。


<script type="text/javascript">
		Vue.component('my-button', {
			//定义组件中的变量
			props:['pp'],
			
			template:'',
			data:function(){
				return {
					
				}
			}
		});
		
	</script>

4.组件通信

Vue自定义事件是为组件间通信设计，vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定。

不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称，建议使用“短横线分隔命名”

父Vue实例->Vue实例，通过prop传递数据

子Vue实例->父Vue实例，通过事件传递数据

组件传参【父传子】


<!DOCTYPE html>
<html>
	 <head>
		<meta charset="utf-8">
		<title>插值</title>
		<!-- 导入工具 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			
			<my-button m='嘿嘿'>点我</my-button>
			<h1>组件通信---父传子</h1>
			<my-button m='不要'>点我</my-button>
			</div>
			
			
		
		
		<script type="text/javascript">
			new Vue({
				el:"#app",
				components:{
					'my-button':{
						props:['m'],
						 template:'',
						 data:function(){
							 return{
								 n:1
							 }
						 },
						 methods:{
							 clickMe(){
								 this.n++;
							 }
						 }
					}
				},
				data(){
					return{
						msg:"hello meinv"
					};
				}
				
			});
			
		</script>
		
		
	</body>
</html>

组件传参【子传父】


<!DOCTYPE html>
<html>
	 <head>
		<meta charset="utf-8">
		<title>组件通信---子传父</title>
		<!-- 导入工具 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			
			<h1>组件通信---子传父</h1>
			<my-button m='不要' @ctb='getParam'>点我</my-button>
			</div>
			
			
		
		
		<script type="text/javascript">
			new Vue({
				el:"#app",
				components:{
					'my-button':{
						props:['m'],
						 template:'',
						 methods:{
							 clickMe(){
								 let book='我是你的四月天';
								 let price=90;
								 this.$emit('ctb',book,price)
							 }
						 }
					}
				},
				data(){
					return{
						msg:"hello meinv"
					};
				},
				methods:{
					getParam(a,b){
						console.log(a,b);
					}
				}
				
			});
			
		</script>
		
		
	</body>
</html>

相关阅读:
优思学院｜利用Excel进行双样本t检验
 【C++】C语言可变函数参数 | C++11可变参数模板
 可视化剪辑，账号矩阵管理，视频分发，聚合私信多功能一体化营销工具源代码开发部署方案
 全方位介绍工厂的MES质量检验管理系统
 JavaWeb-高级分页查询
 优雅的 Controller 层代码
 STM32单片机DS18B20测温液晶1602显示例程（Proteus仿真+程序）
unity 性能优化之GPU和资源优化
 玩转Mysql系列 - 第22篇：mysql索引原理详解
 CopyOnWriteArrayList源码分析
原文地址：https://blog.csdn.net/weixin_74268571/article/details/133065157