谷粒学院实战46——事件绑定与修饰符
事件绑定与修饰符
1 事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 绑定click事件到search() -->
<button v-on:click="search()">
search
</button>
<!-- 简写:绑定click事件到find() -->
<button @click="find()">find</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: { //无关紧要的数据
result:"result"
},
methods:{
search(){
console.log("search...");
},
find() {
console.log("find...");
}
}
})
</script>
</body>
</html>
2 修饰符
修饰符其实是狸猫换***，阻止事件绑定的行为，转为指定的行为。其实有点类似于java中的拦截器，或者增强，具体参考下列代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 修饰符将组织submit执行，转而执行onsubmit -->
<form action="save" v-on:submit.prevent="onsubmit">
<input type="text" v-model="user.username">
<!-- button按钮的效果是执行submit -->
<button type="submit">保存</button>
</form>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
user:{}
},
methods:{
onsubmit(){
if(this.user.username) {
console.log("save successfully!")
} else{
alert("please input the user name.");
}
}
}
})
</script>
</body>
</html>
java全栈日日学 文章被收录于专栏
java全栈每日必学，不要高估自己一年能做的事，不要低估自己十年能做的事
你cet6就cet6，cet4就cet4，你写个cet证书等是什么意思。专业技能快赶上项目行数，你做的这2个项目哪里能提现你有这么多技能呢