Vue.js实战：样式绑定、事件处理与表单-优快云博客

本文链接：https://blog.youkuaiyun.com/Better_Mei/article/details/100017431

样式绑定和事件处理及表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>样式绑定和事件处理及表单</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<style>
			.a{
				color: red;
			}
			.b{
				color: greenyellow;
			}
			.c{
				font-size: 60px;
			}
			/* div{
				padding: 50px;
			} */
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>样式绑定</h3>
					<span :class="aClz">天不生我朱哥</span><br />
					<span :class="bClz" :class="aClz">万古java如长夜</span><br />
					<span :class="cClz">天不生我朱哥，万古java如长夜</span><br />
				</li>
				<li>
					<h3>事件处理-组织冒泡</h3>
					<div style="background-color: #ADFF2F;width: 600px; height: 600px;" v-on:click="a">
						<div style="background-color: darkorange;width: 450px; height: 450px;" v-on:click="b">
							<div style="background-color: antiquewhite;width: 350px; height: 350px;" v-on:click="c">
								<div style="background-color: aqua;width: 240px; height: 250px;" v-on:click.stop="d">

								</div>
							</div>
						</div>
					</div>
				</li>
				<li>
					<h3>事件处理-按钮只能点击一次</h3>
					{{info}}<input type="text" v-model="mgs" />
					<button @click="e">无限发送</button>
					<button @click.once="e">只能发送一次</button>
				</li>
				<li>
					<h3>按键修饰符</h3>
					{{info}}<input type="text" v-model="mgs" @keyup.enter='e' />
					<button @click="e">无限发送</button>
					<button @click.once="e">只能发送一次</button>
				</li>
				<li>
					<h3>select标签</h3>
					<select name="babby" v-model="selectedIds">
						<option v-for="d in datas" :value="d.id">{{d.name}}</option>
					</select>
					选中的值:{{selectedIds}}
				</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() {
				return {
					aClz: 'a',
					bClz: 'b',
					cClz: ['b', 'c'],
					mgs: '',
					info: '',
					datas: [{
							id: 1,
							name: '唱跳'
						},
						{
							id: 2,
							name: 'rap'
						},
						{
							id: 3,
							name: '篮球'
						}
					],
					selectedIds:'',
					selectedIdArr:[],
					
				}
			},
			methods: {
				a() {
					alert('a')
				},
				b() {
					alert('b')
				},
				c() {
					alert('c')
				},
				d() {
					alert('d')
				},
				e() {
					this.info = this.mgs;
					this.mgs = '';
				}
			},
			computed: {
				info() {
					return this.mgs;
				}
			}

		})
	</script>
</html>

在这里插入图片描述

组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>局部组件注册</h3>
					<!-- 侵入性 -->
					<my-button></my-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 @click="a">被点击了{{n}}次</button>',
			data() {
				return {
					n: 0,
				}
			},
			methods: {
				a() {
					this.n += 1
				}
			}
		})
		new Vue({
			el: '#app',

			data() {
				return {

				}
			},
			components: {
				'my-button': {
					props: ['m'],
					template: '<button @click="a">被{{m}}点击了{{n}}次</button>',
					data() {
						return {
							n: 0,
							zhedie: '折叠效果',
						}
					},
					methods: {
						a() {
							this.n += 1;
							/* 注册一个实践，让外部调用，然后顺便接收内部的值 */
							if (this.n % 3 == 0) {
								this.$emit('three-click', this.zhedie);
							}
						}
					}
				}
			},
			methods:{
				xxx(v){
					alert(v);
				}
			}
		})
	</script>
</html>