Vue的基本使用

最新推荐文章于 2023-07-25 17:19:48 发布
最新推荐文章于 2023-07-25 17:19:48 发布
阅读量675 收藏 1
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62520626/article/details/122861747
版权
  • 属性值的监听
  • class属性的绑定
  • style属性的绑定
  • v-show指令
  • v-if指令
  • v-else-if指令
  • v-for循环指令
  • 遍历
  • 事件对象
  • 键盘事件
  • 鼠标事件


1.属性值的监听

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			你的姓：	<input type="text" name="" id="" value="" v-model="xing" />
			<br>	
			你的名：<input type="text" name="" id="" value=""  v-model="ming" />
			
			<br>
			<!-- 全名：<input type="text" name="" id="" value="" v-model="xing.concat(' ').concat(ming)" /> -->
			
			全名：<input type="text" name="" id="" value="" v-model="fullname" />
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				xing:'',
				ming:'',
				fullname:''
			},
			//属性的监听
			watch:{
				//参数1，属性变化后的新值，参数2，属性变化之前的旧值
				xing:function(newValue,oldValue){
					console.log("xing属性的值：新值："+newValue+"===旧值"+oldValue)
					this.xing=newValue;
				},
				ming:function(newValue,oldValue){
					console.log("名属性的值：新值："+newValue+"===旧值"+oldValue)
					
					this.fullname=this.xing.concat(' ').concat(newValue);
				}
			}
		})
	</script>
</html>


2.属性监听的第二种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			你的姓：	<input type="text" name="" id="" value="" v-model="xing" />
			<br>	
			你的名：<input type="text" name="" id="" value=""  v-model="ming" />
			
			<br>
			<!-- 全名：<input type="text" name="" id="" value="" v-model="xing.concat(' ').concat(ming)" /> -->
			
			全名：<input type="text" name="" id="" value="" v-model="fullname" />
		</div>
	</body>
	<script type="text/javascript">
		var vm=new Vue({
			data:{
				msg:'hello',
				xing:'',
				ming:'',
				fullname:''
			}
		})
		//手动挂载模板 
		vm.$mount('#box');
		//调用vue实例的全局方法，来进行属性值的监听。
		vm.$watch('xing', function (newVal, oldVal) {
		  // 做点什么
		  console.log("xing属性的值：新值："+newVal+"===旧值:"+oldVal)
		  
		})
		
		vm.$watch('ming', function (newVal, oldVal) {
		  // 做点什么
		  console.log("ming属性的值：新值："+newVal+"===旧值:"+oldVal)
		})
		//获取vue的管理的模板标签对象
		var obj=vm.$el;
		console.log(obj);
		
		var msg=vm.$data.msg;
		console.log(msg);
		
	</script>
</html>


3.class属性的绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.aClass {
				font-size: 30px;
				color: red;
			}
			
			.bClass {
				background-color: yellow;
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- 普通的写法，就是个class属性 -->
			<h1 class="aClass">1111111111111111111111111111</h1>
			<h1 class="aClass bClass">1111111111111111111111111111</h1>
			<!-- vue的绑定class属性 注意 用单引号括起来 -->
			<h1 v-bind:class="'aClass'">2222222222222222222222</h1>
			<!-- vue绑定多个class属性的值，使用数组-->
			<h1 v-bind:class="['aClass','bClass']">2222222222222222222222</h1>
			
			<!-- vue 常用的绑定class属性的写法 使用对象
				aClass:false 表示aClass不生效
				bClass:true 表示bClass生效
			 -->
			<h1 v-bind:class="{aClass:false,bClass:true}">333333333333333333333333333</h1>
			
			<!-- 让true 和 false 可以定义成变量 -->
			<h1 v-bind:class="{aClass:a,bClass:b}">4444444444444444444444444</h1>
			
			
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello',
				a:true,
				b:true
			}
		})
	</script>
</html>


4.样式的切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.aClass {
				font-size: 30px;
				color: red;
				background-color: yellow;
			}
		
			.bClass {
				font-size: 30px;
				color: blue;
				background-color:palegreen;
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!--  常用的写法-->
			<h1 :class="{'aClass':aflag,'bClass':bflag}" @click="change()">一行文字222222222222222222222</h1>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello',
				aflag:true,
				bflag:false
			},
			methods:{
				change(){
					this.aflag=!this.aflag;
					this.bflag=!this.bflag;
				}
			}
		})
	</script>
</html>


5.style属性的绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- 普通的方式 -->
			<h1 style="color: #FF0000;background: yellow;">111111111111111111111111111111</h1>
			<!-- vue 绑定style属性的方式 -->
			<h2 v-bind:style="{'color':'red','background-color':'blue'}">22222222222222</h2>
			
			<!-- css属性的值，写成变量  -->
			
			<h2 :style="{'color':mycolor,'background-color':mybgcolor}">33333333333333333333</h2>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello',
				mycolor:'#ff0000',
				mybgcolor:'yellow'
			}
		})
	</script>
</html>


6.切换样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!--绑定style属性 常用的写法  -->
			<h1 :style="{'color':color,'background-color':bgcolor}" @click="change(flag=!flag)">222222222</h1>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello',
				flag:false,
				color:'yellow',
				bgcolor:'red'
			},
			methods:{
				change(f){
					/* if(this.flag){
						this.color='blue',
						this.bgcolor='pink'
					}else{
						this.color='yellow',
						this.bgcolor='red'
					}
					this.flag=!this.flag; */
					
					 if(f){
						this.color='blue',
						this.bgcolor='pink'
					}else{
						this.color='yellow',
						this.bgcolor='red'
					}
					

				}
			}
		})
	</script>
</html>


7.v-show指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				
				height: 200px;
				width: 200px;
				background-color: #98FB98;
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- v-show 可以控制元素的隐藏和显示，false 隐藏，true 显示 
			
			通过 display: none; 来做的
			-->
			<div id="d1" v-show="flag">
				
			</div>
			<button type="button" @click="hidden()">隐藏</button>
			<button type="button" @click="show()">显示</button>
			<button type="button" @click="toggle(flag=!flag)">切换</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello',
				flag:true
			},
			methods:{
				hidden(){
					this.flag=false;
				},
				show(){
					this.flag=true;
				},
				toggle(f){
					this.flag=f;
				}
			}
		})
	</script>
</html>


8.v-if指令

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
    
    v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
    
    相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
    
    一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				
				height: 200px;
				width: 200px;
				background-color: #98FB98;
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- v-if 可以控制元素的隐藏和显示，false 隐藏，true 显示
				通过创建和销毁dom元素来实现的。
				v-if 一开始就是false的话 不会预先创建dom元素
				
			-->
			<div id="d1" v-if="flag">
				
			</div>
			<button type="button" @click="hidden()">隐藏</button>
			<button type="button" @click="show()">显示</button>
			<button type="button" @click="toggle(flag=!flag)">切换</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello',
				flag:true
			},
			methods:{
				hidden(){
					this.flag=false;
				},
				show(){
					this.flag=true;
				},
				toggle(f){
					this.flag=f;
				}
			}
		})
		
		
	/* v-if vs v-show
	
	v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
	
	v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
	
	相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
	
	一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 */
	</script>
</html>


9.v-else指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<h1 v-if="flag">真的爱我</h1>
			<h1 v-else>你不爱我</h1>
			<button type="button" @click="change(flag=!flag)">切换</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello',
				flag:true
			},
			methods:{
				change(f){
					this.flag=f;
				}
			}
			
		})
	</script>
</html>


10.v-else-if指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<h1>请输入你的成绩 0---100 分</h1>
			<input type="" name="" id="" value="" v-model="score" />
			<h2 v-if="score>=0&&score<60">成绩不及格</h2>
			<h2 v-else-if="score>=60&&score<70">成绩很差</h2>
			<h2 v-else-if="score>=70&&score<80">成绩中等</h2>
			<h2 v-else-if="score>=80&&score<90">成绩良好</h2>
		
			<h2 v-else-if="score>=90&&score<=99">成绩优秀</h2>
			<h2 v-else-if="score==100">成绩满分，很棒的！</h2>
			<h2 v-else>成绩不合法</h2>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello',
				score:0
			},
			
		})
	</script>
</html>


11.v-for循环指令

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute： 建议尽可能在使用 v-for 时提供 key attribute

(容器中的当前元素,元素的索引) in 容器 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<ul>
				<!-- 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，
				从而重用和重新排序现有元素，
				你需要为每项提供一个唯一 key attribute： 
				建议尽可能在使用 v-for 时提供 key attribute
				-->
				<!-- (容器中的当前元素,元素的索引) in 容器 -->
				<li v-for="(ele,index) in arr" :key="index">
					{{index}}----{{ele}}
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello',
				arr:[10,20,30,40,50,60,70,80,90,100]
			}
		})
	</script>
</html>


12.遍历json对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<ul>
				<!-- (值,键,键值对索引) in json对象 -->
				<li v-for="(value,key,index) in obj" :key="key">
				{{key}}---{{value}}---{{index}}
					
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello',
				obj:{
					'username':'张三',
					'age':23,
					'sex':'男'
				}
			}
		})
	</script>
</html>


13.遍历对象数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<ul>
				<!-- (值,键,键值对索引) in json对象 -->
				<li v-for="(obj,index) in arr" :key="index">
					
					{{obj.username}}---{{obj.age}}---{{obj.sex}}
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				msg: 'hello',
				arr: [{
					'username': '张三',
					'age': 23,
					'sex': '男'
				}, {
					'username': '李四',
					'age': 24,
					'sex': '女'
				}, {
					'username': '王五',
					'age': 25,
					'sex': '男'
				}]
			}
		})
	</script>
</html>


14.v-if和v-for不建议在同一元素上同时使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<ul>
				<!-- 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，
				从而重用和重新排序现有元素，
				你需要为每项提供一个唯一 key attribute： 
				建议尽可能在使用 v-for 时提供 key attribute
				-->
				<!-- (容器中的当前元素,元素的索引) in 容器 -->
				
				<!-- 注意我们不推荐在同一元素上使用 v-if 和 v-for -->
				<li v-for="(ele,index) in arr" :key="index" v-if="index%2==0">
					{{index}}----{{ele}}
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello',
				arr:[10,20,30,40,50,60,70,80,90,100]
			}
		})
	</script>
</html>


15.案例演示（数组修改删除怎么触发视图更新）

 数组更新检测
         变更方法
         
         Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
         
             push()
             pop()
             shift()
             unshift()
             splice()
             sort()
             reverse()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<ul>
				<li v-for="(obj,index) in jsonArr" :key="index">
					<b>姓名：</b>{{obj.name}}----<b>年龄：</b>{{obj.age}}---<b>性别：</b>{{obj.sex}}
					<a href="#" @click="delObj(index,obj.name)">删除</a>----<a href="#" @click="update(index)">修改</a>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				obj: {
					"name": "老沈",
					"age": 1,
					"sex": "男"
				},
				jsonArr: [{
					"name": "张三",
					"age": 100,
					"sex": "女"
				}, {
					"name": "李四",
					"age": 200,
					"sex": "男"
				}, {
					'name': '王五',
					'age': 300,
					'sex': '男'
				}]
			},
			methods: {
				//根据元素的索引来删除。
				delObj(index,name) {
					if(confirm("确认删【"+name+"】除吗?")){
						this.jsonArr.splice(index,1);
					}
				},
				//根据索引来修改元素
				update(index){
					this.jsonArr[index]=this.obj;
					console.log(this.jsonArr);
					//当你调用 reverse() 这个方法，数组元素发生变化，会触发视图的更新。
					this.jsonArr.reverse().reverse();
					
					//当你调用 splice() 这个方法，数组元素发生变化，会触发视图的更新。
					//this.jsonArr.splice(index,1,this.obj);
					
				}
			}
		})
		
		
		/* 
		 数组更新检测
		 变更方法
		 
		 Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
		 
		     push()
		     pop()
		     shift()
		     unshift()
		     splice()
		     sort()
		     reverse()

		 
		 
		 */
	</script>
</html>


16.json对象增加属性或者删除属性怎么触发视图的更新

对json对象中，原来有的属性，进行修改，可以触发视图更新

使用vue提供的方法，对json对象中的属性，进行添加和删除操作，可以触发视图的更新

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<ul>
				<li  v-for="(value,key,index) in obj" :key="index">{{key}}-------{{value}}</li>
			</ul>
			<button type="button" @click="update()">给json对象中增加属性或删除属性要触发视图更新</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				obj: {
					"name": "老沈",
					"age": 1,
					"sex": "男"
				}
			},
			methods:{
				update(){
					//对json对象中，原来有的属性，进行修改，可以触发视图更新
					// this.obj.name="老王";
					// this.obj.age=10;
					// this.obj.sex="女";
					//给JOSN对象增加或删除属性，这样做，json对象中的属性发生变化了，但是触发不了视图的更新
					// this.obj.sal=8888;
					// delete this.obj.age;
					// console.log(this.obj);
					
					//使用vue提供的方法，对json对象中的属性，进行添加和删除操作，可以触发视图的更新
					this.$set(this.obj,'sal','8888888');
					this.$delete(this.obj,'age');
					
				}
			}
		})
	</script>
</html>


17.案例练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

		<div id="box">

			<center>
				<h1>添加学生</h1>
				姓名：<input type="text" name="" id="" value="" v-model="name" />
				年龄：<input type="text" name="" id="" value="" v-model="age" />
				<button type="button" @click="addEle()">添加学生</button>
				<h3>学生信息表</h3>
				<table border="1" cellspacing="0" cellpadding="" width="60%">
					<tr>
						<th width="30px"><input type="checkbox" id="" value="" /></th>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>操作</th>
					</tr>
					<tr align="center" v-for="(obj,index) in jsonArr" :key="index">
						<td width="30px"><input type="checkbox" id="" value="" /></td>
						<td>{{index+1}}</td>
						
						<td>{{obj.name}}&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">修改</a></td>
						<td>{{obj.age}}&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">修改</a></td>
						<td><a href="#">删除</a></td>
					</tr>

					<tr align="center">
						<td colspan="4"><a href="#" @click="delAll()">全部删除</a>
						<a href="#">删除所选</a>
						</td>
						
					</tr>

				</table>
			</center>


		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				name:'',
				age:'',
				jsonArr: []
			},
			methods:{
				addEle(){
					//获取表单填的数据，添加到数组中
					var name=this.name;
					var age=this.age;
					if(!name||!age){ //空串转为false
						alert("姓名或年龄不能为空")
						return;
					}
					//封装为json对象
					var jsonObj={'name':name,'age':age};
					//添加到数组中
					this.jsonArr.push(jsonObj);
					//清空一下表单数据
					this.name='';
					this.age='';
				},
				delAll(){
					if(confirm("确认删除全部吗？")){
						this.jsonArr=[];
					}
					
				}
			}
		})
		

	</script>
</html>


18.事件对象

vue传递事件对象 $event 
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- vue传递事件对象 $event 
			有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
			-->
			<button type="button" @click="change($event)">一个按钮</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello'
			},
			methods:{
				change(e){
					//alert(e.type);
					e.target.style.background="red";
				}
			}
		})
	</script>
</html>


19.使用事件对象阻止冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#wai{
				height: 200px;
				width: 200px;
				background: red;
			}
		</style>
		<!-- 引入vue.js 库文件 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<div id="box">
			<div id="wai" @click="wai($event)">
				<button @click="nei($event)" type="button">按钮</button>
			</div>
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				msg: 'Hello'
			},
			methods:{
				wai(e){
					//调用事件对象中的方法，来阻止冒泡
					e.stopPropagation();
					alert("外")
				},
				nei(e){
					e.stopPropagation();
					alert("内")
				}
			}
		})
	</script>
</html>


20.使用vue的方式阻止事件冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#wai{
				height: 200px;
				width: 200px;
				background: red;
			}
		</style>
		<!-- 引入vue.js 库文件 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<div id="box">
			<!-- 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
			
			为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的 -->。
			<!-- stop 事件修饰 stop 可以阻止冒泡 -->
			<div id="wai" @click.stop="wai()">
				<button @click.stop="nei()" type="button">按钮</button>
			</div>
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				msg: 'Hello'
			},
			methods:{
				wai(){
					alert("外")
				},
				nei(){
					alert("内")
				}
			}
		})
	</script>
</html>


21.阻止元素默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#wai{
				height: 200px;
				width: 200px;
				background: red;
			}
		</style>
		<!-- 引入vue.js 库文件 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<div id="box">
			<!-- 阻止a标签默认跳转页面的行为 -->
			<a href="http://www.163.com" @click="intoPage($event)">进入网易</a>
			
			<!-- 阻止表单默认的同步提交行为 -->
			<form action="123.html" method="get" @submit="tijiao($event)">
				<input type="text" name="username" id="" value="" />
				<input type="submit" value="提交表单"/>
			</form>
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				msg: 'Hello'
			},
			methods:{
				intoPage(e){
					//调用事件对象的方法，来阻止元素的more行为
					e.preventDefault();
					alert("执行点击事件");
				},
				tijiao(e){
					e.preventDefault();
					alert("异步提交");
				}
			}
		})
	</script>
</html>


22.使用vue的方式阻止元素的默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#wai{
				height: 200px;
				width: 200px;
				background: red;
			}
		</style>
		<!-- 引入vue.js 库文件 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<div id="box">
			<!-- 阻止a标签默认跳转页面的行为
			 
			 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
			 
			 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
			 
			 
			 修饰符可以串联
			 <a v-on:click.stop.prevent="doThat"></a>
			 
			 -->
			<a href="http://www.163.com" @click.prevent="intoPage()">进入网易</a>
			
			<!-- 阻止表单默认的同步提交行为 -->
			<form action="123.html" method="get" @submit.prevent="tijiao()">
				<input type="text" name="username" id="" value="" />
				<input type="submit" value="提交表单"/>
			</form>
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				msg: 'Hello'
			},
			methods:{
				intoPage(){
				
					alert("执行点击事件");
				},
				tijiao(){
			
					alert("异步提交");
				}
			}
		})
	</script>
</html>


23.让事件执行一次

.once 事件修饰符，让事件只执行一次  

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- .once 事件修饰符，让事件只执行一次  -->
			<button type="button" @click.once="show()">一个按钮</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello'
			},
			methods:{
				show(){
					alert("弹出一次");
				}
			}
		})
	</script>
</html>


24.键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<input type="text" name="" id="" value="" @keypress="show($event)"/>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello'
			},
			methods:{
				show(e){
					//使用事件对象来获取键码进行判断，但是太繁琐
					if(e.keyCode==13){
						alert("开始搜索");
					}
				}
			}
		})
	</script>
</html>


25.键盘事件vue的方式来监听某个键

按键修饰符
             为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
             
                 .enter
                 .tab
                 .delete (捕获“删除”和“退格”键)
                 .esc
                 .space
                 .up
                 .down
                 .left
                 .right

             
             使用 keyCode attribute 也是允许的：
             
             <input v-on:keyup.13="submit">

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- 按键修饰符
			 为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
			 
			     .enter
			     .tab
			     .delete (捕获“删除”和“退格”键)
			     .esc
			     .space
			     .up
			     .down
			     .left
			     .right

			 
			 使用 keyCode attribute 也是允许的：
			 
			 <input v-on:keyup.13="submit">
			 -->
			
			<input type="text" name="" id="" value="" @keypress.enter="show($event)" />
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				msg: 'hello'
			},
			methods: {
				show() {
					alert("开始搜索");
				}
			}
		})
	</script>
</html>


26.鼠标事件的按键修饰符

  2.2.0 新增
            
                .left
                .right
                .middle

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- 鼠标按钮修饰符
			
			    2.2.0 新增
			
			    .left
			    .right
			    .middle -->

			<button type="button" @mousedown.left="show($event)">一个按钮</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'hello'
			},
			methods:{
				show(e){
					/* //e.button==0   0 1 2
					if(e.button==0){
						alert("鼠标按下");
					} */
					alert("鼠标按下");
				}
			}
		})
	</script>
</html>

可儿可爱
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中收集input[type=“text”]的值
richest_qi的博客
05-10 942
文章目录v-modelevent.targetref vue里收集input[type=“text”]的值，有以下方法： v-model event.target ref 本例中，输入后点击回车键触发handleKeyup回调，回调会打印出输入框中的数据，之后便清空输入框中数据。 v-model <body> <div id="root"> <label>用户名：<input type="text" v-model="username"
Vue 四种常用获取input值的方法
04-12 7012
1. v-model 表单输入绑定 2. @input 监听输入框 3. @change 监听输入框 4. ref 获取数据
vue中input标签的使用
q850593913的博客
05-26 1万+
vue中input标签的使用 普通input标签 <input type="text" value="value" placeholder="placeholder" name="name"> type 规定 input 元素的类型, value 规定 input 元素的值 placeholder 规定帮助用户填写输入字段的提示 name 用于对提交到服务器后的表单数据进行标识 在客户端通过 JavaScript 引用表单数据 vue中的input标签 <inpu
设置文本框的placeholder的样式
babulongbo的博客
09-10 1364
Input:-webkit-input-placeholder{ ...Style } textarea:-webkit-textarea-placeholder{ ...Style }
Vue基本使用之对象提供的属性功能
10-17
在本文中，我们将深入探讨Vue基本使用中的对象提供的属性功能，包括过滤器、计算属性与监听属性，以及Vue对象的生命周期。 首先，我们来看**过滤器（Filters）**。过滤器是Vue提供的一种文本格式化机制，允许开发者...
vue基本使用.md
04-15
vue基本使用.md
vue基本使用–refs获取组件或元素的实例
01-19
使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取 注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods 添加ref属性 这是H1 <hello ref=ho></hello> <...
vue脚手架及vue-router基本使用
08-27
本文将详细介绍如何使用 Vue CLI 和 Vue Router 进行基本操作。 首先，确保已安装 Vue CLI。在安装好 Vue CLI 并执行 `cnpm install`（推荐使用 cnpm，因为它比 npm 更快，且更少出现安装问题）之后，你可以开始...
Vue3输入框（Input）
最新发布
Mr Dear的博客
07-25 7871
通过鼠标或键盘输入内容，是最基础的表单域的包装，支持：三种尺寸；设置前缀后缀；前置后置标签；清除功能；密码框；数字提示；总之，功能丰富，简单易用😁😁
vue基础(1)
lllznb的博客
10-11 160
一、vue中常用的指令 1.内容绑定，事件绑定 v-text:设置标签的内容(textContent),默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容 v-html:设置元素的innerHTML,内容中有html结构会被解析为标签 v-on:为元素绑定事件，事件名不需要写on，指令可以简写为@，绑定的方法定义在methods属性中，方法内部通过this关键字可以访问定义在data中的数据 v-on补充:事件绑定的方法写成函数调用的形式，可以自定义传入参数 //doit是methons中的方法
vue三种常用获取input值写法
热门推荐
June.1
03-20 10万+
1. v-model 表单输入绑定 使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 <template> <div> <input class="login-input" type="text" v-model="username" placeholder="请输入账...
Vue.js 表单控件绑定 v-model
weixin_34384681的博客
10-15 357
v-model 主要用于input、textarea、select等表单控件元素上创建双向数据绑定，所谓双向绑定就是js中vue实例化的data对象的数据与其渲染的dom元素上的内容保持一致1、text 文本<divid="app"> <h1>`message`</h1> <inputtype="text"v-...
关于input type=“text”文本框的 默认宽度
weixin_30670965的博客
06-30 1631
当文本框的td设置宽度设置为百分比时，出现了一些没有搞懂的地方。 类选择设置td的width 为百分比时，通常 要定义父元素的宽度，在我的实战中父元素只能是table，给定table时。 而且这就是说一行的行宽度设置了。当一行只有两个单元格td时，他们加起来应该是100%。（这个是我的猜想）当超出100%时会不起作用。？ 而关于input type=“text”文...
type=“text”只能输入数字！
记忆、深处
01-07 5113
&amp;lt;input type='text' onkeyup=&quot;this.value=this.value.replace(/[^0-9]+/,'');&quot; /&amp;gt;/只能输入非负整数 &amp;lt;input type='text' onkeyup=&quot;this.value=this.value.replace(/[^0-9-]+/,'');&quot; /&amp;gt;只能输入整数
vue input,textarea失去焦点调用函数方法
qq_24612793的博客
07-30 3万+
&lt;input type="number" class="num" value="1" @blur.prevent="changeCount()"&gt; methods:{ changeCount:function(){ }, }    
Vue 三种常用获取input值的方法
weixin_60463255的博客
11-04 9298
1. v-model 表单输入绑定 //使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理 <template> <div> <input class="login-input" type="text" v-model="username" placeholder="请输入账号"> <input class="login-input" type="pass
Vue基础与常见指令
Jinx_baobao的博客
03-21 1000
1、Vue简介 1.1 什么是Vue Vue 是一种用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 1.2 Vue的特点是什么 1、组件化，清晰的文档结构 2、声明渲染，数据渲染视图（页面） <body> <!-- 写视图层，我们要展示的内容 --&
Vue基本使用
05-30
以下是 Vue 的基本使用方法： 1. 引入 Vue.js 库 ```html <script src="https://cdn.jsdelivr.net/npm/vue"> ``` 2. 创建 Vue 实例 ```javascript var app = new Vue({ // options }) ``` 在实例化 Vue 时，你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值