有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue Event中的事件处理(原理)

vue 炮渣日记 1个月前 (11-08) 62次浏览 已收录 0个评论 扫描二维码

单击事件监听

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

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></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>

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

<button v-on:click = "displaynumbers">点击</button>

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

<button @click="displaynumbers">点我</button>

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

Vue Event中的事件处理(原理)

mouseover和mouseout事件

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

<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 = "blue";
 },
 originalcolor: function() {
 this.styleobj.backgroundColor = "red";
 }
 }
 });
 </script>

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

Vue Event中的事件处理(原理)
Vue Event中的事件处理(原理)

事件修饰符

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

  • once修饰符(表示这个事件只执行一次)

语法如下:

<button v-on:click.once = "buttonclicked">点击</button>

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

 <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>
Vue Event中的事件处理(原理)

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

  • prevent修饰符

语法如下:

<a href = "http://www.baidu.com" v-on:click.prevent = "clickme">点击</a>

示例:

<div id="databinding">
 <a
 href="http://www.baidu.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("点击了a标签");
 }
 }
 });
 </script>

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

<a href="http://www.baidu.com"
 v-on:click.prevent="clickme"
 target="_blank"
 v-bind:style="styleobj"
 >点击</a
 >

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

  • 按键修饰符

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

<input type = "text" v-on:keyup.enter = "showinputvalue"/>

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

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

示例代码:

<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: "30%",
 padding: "12px 20px",
 margin: "8px 0",
 boxSizing: "border-box"
 }
 },
 methods: {
 showinputvalue: function(event) {
 this.name = event.target.value;
 }
 }
 });
 </script>

我们来看下执行的效果:

Vue Event中的事件处理(原理)

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

Vue Event中的事件处理(原理)

自定义事件

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

示例

<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>

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

<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数组一起循环。该数组中包含一系列语言。我们需要将详细信息发送到子组件。数组的值存储在item和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的实例中定义了,这当中最主要的就是按钮的点击事件执行了

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

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

Vue Event中的事件处理(原理)

总结

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

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址