vue基础语法下（样式绑定、事件处理器、form表单、组件通信）

风之神樂823

于 2023-07-20 01:12:46 发布

阅读量46

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_66437564/article/details/131820779

版权

vue 基础语法下

1.样式绑定
- 1.1 class绑定
- 1.2 style绑定
2.事件处理器
3.表单
- 3.1 修饰符
- 3.2 Vue表单
5.vue组件传值

1.样式绑定

1.1 class绑定

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

1.2 style绑定

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

// An highlighted block
<!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 {
  			font-size: 36px;
  		}
  		.b {
  			font-size: 36px;
  		}
  	</style>
  </head>
  <body>
  	<div id="app">
  		<p>基本样式绑定</p>
  		<span class="a">犯我华夏</span><br>
  		<span class="b">虽远必诛</span><br>
  		<span :class="c">犯我华夏</span><br>
  		<span :class="d">虽远必诛</span><br>
  		<p>样式二</p>
  		<span style="font-size: 60px;">犯我华夏，虽远必诛</span><br>
  		<span :style="{fontSize:e}">犯我华夏，虽远必诛</span>
  	</div>
  	<script type="text/javascript">
  		new Vue({
  			el: '#app',
  			data() {
  				return {
  					c: 'a',
  					d: 'b',
  					e:'60px'
  				}
  				
  			}
  
  		});
  	</script>
  </body>
</html>

输出结果
在这里插入图片描述

2.事件处理器

2.1 事件修饰符

// An highlighted block
  <!-- 阻止单击事件冒泡 -->
  <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>

2.2 按键修饰符

// An highlighted block
  <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
  <input v-on:keyup.13="submit">

  Vue为最常用的按键提供了别名
  <!-- 同上 -->
  <input v-on:keyup.enter="submit">

  全部的按键别名：
  .enter
  .tab
  .delete (捕获 "删除" 和 "退格" 键)
  .esc
  .space
  .up
  .down
  .left
  .right
  .ctrl
  .alt
  .shift
  .meta

2.3 冒泡事件

// An highlighted block
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<style>
			.one {
				width: 400px;
				height: 400px;
				background-color: blueviolet;
			}
			.two {
				width: 300px;
				height: 300px;
				background-color: yellow;
			}
			.three {
				width: 200px;
				height: 200px;
				background-color: red;
			}
			.four {
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<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>
			<input v-model="msg"/>
			<button type="button" @click="funa">点我</button>
			<button type="button" @click.once="funa">只能点一次</button>
		</div>
		
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data() {
					return {
						msg: 'nb'
					}
					
				},
				methods:{
					do_one() {
						alert("one")
					},
					do_two(){
						alert("two")
					},
					do_three() {
						alert("three")
					},
					do_four() {
						alert("four")
					},
					funa() {
						alert(this.msg);
					}
				}
	
			});
		</script>
	</body>
</html>

输出结果
在这里插入图片描述

3.表单

3.1 修饰符

.lazy
默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步

.number
将用户的输入值转为 Number 类型

.trim
自动过滤用户输入的首尾空格

3.2 Vue表单

// An highlighted block
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<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" value="1" v-model="sex"/> 男
			<input type="radio" name="sex" value="0" v-model="sex"/> 女 <br>
			爱好：<span v-for="n in likes">
				<input type="checkbox" :value="n.id" v-model="selectedLikes"/>{{n.name}}
			</span> <br>
			类别：
			<select v-model="selectedType">
				<option v-for="n in types" :value="n.id">{{n.name}}</option>
			</select><br>
			备注：<textarea rows="5" cols="20" v-model="remark"></textarea> <br>
			确认<input type="checkbox" v-model="ok"/>
			<button type="button" @click="do_sub" :disabled="!ok">提交</button>
		</div>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						name: '',
						pwd: '',
						age: 10,
						sex: '1',
						likes: [
							{id:1,name:'摸摸唱'},
							{id:2,name:'贴身舞'},
							{id:3,name:'抱着睡'},
							{id:4,name:'kiss'}
						],
						types:[
							{id:1,name:'清纯'},
							{id:2,name:'御姐'},
							{id:3,name:'萝莉'},
							{id:4,name:'office lady'}
						],
						remark: '成年人不做选择..',
						ok: false,
						selectedLikes: [],
						selectedType: null
					}
				},
				methods: {
					do_sub() {
						var obj = {
							name: this.name,
							pwd: this.pwd,
							age: this.age,
							sex: this.sex,
							likes: this.selectedLikes,
							type: this.selectedType,
							remark: this.remark
						};
						console.log(obj);
					}
				}
			});
		</script>
	</body>
</html>

输出结果
在这里插入图片描述

5.vue组件传值

// An highlighted block
<!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">
			<my-button m='zs' @three_click="fnA"></my-button>
			<my-button m='王五' @four_click="fnB"></my-button>
		</div>
		<script type="text/javascript">
		const vm = new Vue({
			el:'#app',
			components:{
				'my-button':{
					props:['m'],
					template:'<button @click="do_sub">{{m}}提交审核{{n}}次</button>',
					data(){
						return{
							n:0
						}
					},
					methods:{
						do_sub(){
							let name='张三';
							let sex = '男';
							let hobby='小姐姐';
							this.n ++;
							//通过自定义事件完成
							if(this.n % 3==0)
							this.$emit('three_click',name,sex,hobby);
							if(this.n % 4==0)
							this.$emit('four_click',name,hobby);
						}
					}
				}
			},
			data:{
				
			},
			methods:{
				fnA(a,b,c){
					console.log(a,b,c)
				},
				fnB(a,b,c){
					console.log(a,b,c)
				}
			}
		})
		
		</script>
	</body>
</html>

输出结果
在这里插入图片描述

风之神樂823

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue基础语法下（样式绑定、事件处理器、form表单、组件通信）

默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步。使用方式：v-bind:class=“expression”expression的类型：字符串、数组、对象。expression的类型：字符串、数组、对象。将用户的输入值转为 Number 类型。自动过滤用户输入的首尾空格。
复制链接

扫一扫