Vue进阶（样式绑定,事件处理,表单,组件通信）

最新推荐文章于 2024-10-12 10:41:56 发布

洛水&天依

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量49

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/uit67t567/article/details/131820434

版权

1. 样式绑定

1.1 class绑定

1.2使用驼峰命名法的格式 :style=“{fontSize:e}”

1. 样式绑定

1.1 class绑定

使用方式：v-bind:class="expression"
expression的类型：字符串、数组、对象

<!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>
			.a {
				font-size: 36px;
			}

			.b {
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>基本样式绑定</p>
			<span class="a">111</span><br>
			<span class="b">222</span><br>
			<span :class="a">111</span><br>
			<span :class="b">222</span><br>
		</div>
		<script>
			// 绑定边界
			new Vue({
				el: '#app',
				data() {
					return {
						a: 'a',
						b: 'b',
					}
				}
			})
		</script>
	</body>
</html>

1.2使用驼峰命名法的格式 :style=“{fontSize:e}”

<span style="font-size: 60px;">111</span><br />
<span :style="{fontSize:e}">111</span>

data() {
	return {
		e: '60px'
	}
}

2. 事件处理器

事件监听可以使用v-on 指令

.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>

注: 什么是事件冒泡?
当事件发生后,事件源没有处理事件的能力,即处理事件的方法没有绑定到该事件源上,这个事件就会开始传播
例如: 当我们点击一个按钮,会产生一个事件,但这个按钮本身不能处理这个事件,事件必须从这个按钮传播出去,从而达到能够处理这个事件的代码中

<style>
	.one {
		height: 400px;
		width: 400px;
		background-color: #F00;
	}
	.two {
		height: 300px;
		width: 300px;
		background-color: #0F0;
	}
	.three {
		height: 200px;
		width: 200px;
		background-color: #0ff;
	}
	.four {
		height: 100px;
		width: 100px;
		background-color: #FF0;
	}
</style>

在上图中存在四个嵌套的div每个div都绑定有不同的点击事件，
当我们点击里面的div时会依次的触发外面div的点击事件

<div class="one" @click="do_one">
	<div class="two" @click="do_two">
		<div class="three" @click="do_three">
			<div class="four" @click="do_four">
			</div>
		</div>
	</div>
</div>

methods: {
	do_one() {
		alert("one");
	},
	do_two() {
		alert("two");
	},
	do_three() {
		alert("three");
	},
	do_four() {
		alert("four");
	}
}

当我们使用.stop阻止事件冒泡
此时每个div只会触发自己绑定的事件

<div class="one" @click.stop="do_one">
	<div class="two" @click.stop="do_two">
		<div class="three" @click.stop="do_three">
			<div class="four" @click.stop="do_four">
			</div>
		</div>
	</div>
</div>

3. form表单

<div id="app">
	姓名:<input type="text" v-model="name"/><br>
	密码:<input type="password" v-model="pwd"/><br>
	年龄:<input type="text" v-model="age"/><br>
	性别:
	<input type="radio" name="sex" v-model="sex" value="1"/>男
	<input type="radio" name="sex" v-model="sex" value="0"/>女<br>
	爱好:
	<span v-for="e in likes">
		<input type="checkbox" v-model="mylikes" :value="e.id"/>{{e.name}}
	</span><br>
	类别:
	<select v-model="mytype">
		<option v-for="e in types" :value="e.id">{{e.name}}</option>
	</select><br>
	备注:<textarea rows="10" cols="20" v-model="remark"></textarea><br>
	确认:<input type="checkbox" v-model="ok"/>
	<span v-if="ok">
		<button v-on:click="do_sub">提交</button>
	</span>
	<span v-else="">
		<button v-on:click="do_sub" disabled>提交</button>
	</span>
</div>
<script>
	// 绑定边界
	new Vue({
		el: '#app',
		data() {
			return {
				name: null,
				pwd: null,
				age: 0,
				sex: 1,
				likes: [
					{id: 1, name: '篮球'},
					{id: 2, name: '足球'},
					{id: 3, name: '象棋'}
				],
				types: [
					{id: 1, name: '御姐'},
					{id: 2, name: '萝莉'},
					{id: 3, name: '少女'}
				],
				remark: '备注',
				ok: false,
				mylikes: [],
				mytype: null
			}
		},
		methods: {
			do_sub() {
				var obj = {
					name: this.name,
					pwd: this.pwd,
					age: this.age,
					sex: this.sex,
					likes: this.mylikes,
					type: this.mytype,
					remark: this.remark,
					ok: this.ok
				}
				console.log(obj)
			}
		}
	})
</script>

（注意：只有确认打√时提交按钮才会显示）

4. 组件通信

4.1组件介绍

组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

4.2父传子

通过props: ['m']设置参数来实现自定义组件的传参

<div id="app">
	<my-button m='zs'></my-button>
	<my-button m='王五'></my-button>
</div>
<script>
	// 绑定边界
	new Vue({
		el: '#app',
		components: {
			'my-button': {
				props: ['m'],
				template: '<button @click="do_sub">{{m}}提交{{n}}次</button>'
				data() {
					return {
						n: 0
					}
				},
				methods: {
					do_sub() {
						this.n++;
					}
				}
			}
		},
		data() {
			return {
			}
		}
	})
</script>

4.3子传父

通过自定义事件绑定方法传输参数给事件的方法

<div id="app">
	<my-button m='zs' @three-click='do_three'></my-button>
	<my-button m='王五' @four-click='do_four'></my-button>
</div>
<script>
	// 绑定边界
	new Vue({
		el: '#app',
		components: {
			'my-button': {
				props: ['m'],
				template: '<button @click="do_sub">{{m}}提交{{n}}次</button>',
				data() {
					return {
						n: 0
					}
				},
				methods: {
					do_sub() {
						this.n++;
						var name = 'ww';
						var sex = '男';
						var hobby = '小姐姐';
						// 通过自定义事件来完成
						if (this.n % 3 == 0)
							this.$emit('three-click', name, sex, hobby);
						
						if (this.n % 4 == 0)
							this.$emit('four-click', name, hobby);
					}
				}
			}
		},
		methods: {
			do_three(a, b, c) {
				console.log(a, b, c);
			},
			do_four(a, b, c) {
				console.log(a, b, c);
			}
		},
		data() {
			return {
			}
		}
	})
</script>