事件
事件绑定
Vue 中的事件绑定可以使用 v-on
指令进行处理,可以把 v-on
绑定事件简写为 @
。语法结构如下:
<button v-on:click='num++'>加一</button>
<button @click='num++'>再加一</button>
第一行代码使用 v-on
进行事件的绑定、第二行代码使用 @
进行事件绑定。如下代码所示:
<body>
<div class="container">
<div>{
{ num }}</div>
<button v-on:click='num++'>加一</button>
<button @click='num++'>再加一</button>
</div>
<script src="../lib/vue.js"></script>
<script>
let vm = new Vue({
el: '.container',
data: {
num: 0,
}
})
</script>
</body>
当点击加一按钮时,页面中的内容 +1。
事件函数的触发
绑定事件的处理函数还可以单独写在 <script>
标签或 JavaScript 文件中,需要在 new Vue 对象时使用 methods
属性进行定义 methods
为一个对象,该对象中包含着处理函数,如下代码所示:
<body>
<div class="container">
<div>{
{ num }}</div>
<!-- 绑定单单击事件 -->
<button v-on:click='add'>加一</button>
<button @click='add()'>再加一</button>
</div>
<script src="../lib/vue.js"></script>
<script>
let vm = new Vue