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