单击事件监听
这里我们同样的，不过今天只用都写在index.html中，我们先上代码
<title><a href='https://www.zhaoxmw.com/66939.html' title='vue' target='_blank' rel="noopener">vue</a></title>
<div id="databinding">
<button>点我</button>
<h2>100 + 200 = {{ total }}</h2>
</div>
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);
}
}
});
这里我们使用了这样的一个语法
<button>点击</button>
displaynumbers就是我们定义在Vue示例属性methods中的事件对象名称，这里我们还有一盒简化的写法
<button>点我</button>
我们可以使用@符号替代v-on的写法，这种方式更简洁，下面截图是这段代码的结果
mouseover和mouseout事件
我们在这里在测试下mouseover和mouseout事件，先上代码
<div id="databinding">
<div></div>
</div>
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属性上有一些可用的修饰符
语法如下：
<button>点击</button>
我们通过一个简单的例子来理解下它的含义
<div id="databinding">
<button>
点击
</button>
输出:{{ clicknum }} <br /><br />
<button>
点击
</button>
输出:{{ clicknum1 }}
</div>
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，后面的点击效果无效，而第二个按钮则不会，正常的执行
语法如下：
<a href="http://www.baidu.com">点击</a>
示例：
<div id="databinding">
<a href="http://www.baidu.com" target="_blank" rel="noopener">点击</a>
</div>
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修饰符，如下代码：
<a href="http://www.baidu.com" target="_blank" rel="noopener">点击</a>
在打开页面发现点击之后只是弹出了提醒，而没有在打开页面，这就是由于我们添加了prevent修饰符的原因，它只会执行绑定的点击事件
VueJS提供了基于我们可以控制事件处理的按键修饰符。假如我们有一个文本框，我们希望只有在按Enter键时才调用该方法。我们可以通过向事件添加键修饰符来实现，如下所示：
我们想要应用于我们的事件的关键是v-on.eventname.keyname（如上所示）
我们还可以使用多个按键，例如v-on.keyup.ctrl.enter
示例代码：
<div id="databinding">
<h3>{{ name }}</h3>
</div>
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属性侦听子组件事件。
示例
<div id="databinding">
<div id="counter-event-example">
<p style="font-size:25px">
当前显示的语言 : <b>{{ languageclicked }}</b>
</p>
</div>
</div>
Vue.component("button-counter", {
template:
'<button><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;
}
}
});
执行后发现我们点击哪个就会显示哪个语言，上面的代码显示了父组件和子组件之间的数据传输，我们简单说明下：其中下面的代码创建组件
有一个v-for属性，它将与languages数组一起循环。该数组中包含一系列语言。我们需要将详细信息发送到子组件。数组的值存储在item和index中，要引用数组的值，我们需要先将它绑定到一个变量，并使用props属性引用变量，如下所示
Vue.component('button-counter', {
template: '<button><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的实例中定义了，这当中最主要的就是按钮的点击事件执行了
this.$emit(‘showlanguage’, lng);
$ emit用于调用父组件方法，以下截图就是我点击了Javascript按钮之后的结果
总结
Vue的事件就说到这，里面还有很多其他的用法，修饰符等，更多的需要参照官网的文档，如果本文对你有帮助，就请点个关注吧vue步骤条vue步骤条，谢谢！有什么好的建议也可以提出来！
———END———
限 时 特 惠：本站每日持续更新海量各大内部创业教程，一年会员只需128元，全站资源免费下载点击查看详情
站 长 微 信：jiumai99
2.本站所有项目来源于投稿或购买自其他第三方，若本站侵犯了您的权益请 联系站长 进行删除处理。
