Vue基础语法【下】

最新推荐文章于 2024-05-06 18:46:17 发布

孤留光乩

最新推荐文章于 2024-05-06 18:46:17 发布

阅读量595

点赞数 4

分类专栏： Vue+Element UI 文章标签： vue.js 前端 javascript html5 jquery

本文链接：https://blog.csdn.net/weixin_74268571/article/details/133065157

版权

Vue+Element UI 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

.ctrl、.alt、.shift、.meta

一、事件处理器

1.事件修饰符

Vue通过由点(.)表示的指令后缀来调用修饰符

.stop

阻止单击事件冒泡,即停止事件在DOM树中的传播。
<button v-on:click.stop="doSomething">Click me</button>
当按钮被点击时，事件不会继续向上冒泡，只会触发doSomething方法。

.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: "<button>自定义组件</button>"
				}
			}
		})
</script>

3.全局组件

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

<script type="text/javascript">
		Vue.component('my-button', {
			//定义组件中的变量
			props:['pp'],
			
			template:'<button v-on:click="btn">{{pp}}打我</button>',
			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:'<button @click="clickMe">{{m}}点击了{{n}}次</button>',
						 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:'<button @click="clickMe">{{m}}点击了</button>',
						 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>