vue基本语法及案例（二）

最新推荐文章于 2024-03-08 17:58:00 发布

Jiang呀

最新推荐文章于 2024-03-08 17:58:00 发布

阅读量148

点赞数

分类专栏：前端框架文章标签： vue javascript js html

本文链接：https://blog.csdn.net/JiangHu_Java/article/details/108093639

版权

前端框架专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文继续探讨Vue的基本语法，涵盖样式绑定、事件处理器、按键修饰符和事件修饰符的使用。通过示例代码展示如何进行样式绑定、添加事件监听、使用按键修饰符实现特定键盘行为，以及理解事件修饰符如何影响事件处理。同时，文章还讲解了vue表单的v-model双向数据绑定，并介绍了修饰符的应用，如.number用于确保表单输入为数值类型。

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

前言

我在之前讲述了一些vue的基本语法，这篇博客依旧是讲述vue的基本语法。

样式绑定

class绑定

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

测试代码：

	<div id="app">
		<div :class='textColor'>
			有人吗
		</div>
	</div>	
	<script type="text/javascript">
		var  vue=new Vue({
			el:'#app',
			data:function(){
				return{
					textColor:'cl',
				}
			}
		});
	</script>

测试结果：

在这里插入图片描述

style绑定

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

测试代码：

	<div id="app">
		<div :style='textColor'>
			有人吗
		</div>
	</div>	
	
	<script type="text/javascript">
		var  vue=new Vue({
			el:'#app',
			data:function(){
				return{
					textColor:'color:pink;',
				}
			}
		});
	</script>

测试结果：

在这里插入图片描述

事件处理器

事件监听可以使用v-on 指令

测试代码（为按钮添加点击事件）：


	<div id="app">
		事件处理器 v-on
		<button @click='onClick'>56666</button><br />
	</div>	
	<script type="text/javascript">
		var  vue=new Vue({
			el:'#app',
			data:function(){
				return{
					text:'',
					ret:''
				}
			},
			methods:{
				onClick:function(){
					alert(111);
						//this.ret=this.text;
				}
			}
		});
	</script>

显示效果：
在这里插入图片描述

按键修饰符

Vue允许为v-on在监听键盘事件时添加按键修饰符

常用的按键

  .enter
  .tab
  .delete (捕获 "删除" 和 "退格" 键)
  .esc
  .space
  .up
  .down
  .left
  .right
  .ctrl
  .alt
  .shift
  .meta

测试代码：

	<div id="app">
		按键修饰符 双向绑定
		{{ret}}
		<input type="text" v-model="text" />
		<button @click="onClick" >传递</button>
	</div>	
	<script type="text/javascript">
		var  vue=new Vue({
			el:'#app',
			data:function(){
				return{
					text:'',
					ret:''
				}
			},
			methods:{
				onClick:function(){
						this.ret=this.text;
				}
			}
		});
	</script>

显示效果（在文本框输入字符，按回车键会在左侧显示出来，其中运用了v-model和文本框的双向绑定）：
在这里插入图片描述

事件修饰符

Vue通过由点(.)表示的指令后缀来调用修饰符

 .stop
 .prevent
 .capture
 .self
 .once

	<div id="app">
		按键修饰符 双向绑定
		{{ret}}
		<input type="text" v-model="text" />
		<button @click.once="onClick" >一次传递</button>
		<input type="text" @keyup.enter="onClick" v-model="text" />
		<button @click="onClick" >多传递</button> 
	</div>	
	<script type="text/javascript">
		var  vue=new Vue({
			el:'#app',
			data:function(){
				return{
					text:'',
					ret:''
				}
			},
			methods:{
				onClick:function(){
						this.ret=this.text;
				}
			}
		});
	</script>

测试结果：
在这里插入图片描述
用.once修饰的事件只会渲染一次！

vue 表单

用v-model指令在表单控件元素上创建双向数据绑定！

使用Vue中的v-model指令进行绑定数据，实现简单的Vue表单

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的基本语法</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<body>
<div id="app">
   <h1>Vue表单</h1>
	用户名：<input v-model="uname" style="width:200px;height:15px;" placeholder="请输入用户名"><br/>
	密&nbsp;&nbsp;码：<input v-model="upwd" type="password" style="width:200px;height:15px;" placeholder="请输入密码"><br/>
	<span>性别:</span>
	<input type="radio"  value="one" name="sex" v-model="sex">男
	<input type="radio"  value="two" name="sex" v-model="sex">女
	<br>
    <span>爱好:</span>
	<input type="checkbox"  value="吃饭"     v-model="checkedNames">吃饭
	<input type="checkbox"  value="睡觉"     v-model="checkedNames">睡觉
	<input type="checkbox"  value="打豆豆"   v-model="checkedNames">打豆豆
	<br>
	<span>地址:</span>
	  <select v-model="selected">
		<option disabled value="">-----请选择-----</option>
		<option>湖南省</option>
		<option>湖北省</option>
		<option>四川省</option>
	  </select><br/>
	 备注：
	<p style="white-space:pre-line;"></p>
             <textarea v-model="message" ></textarea><br/>
	<input type="submit" @click="doSubmit()" />
</div>

<script type="text/javascript">
	var example1 = new Vue({
	     el:'#app',
		data:function(){
			return {
				 uname:null,
				 upwd:null,
				 checkedNames: [],
				 one:'男',
				 two:'女',
				 sex:'one',
			     selected:'',
				 message:''
			}
		},
		methods: {
		doSubmit: function() {
			console.log('提交方法被调用了！');
			var obj = {
				uname: this.uname,
				upwd: this.upwd,
				sex: this.sex,
				checkedNames:this.checkedNames,
				selected:this.selected,
				message:this.message
			}
			console.log(obj);
		}
	}
	})
</script>
</body>
</html>

显示结果（点击提交数据显示在控制台）：
在这里插入图片描述

修饰符

1 .lazy
默认情况下， v-model在input事件中同步输入框的值与数据，
但你可以添加一个修饰符lazy，从而转变为在change事件中同步
2 .number
将用户的输入值转为 Number 类型
3 .trim
自动过滤用户输入的首尾空格

测试代码（.number测试）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<!-- 引入Vue的js文件 -->
	<script src="js/vue.js"></script>
	<body>
		<div id="app">
			<input v-model.number="age" type="number">
			{{age}}
		</div>
		
		<script type="text/javascript">
			var  vue=new Vue({
				el:'#app',
				data:function(){
					return{
						age:''
					}
				}
			});
		</script>
	</body>
</html>