vue.js 教程(五)Vue.js要如何v-on的其他运用

上一篇我们讲了很多v-on:click的运用,但是说到按钮,最常出现的地方应该就是表单了。既然是表单,那就有所谓的submit这个动作。所以本篇一开始,我们就来说说v-on:submit吧!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<form action="submit.html" v-on:submit="handleIt">
<button type="submit">立即送出</button>
</form>

</div>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js”></script>
<script>
new Vue({
el:’#app’,

methods:{
handleIt: function(){
alert(“here I am!”);
}
}

});
</script>
</body>
</html>

上述的范例与上一篇一开始的范例非常像,只是在这边我们用了一个form表单,当表单送出时就会转到submit.html,我的submit.html只是一个空白页面,里面写着送出成功,所以目前这个范例是不会传送任何东西到submit.html页面的,只会在你按下按钮的时候,跳出文字视窗写着“here I am!”。到目前为止你会觉得v-on:submit跟上一篇 v-on:click很像,如果不看原理只看结果基本上一模一样的,只是一个是click一个是submit的差别而已。

好啦,那假设我们今天有一颗按钮,但是我不希望他就这样直接submit出去,那怎么办?我还是希望他按下按钮之后会跑出“here I am!”,但是他不要送出资讯转到submit.html,那这时我们要怎么做?很简单,我们只要写v-on:submit.prevent就好了,有没有很简单?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<form action="submit.html" v-on:submit.prevent="handleIt">
<button type="submit">立即送出</button>
</form>
</div>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js”></script>
<script>
new Vue({
el:’#app’,

methods:{
handleIt: function(){
alert(“here I am!”);
}
}
});
</script>
</body>
</html>

除了.prevent之外,还有.stop、.self、.capture等等,效果如何就留着给你自己尝试与研究了。再来除了submit以外,还有keyup,keyup后面可以点的就多了,比方说.enter、.up、.down、.left、.right等等,后续如果有机会会想几个范例来给大家看看。

连续写了两篇v-on,最后大家是不是开始觉得v-on好像会很常需要写到?毕竟这些都是在互动性操作下会启动function的功能,实战上就显得用到的比例很高,所以在vue.js里就变成有简写的方法了。简写的方法很简单,就是把“v-on:”改写成@就可以了,我们拿一开始“here I am!”做范例如下。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<form action="submit.html" @submit="handleIt">
<button type="submit">立即送出</button>
</form>
</div>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js”></script>
<script>
new Vue({
el:’#app’,

methods:{
handleIt: function(){
alert(“here I am!”);
}
}
});
</script>
</body>
</html>

透过@这样的简写,我们就可以把“v-on:click”改写成“@click”,把“v-on:submit”改写成“@submit”,让我们以后再用v-on的时候可以更快速的输入,也可以避免你一直写v-on、v-on的烦躁程度了,是不是很贴心呢!

Author: bwh

发表评论