VUE指令合集（更新中）

前言：学习前端的都知道，vue框架的地位和重要性，而学会vue指令便是基础，但是vue指令很多，一个全面的指令合集可以让你在需要时轻松找到，由于本人还在学习中，所以vue指令还在更新中，以下便是我目前学过的指令。

1.vue指令v-bind

目标: 给标签属性设置vue变量的值

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

简写：:属性名="vue变量"

<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

总结: 把vue变量的值, 赋予给dom属性上, 影响标签显示效果  

2.vue指令v-on

目标: 给标签绑定事件

语法：

• 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指令v-on事件对象

目标: vue事件处理函数中, 拿到事件对象

语法:

• 无传参, 通过形参e直接接收

• 有传参, 通过$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.vue指令v-on修饰符

目的: 在事件后面.修饰符名 - 给事件带来更强大的功能

语法:@事件名.修饰符="methods里函数"

• .stop - 阻止事件冒泡

• .prevent - 阻止默认行为

• .once - 程序运行期间, 只触发一次事件处理函数

<template>
  <div @click="fatherFn">
    <!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
    <button @click.stop="btn">.stop阻止事件冒泡</button>
    <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
    <button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn(){
      console.log("father被触发");
    },
    btn(){
      console.log(1);
    }
  }
}
</script>

5.vue指令v-on按键修饰符

目标: 给键盘事件, 添加修饰符, 增强能力

语法:

• @keyup.enter - 监测回车按键

• @keyup.esc - 监测返回按键

• 更多修饰符 事件处理 — Vue.js

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input