【vue】插值表达式、v-bind、v-on（12.31上午实训）

小张哎！

已于 2022-01-26 20:28:17 修改

阅读量682

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

于 2021-12-31 22:22:07 首次发布

本文链接：https://blog.csdn.net/qq_45746744/article/details/122262599

版权

vue 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

vue 是一套用于构建用户界面的前端框架。
vue 框架的特性，主要体现在如下两方面：
① 数据驱动视图
② 双向数据绑定

vue 的指令

1、{{ }} 语法
vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式
在这里插入图片描述

2、属性绑定指令 v-bind
由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--1.vue能够影响区域-->
		<div id="app">
		        姓名：{{uname}}<br />
		        性别：{{gender}}<br />
		        身高：{{height}}<br />
		        
		        
		        姓名：<input type="text" v-bind:placeholder="inputvalue" name="name"  />    
		    <br />
		    <img v-bind:src="imgsrc" />
		    <br />
		    <input type="text" :placeholder="inputvalue" name="name"  />
		    <br />
		    <img :src="imgsrc" />
		    <br />
		    {{height+1}},{{ok==true?'真':'假'}}
		</div>
		
		<!--2.引入vue.js-->
		<script type="text/javascript" src="./js/vue.js" ></script>
		
		<script>
			//3.创建vue实例
			const vm = new Vue({
				el:'#app',   //元素id为app
				data:{        //model的数据（data）
					uname:'张权益',
					gender:'男',
					height:1.80,
					ok:true,
					inputvalue:'请输入姓名',
					imgsrc:'http://cn.vuejs.org/images/logo.png',
				}
			});
			
		</script>
	</body>
</html>

在这里插入图片描述

3、事件绑定指令 v-on
vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。
在这里插入图片描述

通过 v-on 绑定的事件处理函数，需要在methods 节点中进行声明。
在这里插入图片描述

由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 @ ）。
在这里插入图片描述

在使用 v-on 指令绑定事件时，可以使用 ( ) 进行传参。
在这里插入图片描述

$ event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象event被覆盖的问题。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			count:{{count}}
			<!--v-on:事件名=“函数”-->
			<button v-on:click="addCount"> +1 </button>&nbsp;&nbsp;
			<button @click="addCount"> 加1 </button>
		</div>
		
		
		<script type="text/javascript" src="./js/vue.js" ></script>
		
		<script>
			const vm = new Vue({
				el:'#app', 
				data:{ 
					count:0,
				},
				methods:{
					addCount(e){   //e是事件对象
						const bgcolor = e.target.style.backgroundColor   //获得背景色
						e.target.style.backgroundColor = ( bgcolor === 'red'?'':'red')   //更改背景色
						this.count +=1   //count值加1，自动渲染{(count)}
					}
				}
			});
			
		</script>
		
	</body>
</html>

在这里插入图片描述

在事件处理函数中调用preventDefault() 或 stopPropagation() 是非常常见的需求。因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下：
在这里插入图片描述

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!--@事件名.prevent=“函数” 阻止默认行为-->
			<a href="http://www.baidu.com" @click.prevent="clickBaidu">baidu</a>
			<br />
			<!-- @keyup.esc 松开esc键触发 -->
			地址：<input type="text" name="address" @keyup.esc="clearInput" />
		</div>
		
		<script type="text/javascript" src="./js/vue.js" ></script>
		
		<script>
			const vm = new Vue({
				el:'#app', 
				data:{ 
					address:''
				},
				methods:{
					clickBaidu(){
						alert(1)
					},
					clearInput(e){
						e.target.value = ''
					}
				}
				
			});
			
		</script>
	</body>
</html>

在这里插入图片描述
在不加.present的情况下<a href="http://www.baidu.com" @click="clickBaidu">baidu</a>点击确定后会自动跳转到百度界面，加了之后<a href="http://www.baidu.com" @click.prevent="clickBaidu">baidu</a>点击页面不跳转。
下面地址的文本框内地址：<input type="text" name="address" @keyup.esc="clearInput" />输入文字后，按esc键可以清除其中内容。