Vue学习笔记(二)：事件处理、事件传参、修饰符、数组变化侦测

目录

一、事件处理

1.内联事件处理器

2.方法事件处理器

二、事件传参

1.获取event对象

2.传递参数

 三、修饰符

1.事件修饰符

2.按键修饰符

3.鼠标按键修饰符

四、数组变化侦测

1.变更方法

2.替换方法

---

一、事件处理

在Vue中我们可以使用 v-on 指令来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。此外，v-on 指令可以缩写为 @ 符号。

具体用法为：v-on: click = "handler"或者@click = "handler"。

事件处理器 (handler) 的值可以是内联事件处理器，也可以是方法事件处理器。

1.内联事件处理器

内联事件处理器是指事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)，通常用于简单场景：

<template>
  <button @click = "count++">Add</button>
  <p>Counter is: {{ count }}</p>
</template>

<script>
  export default {
    data() {
      return {
          count: 0
      }
    }
  }
</script>

2.方法事件处理器

方法事件处理器是一个指向组件上定义的方法的属性名或是路径，能够更加灵活地处理一些较为复杂的问题。

一般我们将所有的方法或者函数都放在与data同级的methods中，通过this读取data中的数据：

<template>
  <button @click = "addCount">Add</button>
  <p>Counter is: {{ count }}</p>
</template>

<script>
  export default {
    data() {
      return {
          count:0
      }
    },
    methods: {
      addCount() {
        console.log("pika");
        this.count ++
      }
    }
  }
</script>

二、事件传参

事件参数可以获取event对象和通过事件传递数据，Vue中的event对象与原生JS中的event类似

1.获取event对象

<template>
  <button @click = "addCount">Add</button>
  <p>Counter is: {{ count }}</p>
</template>

<script>
  export default {
    data() {
      return {
          count:0
      }
    },
    methods: {
      addCount(e) {
        console.log(e);
        e.target.innerHTML = "Add" + this.count;
        this.count ++
      }
    }
  }
</script>

2.传递参数

除了直接绑定方法名，我们还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件：

<template>
  <p @click = "Deliver(item)" v-for = "(item, index) of names" :key="index">{{ item }}</p>
</template>

<script>
  export default {
    data() {
      return {
          names: ["小火龙", "妙蛙种子", "杰尼龟"]
      }
    },
    methods: {
      Deliver(text) {
        console.log(text)
      }
    }
  }
</script>

当我们用自定义参数代替原生事件后，如果我们还想要获取event，不能在参数后直接添加event，而是需要在event前添加一个$符号：

<template>
  <p @click = "Deliver(item, $event)" v-for = "(item, index) of names" :key="index">{{ item }}</p>
</template>

<script>
  export default {
    data() {
      return {
          names: ["小火龙", "妙蛙种子", "杰尼龟"]
      }
    },
    methods: {
      Deliver(text, e) {
        console.log(text,e)
      }
    }
  }
</script>

 三、修饰符

1.事件修饰符

在处理事件时调用 event.preventDefault() 阻止默认事件或 event.stopPropagation() 阻止事件冒泡是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。

为解决这一问题，Vue为v-on提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：

.stop

.prevent 

.self 

.capture

.once 

.passive

具体功能读者可前往官方网站查阅：事件修饰符

下面以.stop为例，阻止事件冒泡：

<template>
  <div @click.stop = "clickDiv">
    <p @click.stop = "clickP">测试冒泡</p>
  </div>
</template>

<script>
  export default {
    methods: {
      clickDiv() {
        console.log("DIV")
      },
      clickP() {
        console.log("P")
      }
    }
  }
</script>

当我们点击“测试冒泡”时，只打印了P，而没有打印外层的DIV，说明阻止冒泡成功。

同时修饰语既可以采用链式书，写也可以只有修饰符 ：

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

2.按键修饰符

在监听键盘事件时，我们经常需要检查某些特定的按键。Vue允许我们在v-on或@监听按键事件时

添加按键修饰符，同时为一些常用的按键提供了别名：

.enter

.tab

.delete（捕获“Delete”和“Backspace”两个按键）

.esc

.space

.up

.down

.left

.right

下面以.enter为例，只有当key为“Enter”时，才会调用“submit”：

<template>
  <input @keyup.enter="submit" />
</template>

<script>
  export default {
    methods: {
      submit() {
        console.log("Submitted!")
      }
    }
  }
</script>

除了上述按键修饰符外，还存在四个特殊的系统按键修饰符：

.ctrl

.alt

.shift

.meta

系统按键修饰符和常规按键的区别在于：与keyup事件一起使用时，该按键必须在时间发出时处于按下状态。也就是说，keyup.ctrl只会在你仍然按住ctrl但松开了另一个键时被触发。若单独松开ctrl键将不会触发。这一点，大家在日常使用电脑的过程中应该也都深有体会。

  <!-- Alt + Enter -->
  <input @keyup.alt.enter="submit" />
  <!-- Ctrl + 点击 -->
  <div @click.ctrl="submit">Ctrl + 点击</div>

3.鼠标按键修饰符

鼠标按键修饰符有一下三种:

.left

.right

.middle

这些修饰符将处理程序限定为由特定鼠标按键触发的事件。具体用法与前文类似，这里就不在赘述。

四、数组变化侦测

1.变更方法

Vue能够侦听响应式数组的变更方法，并在他们被调用时触发相关的更新。这些变更方法包括：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

也就是说，当我使用上述这些变更方法时，UI可以自动被实时更新，当数组发生变化，UI便会产生相应的响应。下面我们来举例说明：

<template>
  <button @click = "addList">添加宝可梦</button>
  <ul>
    <li v-for = "(item, index) of names" :key = "index">{{ item }}</li>
  </ul>
</template>

<script>
  export default {
    data() {
      return {
        names:["小火龙", "妙蛙种子", "杰尼龟"]
      }
    },
    methods: {
      addList() {
        this.names.push("皮卡丘")
      }
    }
  }
</script>

 

可以看到，当我们点击按钮时，names数组被添加了一个元素，而UI界面也发生了变化，将新加入的元素渲染了出来。

2.替换方法

变更方法会对调用他们的原数组进行变更。相对的，也有一些不可变方法：filter()，concat()和slice()，这些都不会更改原数组，而是返回一个新的数组，不会引起UI的变化。

例如，我们将上文的addList修改为如下：

      addList() {
        console.log(this.names.concat("皮卡丘"));
        console.log(this.names)
      }

我们可以看到按下按钮后，我们得到了一个新的数组，而原数组并没有发生变化，UI也没有更新。

特别的，如果我们在使用concat()时想要原数组也发生变化，可以通过给原数组赋值的方式实现：

this.names = this.names.concat("皮卡丘");