Vue基础语法（三）

沿途为何没爱河

于 2020-08-14 11:08:07 发布

阅读量329

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Lzxccas/article/details/107999675

版权

本文深入讲解Vue的基础语法，包括样式绑定、事件处理中的阻止冒泡和限制点击次数、select标签和复选框的使用。此外，还详细介绍了组件的注册（局部与全局）以及组件间的通信——父传子和子传父的数据交互。

摘要由CSDN通过智能技术生成

Vue基础语法（三）

前言

前言

上次讲了vue的基础模板语法上这次来讲下半部分

全代码

<!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: antiquewhite; width: 600px; height: 600px;" @click="a">
						<div style="background-color: #0000FF; width: 500px; height: 500px;" @click="b">
							<div style="background-color: aqua; width: 300px; height: 300px;" @click="c">
								<div style="background-color: black; width: 200px; height: 200px;" @click.stop="d"></div>
							</div>
						</div>						
					</div>
				</li>
				<li>
					<h3>事件处理-按钮只能点击一次</h3>
					{
   {
   info}}<input type="text" v-model="msg"