-
v-on
為頁面元素綁定各種事件。（keydown, keyup, click, dbclick, load, etd.）分別是：按鍵按下、按鍵彈起、鼠標點擊、雙擊鼠標、裝載等等
<!DOCTYPE html>
<html>
<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>button.html</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="example">
<p>您最喜歡的游戲是：{{game}}</p>
<!-- v-on:click的冒號不能有空格，否則無效 -->
<!-- v-on:click綁定事件，這里選擇的是鼠標單擊 -->
<button v-on:click="btn_click('我的世界')">我的世界</button>
<button v-on:click="btn_click('魂斗羅2')">魂斗羅2</button>
<button v-on:click="btn_click('忍者神龜')">忍者神龜</button>
<!-- @ 就是 v-on: 這五個字符組合的縮寫 -->
<button @click="btn_click('蜜蜂大戰')">蜜蜂大戰</button>
</div>
</body>
<script>
new Vue({ //直接使用名字就是，標簽選擇器，第一個標簽
//el: "div",
//id選擇器
el: "#example", data: { game: '超級瑪麗' }, methods: { btn_click:function(game_name) { this.game = game_name; } } }); </script>
</html>