vue基础语法（下）-CSDN博客

本文链接：https://blog.csdn.net/kiki208418895/article/details/101016552

样式绑定
1.1 class绑定
使用方式：v-bind:class=“expression”
expression的类型：字符串、数组、对象

1.2 style绑定
v-bind:style=“expression”
expression的类型：字符串、数组、对象

样式绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<style>
		.a{
			background-color: bisque;
		}
		.b{
			background-color: darkgrey;
		}
		.c{
			font-size: 20px;
		}
		div{
			padding: 10px;
		}
	</style>
	
	<body>
		<!-- vue所管理的边界 -->
		<div id="app">
			<ul>
				<li>
					<h3>样式绑定</h3>
					<span :class="a">纪梵希</span>
					<span :class="b">宇宙无敌美少女</span>
				</li>
				
				
				<li>
					<h3>事件冒泡</h3>
					<div style="width:300px ; height: 300px; background-color: #FFE4C4;" @click="d">
						<div  style="width:200px ; height: 200px; background-color: aliceblue;" @click="c">
							<div  style="width:100px ; height: 100px; background-color: burlywood;" @click="b">
								<div  style="width:50px ; height: 50px; background-color: coral;" @click.stop="a">
								</div>
							</div>
						</div>
					</div>
				</li>
				
				<li>
					<h3>模拟qq消息发送</h3>
					{{info}}<input v-model="msg" v-on:keyup.enter="send" />
					<button @click="send">发送多次</button>
					<button @click.once="send">只能发送一次</button>
				</li>
				
			</ul>
			
		</div>
	</body>
	
	<script>
		//通过vue实例去渲染vue所管理的边界
		new Vue({
			el:'#app',
			data(){
				return{
					aclz:'a',
					bclz:['a','c'],
					msg:'',
					info:''
				};
			},
			
			methods:{
				a(){
					alert("事件A被触发")
				},
				b(){
					alert("事件B被触发")
				},
				c(){
					alert("事件C被触发");
				},
				d(){
					alert("事件D被触发");
				},
				send(){
					this.info=this.msg;
					this.msg='';
				}
				
			}
		})
	</script>
</html>

结果：
在这里插入图片描述
5.1 组件简介
组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

5.2 全局和局部组件
全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。
局部组件: new Vue({el:’#d1’,components:{…}})
注册后，我们可以使用以下方式来调用组件：

组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>局部组件的注册</h3>
					<my-button></my-button>
				</li>
				<li>
					<h3>父子组件的传参（父传子）</h3>
					<my-button m="橙橙"></my-button>
				</li>
				<li>
					<h3>父子组件的传参（子传父）</h3>
					<my-button v-on:two-click="getData"></my-button><br />
					接受自定义组件中的变量值：{{innerNum}}<br />
					作者：{{au}}
				</li>
				<li>
					<h3>全局组件的注册</h3>
					<my-button2></my-button2>
				</li>
			</ul>
			
		</div>
	</body>
	
	<script>
		Vue.component('my-button2',{
				props:["m"],
				template:'<button v-on:click="add">被{{m}}点击了{{n}}次</button>',
				data(){
					return{
						n:1,
						auther:'宇宙无敌美少女'
					};
				},
				methods:{
					add(){
						this.n=this.n+1;
						//自定义一个双击时间
						if(this.n%3==0){
							this.$emit('two-click',this.n,this.auther);
						}
					}
				}
				
		});
		
		
		
		
		
		//通过vue实例去渲染vue所管理的边界
		new Vue({
			el:'#app',
			data(){
				return{
					innerNum:1,
					au:''
				};
			},
			methods:{
				getData(v,a){
					this.innerNum=v;
					this.au=a;
				}
			},
			components:{
				'my-button':{
					props:["m"],
					template:'<button v-on:click="add">被{{m}}点击了{{n}}次</button>',
					data(){
						return{
							n:1,
							auther:'宇宙无敌美少女'
						};
					},
					methods:{
						add(){
							this.n=this.n+1;
							//自定义一个双击时间
							if(this.n%3==0){
								this.$emit('two-click',this.n,this.auther);
							}
						}
					}
					
				}
			}
			
		})
	</script>
</html>

结果：
在这里插入图片描述