-
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>