vue步骤条 Vue中的事件处理——Vue Event

单击事件监听

这里我们同样的，不过今天只用都写在index.html中，我们先上代码


 
 
 
 
 <a href='https://www.zhaoxmw.com/66939.html' title='vue' target='_blank' rel="noopener">vue</a>
 
 
 
 
 
 100 + 200 = {{ total }}
 
 
 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);
 }
 }
 });

这里我们使用了这样的一个语法

displaynumbers就是我们定义在Vue示例属性methods中的事件对象名称，这里我们还有一盒简化的写法

我们可以使用@符号替代v-on的写法，这种方式更简洁，下面截图是这段代码的结果

mouseover和mouseout事件

我们在这里在测试下mouseover和mouseout事件，先上代码


 
 
 
 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 = "red";
 }
 }
 });

在这个例子里面，我们创建了一个宽和高都是100px的div。背景颜色是红色，在鼠标悬停时我们将颜色变成了蓝色，我们在鼠标悬停的时候绑定的是changebgcolor方法，一旦我们移出鼠标会触发我们绑定的originalcolor方法，在这里我们又将styleobj对象绑定到了div的style属性上，这样就实现了我们想要的效果，浏览器截图如下：

事件修饰符

Vue在v-on属性上有一些可用的修饰符

语法如下：

我们通过一个简单的例子来理解下它的含义

 
 
 输出:{{ clicknum }} 


 
 输出:{{ clicknum1 }}
 
 
 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++;
 }
 }
 });

当我们运行项目的时候，点击第一个按钮发现只会输出1，后面的点击效果无效，而第二个按钮则不会，正常的执行

语法如下：

点击

示例：


 点击
 
 
 var vm = new Vue({
 el: "#databinding",
 data: {
 clicknum: 0,
 clicknum1: 0,
 styleobj: {
 color: "#4CAF50",
 marginLeft: "20px",
 fontSize: "30px"
 }
 },
 methods: {
 clickme: function() {
 alert("点击了a标签");
 }
 }
 });

运行项目后我们发现，它事先弹出了提醒，然后跳转了页面，也就是执行了点击事件之后，进行了Url的跳转，此时我们添加一个prevent修饰符，如下代码：

点击

在打开页面发现点击之后只是弹出了提醒，而没有在打开页面，这就是由于我们添加了prevent修饰符的原因，它只会执行绑定的点击事件

VueJS提供了基于我们可以控制事件处理的按键修饰符。假如我们有一个文本框，我们希望只有在按Enter键时才调用该方法。我们可以通过向事件添加键修饰符来实现，如下所示：

我们想要应用于我们的事件的关键是v-on.eventname.keyname（如上所示）

我们还可以使用多个按键，例如v-on.keyup.ctrl.enter

示例代码：


 
 {{ name }}
 
 
 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;
 }
 }
 });

我们来看下执行的效果：

此时我们还没有按下Enter键，我们按下Enter键后再看下

自定义事件

父组件可以使用prop属性将数据传递给其子组件，但是，我们需要在子组件发生更改时告诉父组件。为此，我们可以使用自定义事件。父组件可以使用v-on属性侦听子组件事件。

示例


 
 
 当前显示的语言 : {{ languageclicked }}
 
 
 
 
 
 Vue.component("button-counter", {
 template:
 '',
 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;
 }
 }
 });

执行后发现我们点击哪个就会显示哪个语言，上面的代码显示了父组件和子组件之间的数据传输，我们简单说明下：其中下面的代码创建组件

有一个v-for属性，它将与languages数组一起循环。该数组中包含一系列语言。我们需要将详细信息发送到子组件。数组的值存储在item和index中，要引用数组的值，我们需要先将它绑定到一个变量，并使用props属性引用变量，如下所示

Vue.component('button-counter', {
 template: '',
 data: function () {
 return {
 counter: 0
 }
 },
 props:['item'],
 methods: {
 displayLanguage: function (lng) {
 console.log(lng);
 this.$emit('showlanguage', lng);
 }
 },
});

我们自定义事件的名称就是showlanguage，它调用了languagedisp方法，在Vue的实例中定义了，这当中最主要的就是按钮的点击事件执行了

this.$emit(‘showlanguage’, lng);

$ emit用于调用父组件方法，以下截图就是我点击了Javascript按钮之后的结果

总结

Vue的事件就说到这，里面还有很多其他的用法，修饰符等，更多的需要参照官网的文档，如果本文对你有帮助，就请点个关注吧vue步骤条vue步骤条，谢谢！有什么好的建议也可以提出来！

———END———
限时特惠：本站每日持续更新海量各大内部创业教程，一年会员只需128元，全站资源免费下载点击查看详情
站长微信：jiumai99

100 + 200 = {{ total }}

{{ name }}

相关文章