vue学习日记Day7

vue学习日记Day7：prevent修饰符以及v-on事件绑定的练习prevent修饰符：可以阻止元素的默认行为。先看例子<a href="http://www.4399.com" @click="handclick('禁止打开')">打开链接</a>//这是没有加prevent修饰符的代码块<a href="http://www.4399.com" @click.

屁小屁小屁

167人浏览 · 2021-01-10 13:22:25

屁小屁小屁 · 2021-01-10 13:22:25 发布

vue学习日记Day7：

prevent修饰符以及v-on事件绑定的练习

prevent修饰符：

可以阻止元素的默认行为。先看例子

<a href="http://www.4399.com" @click="handclick('禁止打开')">打开链接</a>
//这是没有加prevent修饰符的代码块
<a href="http://www.4399.com" @click.prevent="handclick('禁止打开')">打开链接</a>
//这是加了prevent修饰符的代码块

在这里插入图片描述
1.首先在这个页面看到有个超链接，点击超链接，显示禁止打开，但是还是会正常打开4399页面，这个是默认行为。

2.而加了prevent修饰符后就可以阻止元素的默认行为。（我认为我应该描述明白了）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- .prevent修饰符就可以阻止元素的默认行为，如果不加就会正常打开4399页面，并不用在js中写event.preventDefault() 这么麻烦-->
			<!-- 事件冒泡：子元素绑定的事件，祖先元素也会触发，一层层向上传递 -->
			<a href="http://www.4399.com" @click.prevent="handclick('禁止打开')">打开链接</a>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					
				},
				methods:{
					handclick(message){
						//event.preventDefault()
						alert(message);
						
					},
				}
			})
		</script>
	</body>
</html>

3.在阻止元素的默认行为后，点击打开链接，显示禁止打开，相应的4399页面也就不会打开了。

v-on事件绑定练习：

这是要显示的页面，我们要实现，点击“单击按钮”并且在右边的控制台中显示做了什么操作，选择爱好，选择后也要在右边控制台中显示实现了什么操纵，最后还有个绑定 :disable，禁用的绑定，也要在控制台中显示具体的true还是false。
在这里插入图片描述

下面看看代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>{{title}}</h2>
			<button v-on:click="one">单击按钮</button>
			<button  @click="one">单击按钮</button>
			<h3>{{count}}</h3>
			<select v-on:change="handleChange">
				<option value="">请选择</option>
				<option value="run">跑步</option>
				<option value="swim">游泳</option>
				<option value="climb">爬山</option>
			</select>
			<!-- 表单提交 -->
			<h3>{{countcount}}</h3>
			<form v-on:submit.prevent="handleSubmit">
				<input type="checkbox" v-on:click="handleDisabled"/>
				是否同意本站协议
				<br><br>
				<!-- 刚开始是禁用，所以绑定 :disable ,点了后，变成false，双重否定，就变成允许了 -->
				<button :disabled="isDisabled">提交</button>
			</form>
		</div>
		
		
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					title:'注册账户',
					count:'选择爱好',
					countcount:'表单提交',
					isDisabled:true,
				},
				methods:{
					one(){
						console.log('btn is click');
					},
					handleChange(){
						console.log("选择了某选项"+event.target.value);
					},
					handleSubmit(){
						console.log("触发事件");
					},
					handleDisabled(event){
						console.log(event.target.checked);
						if(event.target.checked==true){
							this.isDisabled = false;
						}
						else{
							this.isDisabled = true;
						}
					},
					
				},
			})
		</script>
	</body>
</html>

总结：

1.在prevent修饰符的学习中，也可以不在标签中写.prevent，而写到下边的方法中，但是比较麻烦，event.preventDefault() 二者都可以。
2.事件绑定的语法需要多练习。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^