【Vue 学习】- Vue常用系统指令

1 v-on 指令

v-on 指令用来监听 DOM 事件,并在触发时运行一些 JavaScript 代码

1.1 v-on:click

v-on:click 是用来点击事件的指令,可以和 button 标签一起使用,看一下案例:

  • 使用v-on:click绑定fun函数
  • 通过 methods 方法编写方法体
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<title>v-on:click</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}
			<button v-on:click="fun1('twoStar')">点击</button>	<!--v-on:click指令绑定fun1函数-->
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
			    message:"oneStar"
			},
			methods:{		//methods(方法)表示一个具体的操作, 主要写 业务逻辑
				fun1:function (msg) {		//方法体
					this.message=msg;
				}
			}
		});
	</script>
</html> 

点击后message的值改变

image

image

1.2 v-on:keydown

v-on:keydown 指令表示键盘按下事件,这里做一个案例:让键盘只有按下 0~9 才有效,其他按键均无效

  • 创建text,用来键盘输入显示,绑定函数并传入 event 参数
  • 创建方法体
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
 
	<head>
		<meta charset="utf-8" />
		<title>v-on:keydown</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
 
	<body>
		<div id="app">
			<!--创建text,用来键盘输入显示,绑定函数并传入 event 参数-->
			<input type="text" v-on:keydown="fun2($event)">
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
			    //方法体
			    fun2:function (event) {
			        var keyCode = event.keyCode;	//定义按键事件
			        if(keyCode < 48 || keyCode > 57){	//判断按键值
                        event.preventDefault();		//按键不生效
					}
                }
			}
		});
	</script>
</html>

只有在text中输入 0~9 数字才生效

image

1.3 v-on:mouseover

v-on:mouseover 指令表示鼠标移动到某个文件域事件,案例:在一个文件域上模拟鼠标移动和阻止事件传播

  • 在div上创建一个textarea区域
  • 设置鼠标悬停事件
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<title>v-on:mouseover</title>
		<style>
			#div {
				background-color: red;
				width: 200px;
				height: 200px;
			}
		</style>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
 
	<body>
		<div id="app">
			<div v-on:mouseover="fun1" id="div">
				<textarea v-on:mouseover="fun2($event)">文件域</textarea>
			</div>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
				fun1:function () {
					alert("鼠标悬停在div上");
                },
				fun2:function (event) {
					alert("鼠标悬停在textarea上");
					event.stopPropagation();
                }
			}
		});
	</script>
</html>

image

image

1.4 事件修饰符

在 Vue.js 中,提供了事件修饰符来处理 DOM 事件细节,通过由点(.)表示的指令后缀来调用修饰符,常用的事件如下:

  • .stop:触发停止事件
  • .prevent:触发阻止事件
  • .capture:捕获事件
  • .self:触发自己的事件
  • .once:只执行一次事件

这里演示 prevent 阻止事件,先创建提交到百度的表单,然后阻止其跳转

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<title>v-on:事件修饰符</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
 
	<body>
		<div id="app">
			<form v-on:submit.prevent action="http://www.baidu.com" method="get">
				<input type="submit" value="提交">
			</form>
		</div>
	</body>
	
	<script>
		//view model
		new Vue({
			el:"#app"
		});
	</script>
</html>

1.5 按键修饰符

按键修饰符是获取按下键盘的事件,Vue 允许为 v-on 在监听键盘事件时添加按键修饰符,全部的按键别名如下:

  • .enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift
  • .meta

以 .enter 为例

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<title>v-on:按键修饰符</title>
 
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
 
	<body>
		<div id="app">
			<input type="text" v-on:keydown.enter="fun($event)">
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
			    fun:function () {
					alert("按下了enter键")
                }
			}
		});
	</script>
</html>

2 v-text 、v-html、v-blind

2.1 v-text 与 v-html

  • v-text:显示原文本
  • v-html:以标签内容显示
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-text与v-html</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-text="message"></div>	<!--显示文本-->
			<div v-html="message"></div>	<!--显示标签内容-->
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				message:"<h1>oneStar</h1>"
			}
		});
	</script>
</html>

image

2.2 v-blind

在前面使用插值表达式的时候,都是在标签内部写插值表达式,如果要给标签的属性赋值,绑定插值表达式,那就要用到 v-blind 指令

来看案例:在设置HTML文本字体颜色的时候,可以使用 v-blind 来绑定颜色

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<title>v-blind</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
    
	<body>
		<div id="app">
            <font size="5" v-bind:color="ys1">派大星</font>
            <font size="5" :color="ys2">海绵宝宝</font>
        </div>
	</body>
	<script>
		//view model
		new Vue({
           el:"#app",
           data:{
               ys1:"red",
               ys2:"green",
           }
        });
	</script>
</html>

3 v-model

可以使用 v-model 指令给 value 属性赋值,比如给 form 表单中的 value 赋值:

<!DOCTYPE html>
<html xmlns:v-model="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<title>v-model</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<form action="" method="post">
				用户:<input type="text" name="username" v-model="user.username"><br>
				密码:<input type="text" name="password" v-model="user.password"><br>
			</form>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				user:{
				    username:"oneStar",
					password:"123"
				}
			}
		});
	</script>
</html>

image

4 v-for

v-for 指令是用来循环遍历的,相当于 for 循环,这里演示遍历数组、遍历对象、遍历对象数组

4.1 遍历数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for遍历数组</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(arr,index) in arrs">{{arr +" : "+ index}}</li>
			</ul>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
			    arrs:[1,2,3,4]
			}
		});
	</script>
</html>

image

4.2 遍历对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(value,key) in person">{{key + " : " + value}}</li>
			</ul>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
			    person:{
			        name:"oneStar",
					age:18
				}
			}
		});
	</script>
</html>

image

4.3 遍历对象数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<table border="1">
				<tr>
					<td>序号</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
				<tr v-for="(person,index) in persons">
					<td>{{index}}</td>
					<td>{{person.name}}</td>
					<td>{{person.age}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
			    persons:[
					{name:"oneStar",age:18},
					{name:"twoStar",age:19},
					{name:"threeStar",age:20}
				]
			}
		});
	</script>
</html>

image

5 v-if 与 v-show

  • v-if 是根据表达式的值来决定是否渲染元素
  • v-show是根据表达式的值来切换元素的display css属性
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<title>v-if与v-show</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="flag">派大星</div>
			<div v-show="flag">海绵宝宝</div>
			<button v-on:click="change">转换</button>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
			    flag:false,
			},
			methods:{
			    change:function () {
					this.flag = !this.flag;
                }
			}
		});
	</script>
</html>

image

点击转换能将上面的文字影藏和显示

end
  • 作者:ONESTAR(联系作者)
  • 更新时间:2020-08-06 21:35
  • 版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
  • 转载声明:如果是转载栈主转载的文章,请附上原文链接
  • 公众号转载:请在文末添加作者公众号二维码(公众号二维码见右边,欢迎关注)
  • 评论