模板语法2-CSDN博客

本文链接：https://blog.csdn.net/yzq102873/article/details/126697708

一、事件处理器

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

①阻止单击事件冒泡( .stop)

②click 事件只能点击一次(.once)

一、事件处理器

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

①阻止单击事件冒泡( .stop)

<!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>
		<style type="text/css">
			.red{
				height: 400px;
				width: 400px;
				background-color: red;
			}
			.yellow{
				height: 300px;
				width: 300px;
				background-color: yellow;
			}
			.blue{
				height: 200px;
				width: 200px;
				background-color: blue;
			}
			.green{
				height: 100px;
				width: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="red" @click="red()">
				<div class="yellow" @click="yellow()">
					<div class="blue" @click="blue()">
						<div class="green" @click.stop="green"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el:'#app',
			data(){
				return {
					msg:'666'
				}
			},
			methods:{
				red(){
					alert('red');
				},
				yellow(){
					alert('yellow');
				},
				blue(){
					alert('blue');
				},
				green(){
					alert('green');
				}
			}
		})
	</script>
</html>

②click 事件只能点击一次(.once)

<!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">
			<p>发送一次</p>
			<input type="text" v-model="msg" />
			<button type="button" @click.once="dianwoshishi">点我试试</button>
		</div>
	</body>
	<script>
		new Vue({
			el:'#app',
			data(){
				return {
					msg:'666'
				}
			},
			methods:{
				dianwoshishi(){
					alert(this.msg);
				}
			}
		})
	</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">
			<p>按键修饰符</p>
			<input type="text" v-model="msg" @keyup.enter="dianwoshishi"/>
		</div>
	</body>
	<script>
		new Vue({
			el:'#app',
			data(){
				return {
					msg:'666'
				}
			},
			methods:{
				dianwoshishi(){
					alert(this.msg);
				}
			}
		})
	</script>
</html>

二、组件及组件通信

1、组件简介

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

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

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

2、全局和局部组件

全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。

局部组件: new Vue({el:'#d1',components:{...}})

注册后，我们可以使用以下方式来调用组件：

3、简单组件

<!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">
			<p>简单组件</p>
			<my-button></my-button>
		</div>
	</body>
	<script>
		Vue.component('my-button',{
			template:'<button>我的按钮</button>'
		})
		new Vue({
			el:'#app',
			data(){
				return {
					msg:'666'
				}
			}
		})
	</script>
</html>

4、父组件传参给子组件

<!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">
			<p>父组件传参给子组件</p>
			<my-button m='diandian' n='3' @mymethod="xxx"></my-button>
		</div>
	</body>
	<script type="text/jscript">
		Vue.component('my-button',{
			template:'<button @click="sub">{{m}}点击了{{n}}次</button>',
			props:['m','n'],
			methods:{
				sub(){
					var name="颠颠";
					var sex="男";
					var age=18;
					console.log(name);
					console.log(sex);
					console.log(age);
					//子传父将参数传递给父组件
					this.$emit('mymethod',name,sex,age);
				}
			}
		})
		new Vue({
			el:'#app',
			data(){
				return {
					msg:'666'
				}
			},
			methods:{
				xxx(a,b,c){
					console.log(a);
					console.log(b);
					console.log(c);
				}
			}
		})
	</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">
			姓名：<input type="text" v-model="uname" /><br>
			密码：<input type="password" v-model="pwd"/><br>
			性别：
				<input name="sex" type="radio" checked="checked">男
				<input name="sex" type="radio">女<br>
			爱好：
				<div v-for="l in likes">
					<input v-model="hobby" type="checkbox" v-bind:value="l.id" />{{l.name}}
				</div><br>
			英语等级：
				<select v-model="selectedVal">
					<option v-for="e in englishs" :value="e.id">{{e.name}}
						
					</option>
				</select><br>
			<input type="checkbox" @click="show" />
			<input v-show="showFlag" @click="sub" type="button" value="ok" />
		</div>
	</body>
	<script>
		new Vue({
			el:'#app',
			data(){
				return {
					uname:null,
					pwd:null,
					sex:1,
					likes:[//数据源 复选框
						{id:1,name:'篮球'},
						{id:2,name:'足球'},
						{id:3,name:'桌球'},
						{id:4,name:'乒乓球'}
					],
					englishs:[//数据源 下拉框
						{id:1,name:'优'},
						{id:2,name:'良'},
						{id:3,name:'差'}
					],
					hobby:[],//用来存放选中的爱好
					selectedVal:0,
					showFlag:false
				}
			},
			methods:{
				show(){
					this.showFlag=true;
				},
				sub(){
					var obj={
						uname:this.uname,
						pwd:this.pwd,
						sex:this.sex,
						hobby:this.hobby,
						level:this.selectedVal
					}
					console.log(obj);
				}
			}
		})
	</script>
</html>