v-on是添加到DOM元素以监听VueJS中的事件的属性。
点击事件
创建一个文件：event-click.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs事件示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "displaynumbers">点击计算结果</button>
<h2> 100 + 200 = {{total}}</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
num1: 100,
num2 : 200,
total : ''
},
methods : {
displaynumbers : function(event) {
console.log(event);
return this.total = this.num1+ this.num2;
}
},
});
</script>
</body>
</html>
在浏览器中查看，如下所示 -
以下代码用于为DOM元素分配一个单击事件。
<button v-on:click = "displaynumbers">点击计算结果</button>
有一个v-on的简写，这意味着也可以按如下方式调用事件 -
<button @click = "displaynumbers">点击计算结果</button>
点击按钮，它将调用方法displaynumbers，它将接受事件，已经在浏览器中同样如上所示。
我们现在来看看一个事件鼠标悬停鼠标效果。参考以下代码(event-click2.html) -
在上面的例子中，创建了一个宽度和高度均为100px的div。 它被赋予了红色的背景颜色。在鼠标悬停时，将颜色更改为绿色，在鼠标悬停时，又将颜色更改为红色。
因此，在鼠标悬停期间，调用changebgcolor方法，将鼠标移出div时，调用一个方法：originalcolor。
这是如下完成的 -
<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
如上所示，将两个事件(mouseover和mouseout)分配给div。已经创建了一个styleobj变量，并给定了要分配给div的所需样式。 使用v-bind将相同的变量绑定到：div：style ="styleobj"
在changebgcolor中，使用以下代码将颜色更改为绿色。
changebgcolor : function() {
this.styleobj.backgroundColor = "green";
}
使用stylobj变量，将颜色更改为绿色。同样，下面的代码用于将其更改回原始颜色。
originalcolor : function() {
this.styleobj.backgroundColor = "red";
}
在浏览器中看到如下效果 -
事件修饰符
VueJS在v-on属性上有一些事件修饰符。以下是可用的修改器 -
1. 修饰符 .once
允许该事件只执行一次。语法如下 -
<button v-on:click.once = "buttonclicked">点击一次</button>
在下面示例中，实现在调用修饰符的同时添加点运算符，并理解一次修饰符的工作。创建一个文件：event-modifiers.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs事件示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">点击一次</button>
输出结果: {{clicknum}}
<br/><br/>
<button v-on:click = "buttonclicked" v-bind:style = "styleobj">点击我</button>
输出结果: {{clicknum1}}
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
buttonclickedonce : function() {
this.clicknum++;
},
buttonclicked : function() {
this.clicknum1++;
}
}
});
</script>
</body>
</html>
在浏览器中浏览看到如下效果 -
在上面的例子中，我们创建了两个按钮。 点击一次标签的按钮添加了once修饰符，另一个按钮没有任何修饰符。这是按钮的定义方式。
<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">点击一次</button>
输出结果: {{clicknum}}
<button v-on:click = "buttonclicked" v-bind:style = "styleobj">点击我</button>
第一个按钮调用方法buttonclickedonce，第二个按钮调用方法buttonclicked。
buttonclickedonce : function() {
this.clicknum++;
},
buttonclicked : function() {
this.clicknum1++;
}
定义了两个变量：clicknum和clicknum1。 当按钮被点击时，两者都增加。 两个变量都初始化为0，显示在上面的输出中。
点击第一个按钮时，变量clicknum加1。第二次点击时，数字不会递增，因为once修饰符阻止它执行或执行任何按钮单击指定的操作项目。
在点击第二个按钮时，执行相同的动作，即变量增加。 在每次点击时，值都会递增并显示。
以下是在浏览器中获得的输出 -
2. 修饰符 .prevent
语法 -
<a href = "http://www.yiibai.com" v-on:click.prevent = "clickme">Click Me</a>
创建一个文件：event-modifiers2.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs事件示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<a href = "http://www.yiibai.com" v-on:click = "clickme" target = "_blank" v-bind:style = "styleobj">点击我</a>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
color: '#4CAF50',
marginLeft: '20px',
fontSize: '30px'
}
},
methods : {
clickme : function() {
alert("锚点标签被点击了~");
}
}
});
</script>
</body>
</html>
如果点击"点击我"的链接，它将会发送一个警示为："锚点标签被点击了~"，它会在一个新的选项卡中打开链接 - http://www.yiibai.com ，如以下屏幕截图所示。
这是一个正常的方式，即打开链接的网站。如果不希望链接打开，可添加一个修饰符“阻止”到这个事件，如下面的代码所示。
<a href = "http://www.yiibai.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
当添加，如果点击按钮，它会发送一个警告消息，不会再打开链接。 阻止修饰符防止链接打开，只执行分配给标签的方法。
创建一个文件：event-modifiers3.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs事件示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<a href = "http://www.yiibai.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">点击我</a>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
color: '#4CAF50',
marginLeft: '20px',
fontSize: '30px'
}
},
methods : {
clickme : function() {
alert("锚点标签被点击了~");
}
}
});
</script>
</body>
</html>
以下是在浏览器中获得的输出 -
事件 - 键修饰符
VueJS提供了可以控制事件处理的按键修饰符。 考虑如果有一个文本框，我们希望只有当按Enter 键时才会调用这个方法。那么可以通过向事件添加键修饰符来完成，如下所示。
语法
<input type = "text" v-on:keyup.enter = "showinputvalue"/>
想要应用于事件的键是：v-on.eventname.keyname(如上代码所示)，也可以使用多个键。 例如，v-on.keyup.ctrl.enter，参考以下代码(event-key-modifiers.html)
<html>
<head>
<meta charset="utf-8" />
<title>VueJs事件示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "请输入名字，完成后回车~"/>
<h3> {{name}}</h3>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name:'',
styleobj: {
width: "50%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.name=event.target.value;
}
}
});
</script>
</body>
</html>
在浏览器中，输入一个名字：Maxsu，然后按回车键，效果如下 -
自定义事件
父组件可以使用prop属性将数据传递给其组件，但是，当子组件发生更改时，需要告诉父项。 为此，可以使用自定义事件。
父组件可以使用v-on属性来侦听子组件事件。创建一个文件：event-custom.html -
<html>
<head>
<meta charset="UTF-8">
<title>VueJs自定义事件</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div id = "counter-event-example">
<p style = "font-size:25px;">语言显示 : <b>{{ languageclicked }}</b></p>
<button-counter
v-for = "(item, index) in languages"
v-bind:item = "item"
v-bind:index = "index"
v-on:showlanguage = "languagedisp"></button-counter>
</div>
</div>
<script type = "text/javascript">
Vue.component('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props:['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
var vm = new Vue({
el: '#databinding',
data: {
languageclicked: "",
languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
},
methods: {
languagedisp: function (a) {
this.languageclicked = a;
}
}
})
</script>
</body>
</html>
以下是在浏览器中获得的输出 -
上面的代码显示了父组件和子组件之间的数据传输。该组件是使用以下代码创建的。
<button-counter
v-for = "(item, index) in languages"
v-bind:item = "item"
v-bind:index = "index"
v-on:showlanguage = "languagedisp">
</button-counter>
有一个v-for属性，它将与语言数组一起循环。 该数组中有一个语言列表。需要将详细信息发送给子组件。 数组的值存储在项目和索引中。
v-bind:item = "item"
v-bind:index = "index"
为了引用数组的值，需要先将它绑定到一个变量，然后使用props属性来引用变量，如下所示。
Vue.component('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props:['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
props属性以数组形式包含项目。也可以参考索引 -
props:[‘item’, ‘index’]
还有一个事件添加到组件如下 -
<button-counter
v-for = "(item, index) in languages"
v-bind:item = "item"
v-bind:index = "index"
v-on:showlanguage = "languagedisp">
</button-counter>
事件的名称是showlanguage，它调用一个在Vue实例中定义的名为languagedisp的方法。
在组件中，模板定义如下 -
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
有一个按钮创建。该按钮将在语言数组中使用尽可能多的计数创建。点击按钮，有一个叫做displayLanguage的方法，按钮被点击的项目作为参数传递给函数。 现在，组件需要将clicked元素发送到父组件以进行显示，具体步骤如下 -
Vue.component('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props:['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
方法displayLanguage调用这个this.$emit(‘showlanguage’, lng);$emit用于调用父组件方法。showlanguage是使用v-on在组件上给出的事件名称。
<button-counter
v-for = "(item, index) in languages"
v-bind:item = "item"
v-bind:index = "index"
v-on:showlanguage = "languagedisp">
</button-counter>
正在传递一个参数，即被点击到主Vue实例的方法的语言名称，定义如下。
var vm = new Vue({
el: '#databinding',
data: {
languageclicked: "",
languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
},
methods: {
languagedisp: function (a) {
this.languageclicked = a;
}
}
})
在这里，发出触发器showlanguage，然后调用Vue实例方法中的languagedisp。 它将语言点击值赋给变量languageclicked，并在浏览器中显示相同的内容。如下所示 -
<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
