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.事件绑定的语法需要多练习。
Logo

前往低代码交流专区

更多推荐