v-on
為頁面元素定義各種事件
keydown,keyup,click,dbclick,load,etd
html代碼塊
/*當鼠標點擊‘我的世界’按鈕時,會將'Minecraft'參數傳給btnClick函數*/
<button v-on:click="btnClick('Minecraft')">我的世界</button>
js代碼
/*傳進來的參數賦值給mygame這個變量*/
btnClick: function (pname) {
this.mygame = pname;
},
源代碼文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>hellovue</title>
</head>
<body>
<div id="myApp">
<p>您最喜歡的游戲是:{{mygame}}</p>
<button v-on:click="btnClick('Minecraft')">我的世界</button>
<button v-on:click="btnClick('勇者斗惡龍')">勇者斗惡龍</button>
<button v-on:click="btnClick('塞爾達傳說')">塞爾達傳說</button>
<!-- @ 為v-on:縮寫-->
<button @click="btnClick('魔界戰記')">魔界戰記</button>
</div>
<script>
var myApp = new Vue({
/*綁定標簽的id*/
el: '#myApp',
/*標簽上綁定的數據*/
data: {
mygame: '超級馬里奧'
},
methods:{
btnClick: function (pname) {
this.mygame = pname;
},
},
});
</script>
</body>
</html>
