VueJS 事件
VueJS 事件
v-on是添加到DOM元素的属性,用于侦听VueJS中的事件。
点击事件
例子
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <button v-on:click = "displaynumbers">Click ME</button> <h2> Add Number 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元素分配click事件。
<button v-on:click = "displaynumbers">Click ME</button>
v-on有一个简写,这意味着我们也可以将事件称为
<button @click = "displaynumbers">Click ME</button>
单击按钮后,它将调用方法“displaynumbers”,该方法接受事件,并且我们已经在浏览器中对其进行了整合,如上所示。
我们现在将检查另一个事件鼠标悬停鼠标出。
例子
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { num1: 100, num2 : 200, total : '', styleobj : { width:"100px", height:"100px", backgroundColor:"red" } }, methods : { changebgcolor : function() { this.styleobj.backgroundColor = "green"; }, originalcolor : function() { this.styleobj.backgroundColor = "red"; } }, }); </script> </body> </html>
在上面的示例中,我们创建了宽度和高度为100 px的div。它被赋予了红色背景色。鼠标悬停时,我们将颜色更改为绿色,鼠标悬停时,我们将颜色更改为红色。
因此,在鼠标悬停期间,方法称为changebgcolor,当我们将鼠标移出div时,方法称为originalcolor。
这样做如下:
<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
Two events -鼠标悬停和鼠标移出-如上所示分配给div。我们已经创建了一个styleobj变量,并为div指定了所需的样式。使用v - bind:style="styleobj"将同一变量绑定到div
在changebgcolor中,我们使用以下代码将颜色更改为绿色。
changebgcolor : function() { this.styleobj.backgroundColor = "green"; }
使用stylobj变量,我们将颜色更改为绿色。
类似地,以下代码用于将其更改回原始颜色。
originalcolor : function() { this.styleobj.backgroundColor = "red"; }
这是我们在浏览器中看到的。
鼠标悬停时,颜色将变为绿色,如下屏幕截图所示。
事件修饰符
vue在v-on属性上有可用的事件修饰符。以下是可用的修饰符?
.once
允许事件仅执行一次。
语法
<button v-on:click.once = "buttonclicked">Click Once</button>
我们需要在调用修饰符时添加点运算符,如上面的语法所示。让我们在一个例子中使用它,了解一下once修饰符的工作原理。
例子
<html> <head> <title>VueJs Instance</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">Click Once</button> Output:{{clicknum}} <br/><br/> <button v-on:click = "buttonclicked" v-bind:style = "styleobj">Click Me</button> Output:{{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>
输出
在上面的例子中,我们创建了两个按钮。带有“单击一次”标签的按钮添加了“一次”修改器,而另一个按钮没有任何修改器。这是按钮的定义方式。
<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button> <button v-on:click = "buttonclicked" v-bind:style = "styleobj">Click Me</button>
第一个按钮调用方法“buttonclickedonce”,第二个按钮调用方法“buttonclicked”。
buttonclickedonce : function() { this.clicknum++; }, buttonclicked : function() { this.clicknum1++; }
clicknum和clicknum 1中定义了两个变量。按一下按钮时,两者都会递增。两个变量都初始化为0,显示在上面的输出中。
单击第一个按钮时,变量clicknum将递增1。第二次单击时,数字不会增加,因为修饰符阻止它执行或执行单击按钮时分配的任何操作项。
单击第二个按钮,执行相同的操作,即变量递增。每次单击时,值都会递增并显示。
下面是我们在浏览器中获得的输出。
.prevent
语法
<a href = "http://www.google.com" v-on:click.prevent = "clickme">Click Me</a>
例子
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <a href = "http://www.google.com" v-on:click = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</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("Anchor tag is clicked"); } } }); </script> </body> </html>
输出
如果单击clickme链接,它将在“单击锚标记”时发送警报,并在新选项卡中打开链接。
现在这是一种正常的方式,即链接按照我们的意愿打开。如果我们不想打开链接,我们需要向事件添加一个修饰符“prevent”,如下面的代码所示。
<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
添加后,如果单击按钮,它将发送警报消息,并且不再打开链接。“prevent”修改器阻止链接打开,只执行分配给标记的方法。
例子
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</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("Anchor tag is clicked"); } } }); </script> </body> </html>
输出
单击链接后,它将显示警报消息,不再打开URL。
事件键修饰符
VueJS提供了关键修饰符,我们可以根据这些修饰符控制事件处理。考虑到我们有一个文本框,我们希望只在按Enter键时调用方法。我们可以通过向事件添加关键修饰符来完成此操作,如下所示。
语法
<input type = "text" v-on:keyup.enter = "showinputvalue"/>
我们要应用于事件的关键是V - on . eventname . keyname (如上所示)
我们可以使用多个注释记号。
例子
<html> <head> <title>VueJs Instance</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 = "Enter your name"/> <h3> {{name}}</h3> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { name:'', styleobj: { width: "30%", padding: "12px 20px", margin: "8px 0", boxSizing: "border-box" } }, methods : { showinputvalue : function(event) { this.name=event.target.value; } } }); </script> </body> </html>
输出
在文本框中键入内容,只有按Enter键时才会显示该内容。
自定义事件
父级可以使用prop属性将数据传递给其组件,但是,我们需要在子级组件发生更改时通知父级。为此,我们可以使用自定义事件。
父组件可以使用v - on属性侦听子组件事件。
例子
<html> <head> <title>VueJs Instance</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;">Language displayed : <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属性引用varaiable,如下所示
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:[‘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,它调用一个名为languagedisp的方法,该方法在Vue实例中定义。
在组件中,模板定义如下
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
创建了一个按钮。该按钮将在语言数组中使用相同数量的计数创建。单击按钮时,有一种称为displayLanguage的方法,单击的按钮项将作为参数传递给函数。现在组件需要将单击的元素发送到父组件以进行显示,具体操作如下?
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); } }, });
方法显示语言调用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; } } })
这里,emit触发器显示语言,而语言又从Vue实例方法调用语言显示。它将语言clicked值分配给变量language clicked,并在浏览器中显示该值,如下屏幕截图所示。
<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
下面是我们在浏览器中获得的输出。