Vue模板语法2

已于 2022-09-04 17:48:47 修改
阅读量217 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2022-09-04 17:47:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_67864917/article/details/126692049
版权
本文详细讲解了Vue中的事件处理器，包括样式绑定（class和style）、组件的使用及其通信方法（props、自定义事件），以及Vue表单的构建与数据交互。通过实例演示，帮助开发者理解如何构建复杂组件并实现组件间的高效协作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

一：事件处理器

1. 样式绑定

​编辑2. 事件处理器

二：组件以及组件通信

1. vue组件

2.自定义组件

3.组件通信

三：Vue表单

一：事件处理器

1. 样式绑定

 1.1 class绑定
  使用方式：v-bind:class="expression" 
  expression的类型：字符串、数组、对象
  
1.2 style绑定
  v-bind:style="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 type="text/css">
			.red{
				width: 400px;
				height: 400px;
				background-color: red;
			}
			.yellow{
				width: 300px;
				height: 300px;
				background-color: yellow;
			}
			.blue{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
			.green{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
<body>
		<!-- 定义边界 -->
		<div id ="app">
			<div class="red">
				<div class="yellow">
					<div class="blue">
						<div class="green"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界 
		new Vue({
			el:'#app',
			data(){
				// 设置Vue所管理的边界中可以使用的变量
				return {
					msg:'hello vue!!!!',
				};
			}
		})
	</script>
</html>


2. 事件处理器
 

<!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">
			.red{
				width: 400px;
				height: 400px;
				background-color: red;
			}
			.orange{
				width: 300px;
				height: 300px;
				background-color: orange;
			}
			.blue{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
			.black{
				width: 100px;
				height: 100px;
				background-color: black;
			}
		</style>
	</head>
<body>
		<div id ="app">
			<p>按键修饰符</p>
			<input type="text" v-model="msg" @keyup.teb="dianwo"/>
			<p>发送一次</p>
			<input type="text" v-model="msg"/>
			<button type="button" @click.once="dianwo"> 点我试试</button>
			<p>阻止冒泡</p>
			<div class="red" @click="red">
				<div class="orange" @click="orange">
					<div class="blue" @click="blue">
						<div class="black" @click.stop="black"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		// 绑定边界 
		new Vue({
			el:'#app',
			data(){
				return {
					msg:'hello vue!!!!',
				}
			},
			methods:{
				red(){
					alert("red");
				},orange(){
					alert("orange");
				},blue(){
					alert("blue");
				},black(){
					alert("black");
				},
				dianwo(){
					// alert("this.msg");
					console.log(this.msg);
				}
			}
			
		})
	</script>
</html>

二：组件以及组件通信

1. vue组件

2.1 组件简介

      组件(Component)是Vue最强大的功能之一

      组件可以扩展HTML元素，封装可重用的代码

      组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

  2.2 全局和局部组件

      全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。

      局部组件: new Vue({el:'#d1',components:{...}})

      注册后，我们可以使用以下方式来调用组件：

      <tagName></tagName>

  2.3 props

      props是父组件用来传递数据的一个自定义属性。

      父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"

2.自定义组件

<!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">
			
		</style>
	</head>
<body>
		<div id ="app">
			<p>简单组件</p>
			<my-button></my-button>
			<p>父组件 传参 给 子组件</p>
			<my-button m='zhoujuan' n='3'></my-button>
		</div>
	</body>
	<script>
		Vue.component('my-button',{
			// template:'<button>按我试试</button>' 
			templatea:'<button>{{m}}点击了{{n}}次</button>',
			props:['m','n']
		})
		new Vue({
			el:'#app',
			data(){
				return {
					msg:'hello vue!!!!',
				}
			}
		})
	</script>
</html>

 ​​​​​​

3.组件通信

自定义事件

   监听事件：$on(eventName)

   触发事件：$emit(eventName)

   注1：Vue自定义事件是为组件间通信设计   

        vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定

     

        父Vue实例->Vue实例，通过prop传递数据

        子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">
			
		</style>
	</head>
<body>
		<div id ="app">
			<p>父组件 传参 给 子组件</p>
			<my-button m='zhoujuan' n='3' @mymethod="xxx"></my-button>
		</div>
	</body>
	<script>
		Vue.component('my-button',{
			// template:'<button>按我试试</button>'
			 template:'<button @click="sub">{{m}}点击了{{n}}次</button>',
			 props:['m','n'],
			 methods:{
				 sub(){
					 var name= "张三";
					 var sex = "女";
					 var age = 22;
					 console.log(name);
					 console.log(sex);
					 console.log(age);
					 // 子传父 将参数传递给父组件 的关键在于
					//1.$emit 2.自定义事件
					 this.$emit('mymethod',name,sex,age);
				 }
			 }
		})
		// 外部组件
		
		new Vue({
			el:'#app',
			data(){
				return {
					msg:'hello vue!!!!',
				}
			},
			methods:{
				xxx(a,b,c){
					console.log(a);
					console.log(b);
					console.log(c);
				}
			}
		})
		
		// 组件
		// 定义：templa
		// 父传子：props
		// 子传父：通过$emit注册事件名
		
	</script>
</html>

三：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>
	</head>
<body>
		<div id ="app">
			<!-- 创建一个多功能表单 -->
			<form>
				姓名：<input type="text" v-model="uname"/><br>
				密码：<input type="password" v-model="pwd"/><br>
				性别：
					<input name="sex" type="radio" checked="checked" />
					<input name="sex" type="radio" /><br>
				爱好：
				<div v-for="l in likes">
					<input v-model="hobby" type="checkbox" :value="l.id"/>{{l.name}}
				</div><br>
				英语等级：
				<select v-model="selectedVal">
					<option v-for="e in englishs" :value="e.id">{{e.name}}</option>
				</select><br>
				
				<input @click="show" type="checkbox"/>
				<input v-show="showFlag" @click="sub" type="button" value="okk" />
			</form>
		</div>
	</body>
	<script>
		new Vue({
			el:'#app',
			data(){
				return {
					uname:null,
					pwd:null,
					sex:1,
					likes:[//爱好数据源 复选框
						{id:1,name:'泡泡玛特'},
						{id:2,name:'小姜'},
						{id:3,name:'小蛙'},
						{id:4,name:'SP'}
					],
					englishs:[//数据源 下拉框
						{id:1,name:'优'},
						{id:2,name:'良'},
						{id:3,name:'差'}
					],
					hobby:[],//用来存放选中的爱好
					selectedVal:0,
					showFlag:false,
				} 
			},
			methods:{
				show(){
					this.showFlag = true;
				},
				sub(){
					// 后续都是JSON数据交互 向后台提交json对象
					var obj={
						uname:this.uname,
						sex:this.sex,
						pwd:this.pwd,
						hobby:this.hobby,
						level:this.selectedVal
					} 
					console.log(obj);  
				}
			}
		})
	</script>
</html>

周甘木
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值