vue v-on,vue this.on

　　本文介绍了v-on指令在Vue.js中的用法，通过示例代码详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。

v-on指令

　　Vue.js中使用v-on指令来绑定事件监听器。事件的类型由参数指定。表达式可以是方法名或内联预测名，如果没有修饰符，也可以省略。

　　当在普通元素上使用时，只能侦听本机DOM事件。使用定制元素组件时，您还可以监听由子组件触发的定制事件。

　　用法：

　　V-on:事件类型=函数体

　　例如，单击按钮时会执行play事件。

　　按钮v-on:click=play click事件/按钮

注意：

　　使用v-on指令绑定事件时，如果要执行的函数是无参数函数，函数体可以有括号，也可以没有括号。以下两种写法是等价的：

　　按钮v-on:click=play () click事件/按钮

　　等同于

　　按钮v-on:click=play click事件/按钮

　　但是，如果要传递参数，必须添加括号，例如：

　　按钮v-on:click=play(item) click事件/按钮

　　上面的例子是将item参数传递给play函数。

注意：v-on的缩写@

　　上述代码等效于以下代码：

　　Button @click=play click事件/按钮

　　代码示例如下：

　　！声明文档类型

　　html lang=en

　　头

　　meta charset=UTF-8

　　meta name= viewport content= width=device-width，initial-scale=1.0

　　meta http-equiv= X-UA-Compatible content= ie=edge

　　标题v-on说明/标题

　　！-介绍vue.js -

　　脚本src= node _ modules/vue/dist/vue . js /script

　　脚本

　　window.onload=function(){

　　//构建一个vue实例

　　新Vue({

　　艾尔：“#我的”，

　　数据：{

　　年龄：30岁

　　//方法

　　方法：{

　　//没有参数

　　play:function(){

　　this.age=40

　　//有参数

　　playWithPara:函数(para){

　　this.age=para

　　}

　　})

　　}

　　/脚本

　　/头

　　身体

　　div id=我的

　　H1年龄：{{age}}/h1

　　Button @click=age=20 将年龄设置为20/button

　　Button @click=play 将年龄设为40岁/button

　　Button @click=playWithPara(50)根据参数/button设置年龄

　　/div

　　/body

　　/html

　　一个按钮也可以同时绑定多个事件，例如：

　　/button v-on= {mouseover: on over，mouseout: on out} 绑定多个事件/按钮

　　上面，我们通过对象绑定多个事件。对象中的键是事件的名称，值是方法中的成员属性方法。

　　对应方法：