Vue.js 事件
Vue.js 事件
在Vue.js中，事件用于响应动作。假设您必须使用Vue.js构建一个动态网站，那么您很可能希望它能够响应事件。
例如，如果您的Vue.js网站具有可点击的按钮，表单等等，您肯定希望如果用户单击按钮，提交表单或什至移动其鼠标Vue.js网站都会以某种方式做出响应。
Vue.js事件处理
要使用
Vue.js 处理事件，我们必须将v-on指令添加到相关的DOM元素。例如，如果要处理按钮元素的单击，则应在Vue模板中添加以下代码:
Vue.js 处理事件，我们必须将v-on指令添加到相关的DOM元素。例如，如果要处理按钮元素的单击，则应在Vue模板中添加以下代码:
语法:
<button v-on:click="clickHandler"></button>
您也可以使用便捷的速记
@ 代替v-on指令。看起来像这样:
@ 代替v-on指令。看起来像这样:
<button @click="clickHandler"></button>
我们在v-on指令中添加了一个参数，这将是我们要处理的事件的名称。在上述示例情况下，这是一个click事件。之后，我们必须将表达式绑定到指令，该指令通常是您要用于处理事件的方法。在这种情况下，我们将其称为clickHandler。
您可以处理的Vue.js事件的类型
您可以处理很多其他的Vue.js除点击之外的DOM事件。 Vue.js可以处理任何类型的Web或移动本机事件以及自定义事件。通常用于处理的最常见事件:
submit
keyup
drag
scroll
error
abort
mouseover
mouseout
load等
事件处理方法
让我们看一些部署事件处理方法的简单示例。
点击事件
请参见以下示例，以演示Vue.js中的点击事件处理。
Index.html文件:
<html>
<head>
<title>Vue.js Event Handling</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click = "displaynumbers">Click Me to Add No.</button>
<h2> Add Number 100 + 200 = {{total}}</h2>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: "#app",
data: {
num1: 50,
num2 : 100,
total : ''
},
methods : {
displaynumbers : function(event) {
console.log(event);
return this.total = this.num1+ this.num2;
}
},
})
我们使用一个简单的CSS文件使输出更具吸引力。
Index.css文件:
html, body {
margin: 5px;
padding: 0;
}
程序执行后，您将看到以下输出:
输出:
单击上面的按钮时，您可以看到它已经添加了号码。参见输出:
示例说明
在上面的示例中，我们为DOM元素分配了以下click事件。
<button v-on:click = "displaynumbers">Click Me to Add No.</button>
当您单击按钮时，它将调用方法"
displaynumbers "，该方法将在事件中接收并看到输出。
displaynumbers "，该方法将在事件中接收并看到输出。
我们还可以分配
@ 的缩写，而不是v-on指令。您可以调用以下事件，结果将相同。
@ 的缩写，而不是v-on指令。您可以调用以下事件，结果将相同。
<button @click = "displaynumbers">Click ME</button>
鼠标悬停和鼠标移出事件
现在，让我们检查两个新的名为
mouseover 和
mouseout 的Vue.js事件。请参见以下示例。
mouseover 和
mouseout 的Vue.js事件。请参见以下示例。
Index.html文件:
<html>
<head>
<title>Vue.js Event Handling</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
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 = "blue";
},
originalcolor : function() {
this.styleobj.backgroundColor = "brown";
}
},
})
程序执行后，您将看到以下输出:
输出:
您可以在输出中看到默认背景色为
红色。现在，将鼠标光标移到该框上，该框的颜色将更改为
蓝色。参见输出。
红色。现在，将鼠标光标移到该框上，该框的颜色将更改为
蓝色。参见输出。
现在，将鼠标光标移出框，并且框的颜色将更改为
棕色。参见输出。
棕色。参见输出。
示例说明
在上面的示例中，我们创建了一个div元素，其宽度和高度为100px。该div的默认背景颜色是红色。在
鼠标悬停上，背景颜色更改为蓝色，在
鼠标悬停上背景颜色更改为棕色。
鼠标悬停上，背景颜色更改为蓝色，在
鼠标悬停上背景颜色更改为棕色。
在鼠标悬停期间，称为changebgcolor，将鼠标移出div后，一种方法称为originalcolor。
<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
在这里，我们使用了两个事件mouseover和mouseout并将它们分配给div。
使用
v-bind: style ="styleobj" 将相同的变量绑定到div。 。在changebgcolor中，我们使用以下代码将颜色更改为绿色。
v-bind: style ="styleobj" 将相同的变量绑定到div。 。在changebgcolor中，我们使用以下代码将颜色更改为绿色。
changebgcolor : function() {
this.styleobj.backgroundColor = "blue";
}
使用stylobj变量，颜色变为绿色。同样，我们使用以下代码将颜色更改为棕色
originalcolor : function() {
this.styleobj.backgroundColor = "brown";
Vue.js事件修饰符
Vue.js提供了一些在v-on属性上可用的事件修饰符。我们可以很容易地在事件处理程序中调用event.preventDefault()或event.stopPropagation()。这里，.prevent和.stop是事件修饰符。
这些修饰符是用点表示的指令后缀。以下是v-on属性上可用的最常见修饰符的列表:
.once
.prevent
.stop
.capture
.self
.passive
.once事件修饰符
它仅允许事件执行一次。
语法:
<button v-on:click.once = "buttonclicked">Click Once</button>
必须在调用修饰符时添加点运算符，如上面的语法所示。
让我们看一个简单的示例，以了解一次修饰符的概念和工作原理。
示例
Index.html文件:
<html>
<head>
<title>Vue.js Event Handling</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "eg_2">
<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Just once clickable</button>
Output:{{clicknum}}
<br/><br/>
<button v-on:click = "buttonclicked" v-bind:style = "styleobj">Click Me anytime</button>
Output:{{clicknum1}}
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#eg_2',
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++;
}
}
})
程序执行后，您将看到以下输出:
输出:
您可以看到在上面的示例中我们创建了两个按钮。带有"只需单击一次"标签的按钮添加了一次修饰符，而另一个按钮则没有任何修饰符。
<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Just once clickable</button>
<button v-on:click = "buttonclicked" v-bind:style = "styleobj">Click Me anytime</button>
当您单击第一个按钮时，它将调用方法" buttonclickedonce"，而在单击第二个按钮后，它将调用方法" buttonclicked"。
buttonclickedonce : function() {
this.clicknum++;
},
buttonclicked : function() {
this.clicknum1++;
}
我们还在
clicknum 和
clicknum1 中定义了两个变量。单击按钮时，两者都会增加。这两个变量都初始化为0。您可以在上面的输出中看到它。
clicknum 和
clicknum1 中定义了两个变量。单击按钮时，两者都会增加。这两个变量都初始化为0。您可以在上面的输出中看到它。
单击第一个按钮时，变量clicknum递增1。在第二次单击时，数字不递增为修饰符可防止其执行或执行单击按钮时分配的任何操作项。
单击第二个按钮时，将执行相同的操作，即变量增加。每次单击时，该值都会增加并显示。请参阅以下输出:
在两次单击两个按钮之后，您可以看到第一个按钮仅显示一次单击，第二个按钮显示了5次。
。prevent事件修饰符
使用了.prevent事件修饰符当您不想通过单击按钮打开特定的ID或URL时。
语法:
<a href = "An specific url" v-on:click.prevent = "clickme">Click Me</a>
让我们看两个示例，一个不带.prevent事件修饰符，另一个带它清楚地理解它。
Index.html文件:
<html>
<head>
<title>Vue.js Event Handling</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "eg_3">
<a href = "http://www.google.com" v-on:click = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#eg_3',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
color: '#4CAF50',
marginLeft: '20px',
fontSize: '30px'
}
},
methods : {
clickme : function() {
alert("Anchor tag is clicked");
}
}
})
程序执行后，您将看到以下输出:
输出:
当您单击"单击我"按钮时，您会看到一条弹出消息。参见下图。
点击"确定"按钮后，目标网址将如下图所示打开:
现在，我们将使用.prevent事件修饰符查看结果。在Index.html文件中添加以下代码。
<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
添加代码后，如果单击按钮，它将发送警报消息，但不再打开URL。
用以下内容替换Index.html文件代码:
<html>
<head>
<title>Vue.js Event Handling</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "eg_3">
<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
</div>
<script src="index.js"></script>
</body>
</html>
输出:
点击在"单击我"按钮上，您将看到弹出框处于打开状态。
现在，单击"确定"按钮，您将看到指定的URL不再打开。
Vue.js事件键修饰符
在Vue.js中，键修饰符用于处理和控制事件处理。在监听键盘事件时，我们需要检查特定的键。 Vue.js提供了一种在侦听按键事件时为v-on添加按键修饰符的方法。
例如，假设您有一个文本框，并且只想在按下Enter键时才调用该方法。您可以通过向事件添加键修饰符来实现此目的，如下所示。
语法:
<input type = "text" v-on: event_name.key_name= "showinputvalue"/>
示例: 如果要对事件应用键盘输入并输入按钮，则可以使用以下代码来实现:
<input type = "text" v-on:keyup.enter = "showinputvalue"/>
注意: 您还可以在事件中使用多个键名。例如: 让我们使用keyup，ctrl，然后输入密钥名。
<input type = "text" v-on.keyup.ctrl.enter= "showinputvalue"/>
让我们看一个示例，以演示Vue.js事件的关键修饰符并很好地理解它。
Index.html文件:
<html>
<head>
<title>Vue.js Event Handling</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "key_1">
<input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "Type your name here.."/>
<h3> {{name}}</h3>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#key_1',
data: {
name:'',
styleobj: {
width: "100%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.name=event.target.value;
}
}
})
执行后在该程序中，您会看到以下输出:
输出:
在文本框中写一些东西，然后查看结果。
在上面的输出中，您可以看到，即使在文本框中键入名称后，该名称也不会出现在结果中。现在，按输入按钮，将显示名称。请参见以下输出:
您可以在您的键盘上使用以下关键修饰符事件。
.enter
.tab
.delete(它同时读取" Delete"和" Backspace"键)
.esc
.space
.up
.down
.left
.right
Vue.js自定义事件
当我们需要告诉父级我们要在子级组件中进行更改时，将使用自定义事件。父组件可以使用prop属性将数据传递到其组件。
父组件可以使用
v-on 属性来侦听子组件事件。
v-on 属性来侦听子组件事件。
让我们来看一个示例:
Index.html文件:
<html>
<head>
<title>Vue.js Event Handling</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "eg_2">
<div id = "custom-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 src="index.js"></script>
</body>
</html>
Index.js文件:
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: '#eg_2',
data: {
languageclicked: "",
languages : ["Java", "C", "C++", "Python", "Javascript", "Angular", "Data Structure", "jQuery"]
},
methods: {
languagedisp: function (a) {
this.languageclicked = a;
}
}
})
程序执行后，您将看到以下输出:
输出:
如果单击任何按钮，它将显示在输出中。让我们单击Python按钮并查看结果。
示例说明
上面的示例显示了父组件和子组件之间的数据传输。使用以下代码创建父组件。
<button-counter
v-for = "(item, index) in languages"
v-bind:item = "item"
v-bind:index = "index"
v-on:showlanguage = "languagedisp">
</button-counter>
在这里，v-for属性将与在其中包含语言列表的languages数组一起循环。我们必须将详细信息发送到子组件，以便将数组的值存储在项目和索引中。
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);
}
},
});
事件的名称为
showlanguage ，它调用一个名为
languagedisp 的方法，该方法已在Vue实例中定义。
showlanguage ，它调用一个名为
languagedisp 的方法，该方法已在Vue实例中定义。
在组件，模板定义如下-
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
方法
displayLanguage 用于调用此函数。$ emit('showlanguage'，lng);
displayLanguage 用于调用此函数。$ emit('showlanguage'，lng);
$ emit 用于调用父组件方法。方法
showlanguage 是使用
v-on 在组件上给出的事件名称。
showlanguage 是使用
v-on 在组件上给出的事件名称。
现在，我们传递了一个参数。传递的参数是单击到主父Vue实例的方法的语言的名称。定义如下:
var vm = new Vue({
el: '#databinding',
data: {
languageclicked: "",
languages : ["Java", "C", "C++", "Python", "Javascript", "Angular", "Data Structure", "jQuery"]
},
methods: {
languagedisp: function (a) {
this.languageclicked = a;
}
}
})