关于Vue的学习笔记（五）

关于Vue的一些基本参数、方法及其应用规则

v-on：绑定事件监听器。

在前端开发中，我们需要经常用到交互。这个时候，我们必须监听用户发生的事件，比如点击、拖拽、键盘事件等等，在Vue中我们使用v-on帮助我们便于监听。

语法糖/缩写：@

预期：Function|Inline Statement|Object

参数：event

依然以之前的计算器作为例子：

<div id="app">
  <h2>计算器:{{count}}</h2>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      count: 0,
    },
    methods:{
      increment() {
        return this.count++
      },
      decrement() {
        return this.count--
      }
    }
  })
</script>

这里我们使用了v-on的语法糖形式，当点击+按钮时，+按钮绑定的计数增加事件就会触发，一般我们将DOM中需要调用的方法写在挂载该DOM的Vue实例的methods中。

关于调用事件中的参数，需要注意两个问题：

1.如果该方法不需要额外的参数，那么该方法后的()可以不写，参考本例。但是注意，如果方法本身中有一个参数，那么Vue会默认将浏览器产生的原生事件event参数传进去。

2.如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

<div id="app">
  <h2>计算器:{{count}}</h2>
  <button @click="incrementTen(10, $event)">+10</button>
  <button @click="decrement">-</button>
</div>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      count: 0,
    },
    methods:{
      incrementTen(count,event) {
        return this.count += 10;
        console.log(event)
      },
      decrement() {
        return this.count--
      }
    }
  })
</script>

v-on修饰符：

在某些情况下，我们拿到event的目的可能是进行一些事件处理。Vue提供了修饰符来帮助我们方便处理一些事件：

.stop：调用event.stopPropagations()，当div中嵌套了多个监听事件但你希望外层的监听事件不会影响嵌套内层的监听事件，可使用该修饰符

<div @click="divClick">
    aaaa
    <button @click="btnClick">按钮</button>
  </div>

像如此，若点击按钮则会同时触发外层的divClick事件，这显然不是我们想要的。因此我们可以使用stop修饰符修饰button中的click事件使得不会触发外层的监听。

.prevent：调用event.preventDefault()，当你不希望使用者走捷径或是去一些不安全的网站时，或者该监听方法您认为并不稳定时，可以使用prevent阻止使用者的行为。

.(keyCode|keyAlias)：仅当事件是从特定键触发时才触发回调

.once：只触发一次回调，即触发一次再不触发监听事件

<!--停止冒泡-->
<button @click.stop="doThis"></button>
<!--阻止默认行为-->
<button @click.prevent="doThis"></button>
<!--阻止默认行为,没有表达式-->
<form @submit.prevent></form>
<!--串联修饰符-->
<button @click.stop.prevent="doThis"></button>
<!--键修饰符，键别名-->
<input @keyup.enter="onEnter">
<!--键修饰符，键代码-->
<input @keyup.13="onEnter">
<!--点击回调只会触发一次-->
<button @click.once="doThis"></button>