Vue样式绑定,事件处理,表单,组件通信

1. 样式绑定

1. 基本样式绑定
   v-bind

<span class="a">111</span><br>
<span class="b">222</span><br>
<span :class="a">111</span><br>
<span :class="b">222</span><br>

<style>
	.a {
		font-size: 36px;
	}
	.b {
		color: red;
	}
</style>

data() {
	return {
		a: 'a',
		b: 'b'
	}
}

2. 样式二
   使用驼峰命名法的格式 :style=“{fontSize:e}”

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

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

2. 事件处理器

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

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


在上图中存在四个嵌套的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>

当我们使用.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>

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

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

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="0"/>男
	<input type="radio" name="sex" v-model="sex" value="1"/>女<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: 'A'},
					{id: 2, name: 'B'},
					{id: 3, name: 'C'}
				],
				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. 组件通信

1. 父传子
   通过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>

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

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