Vue样式绑定与事件处理组件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/hhhhhhhhzsw/article/details/108221836

本文深入探讨Vue框架中的样式绑定和事件处理机制，同时详细讲解如何使用组件进行应用构建，提升开发效率。

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

样式绑定和事件处理

<!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">
			.a {
				color: red;
			}

			.b {
				color: blue;
			}

			.c {
				font-size: 60px;
			}

/* 			div {
				padding: 50px;
			} */
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>样式绑定</h3>
					<span :class="aClz">花式白给</span>
					<span :class="bClz">不懂就学</span>
					<span :class="cClz">花式白给，不懂就学</span>
				</li>
				<li>
					<h3>事件处理-阻止冒泡</h3>
					<div style="background-color: red;width: 600px;height: 600px;" @click="a">
						<div style="background-color: blue;width: 500px;height: 500px;" @click.stop="b">
							<div style="background-color: hotpink;width: 300px;height: 300px;" @click.stop="c">
								<div style="background-color: greenyellow;width: 200px;height: 200px;" @click.stop="d">

								</div>
							</div>
						</div>
					</div>
				</li>
				<li>
					<h3>事件处理-按钮只能点击一次</h3>
					{{info}}<input type="text" v-model="msg" />
					<button @click="e">无限点击</button>
					<button @click.once="e">发送一次</button>
				</li>
				<li>
					<h3>按键修饰符</h3>
					{{info}}<input type="text" v-model="msg" v-on:keyup.enter="e" />
					<button @click="e">无限点击</button>
					<button @click.once="e">发送一次</button>
				</li>
				<li>
					<h3>select标签</h3>
					<select name="hobby" v-model="selectIds">
						<option v-for="d in datas" :value="d.id">{{d.name}}</option>
					</select>
					选中的值：{{selectIds}}
				</li>
				<li>
					<h3>复选框标签</h3>
					<div v-for="d in datas">
						<input type="checkbox" :value="d.id" name="likes" v-model="selectedIdArr"/>{{d.name}}
					</div>
					选中的值：{{selectedIdArr}}
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				aClz: 'a',
				bClz: 'b',
				cClz: ['b', 'c'],
				msg: '',
				info: '',
				datas: [{
					id: 1,
					name: '象棋'
				},{
					id: 2,
					name: '跳棋'
				},{
					id: 3,
					name: '军旗'
				}],
				selectIds:'',
				selectedIdArr:[]
			},
			methods: {
				a() {
					alert('a事件触发');
					alert(this.selectIds);
				},
				b() {
					alert('b事件触发');
				},
				c() {
					alert('c事件触发');
				},
				d() {
					alert('d事件触发');
				},
				e() {
					this.info = this.msg;
					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">
			<ul>
				<li>
					<h3>局部组件的注册</h3>
					<!-- 侵入性 -->
					<my-button></my-button>
					<!-- <button @click="doSubmit">被点击了n次</button> -->
				</li>
				<li>
					<h3>全局组件的注册</h3>
					<my-button2></my-button2>
				</li>
				<li>
					<h3>组件的通信（父串子）</h3>
					<my-button m='zs'></my-button>
				</li>
				<li>
					<h3>组件的通信（子串父）</h3>
					<my-button m='zs' @three-click='xxx'></my-button>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('my-button2',{
					template:'<button v-on:click="doSubmit">被点击了{{n}}次</button>',
					data(){
						return{
							n:0
						}
					},
					methods:{
						doSubmit(){
							this.n+=1;
						}
					}
				})
				
				
		new Vue({
			el: '#app',
			data: {
				
			},
			components:{
				'my-button':{
					props:['m'],
					template:'<button v-on:click="doSubmit">被{{m}}点击了{{n}}次</button>',
					data(){
						return{
							n:0,
							zedie:'折叠效果'
						}
					},
					methods:{
						doSubmit(){
							this.n+=1;
							// 注册一个事件,让外部调用,然后顺便接收内部的值
							if(this.n % 3==0){
								this.$emit('three-click',this.zedie);
							}
						}
					}
				}
			},
			methods:{
				xxx(v){
						alert(v);
				}
			}
		})
	</script>
</html>