Vue.js：vue指令（给标签属性赋Vue变量v-bind，绑定事件 v-on）vue事件处理函数中, 拿到事件对象，6个事件修饰符

1、 给标签属性赋Vue变量v-bind

在vue中，v-bind指令可以动态的给标签的属性设置值，

• 语法：v-bind:属性名="vue变量"
• 简写：:属性名="vue变量"

//完整写法
<a v-bind:href="url">我是a标签</a>
//简写
<img :src="imgSrc">

<script>
export default {
  data(){
      return {
          url:"http://www.baidu.com",
          imgSrc:"https://www.itcast.cn/2018czgw/images/logo2.png"
      }
  }
}
</script>

2、给元素绑定事件 v-on

• 语法

  • v-on:事件名=“methods中的函数”
  • v-on:事件名=“methods中的函数(实参)”

• 简写: @事件名=“methods中的函数”

• <!-- vue指令:   v-on事件绑定-->
  <p>你要买商品的数量: {{count}}</p>
  <button v-on:click="count = count + 1">增加1个</button>
  <button v-on:click="addFn">增加1个</button>
  <button v-on:click="addCountFn(5)">一次加5件</button>
  <button @click="subFn">减少</button>
  
  <script>
      export default {
          // ...其他省略
          methods: {
              addFn(){ // this代表export default后面的组件对象(下属有data里return出来的属性)
                  this.count++
              },
              addCountFn(num){
                  this.count += num
              },
              subFn(){
                  this.count--
              }
          }
      }
  </script>
  

3、vue事件处理函数中, 拿到事件对象

语法:

• 无传参, 通过形参直接接收
• 传参, 通过$event指代事件对象传给事件处理函数

<template>
  <div>
    //不传参写法
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
        //传参写法
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

4、v-on事件修饰符

语法:

• @事件名.修饰符=“methods里函数”

1. prevent阻止默认事件
2. stop阻止事件冒泡
3. once事件只触发一次
4. capture使用事件的捕获模式,修饰符加在父盒子,先捕获再冒泡
5. self 只有e.target是当前操作的元素时才触发事件
6. passive 事件的默认行为立即执行，不必等待事件回调执行完毕，一般用于移动端,能够提升移动端性能

//CV自Vue.js官网
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为