vue.js 教程(四)Vue.js要如何v-on:click

从开始到现在,我们的范例都是real time即时执行,但是一般网站几乎都不是real time即时执行的,尤其是希望那些透过网友点击才会出现互动的内容,本篇我们就来谈谈v- on这个属性吧!v-on呢其实就有点类似jquery的on(),所以就会有click、submit、keyup等等这些延伸设定,我们假设画面上有一个按钮,按钮按下后会跳出文字框,以下是范例程式码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<input type="submit" value="立即送出" v-on:click="clickme">
</div>

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

methods:{
clickme: function(){
alert("here I am!");
}
}

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

是的,当你点击了立即送出后,透启动v-on:click属性,属性值是clickme,所以就会呼叫下方methods里面clickme的function内容,然后你就会看到文字视窗内容显示“here I am!”,当然有些人会说这个范例有点弱,我用javascript一样做得到,当然!vue.js本身就是javascript的framework,所以javascript本来就可以办得到,那我们来改造一下这个范例,让页面会统计你点击这个按钮次数,做一个小小的计数器,以下是修改过后的范例!只要稍加修改,加上前几篇教过的data,就可以做出一个简单的计数器了!这边要记得count这里直接0的话,型别判断就是数字,但是如果你写’0’,就会被当文字型别,最后的结果就不是你想要计数器了!好啦!最后再来一个简单的click范例,这个范例就是假设我们有两颗按钮,分别按下去都会跳出不一样的文字视窗,但是文字视窗的讯息不写在methods里面的function里,而是共用相同的function ,所以简单说就是要可以丢参数进去function里,以下就是范例!是的!根据这个范例呢,你也可以在那边uh~~~ah~~~(这是某首DJ的歌,有点老了),当你点了”I say uh”,v-on:clicke就会呼叫handleIt function,然后把uh这个值丢到handleIt function里,所以alert出来的内容就会变成“uh”,当然当你点了“you say ah”,就会把ah这个值丢入handleIt function中,最后alert出来的内容就会变成“ah”了!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<p>目前以點擊:{{count}}次</p>
<input type="submit" value="立即送出" v-on:click="clickme">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
count:0
},

methods:{
clickme: function(){
this.count += 1;
}
}
});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<button v-on:click="handleIt('uh')">I say uh</button>
<button v-on:click="handleIt('ah')">you say ah</button>

</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(msg){
alert(msg)
}

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

Author: bwh

发表评论