06-Vue基础之事件处理

个人名片：
作者简介：一名大二在校生
个人主页：坠入暮云间x
座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
**学习目标: 坚持每一次的学习打卡

前言

在vue的学习过程中，我们常会用到事件处理，比如在表单提交，按钮中，列表多级菜单折叠等，都是需要监听点击事件才可以实现。之前学习js中也常用到各种事件，在vue中我们将事件处理可以通过事件来控制数据，帮助我们更好的实现

侦听事件

1.事件的基本使用

1. 使用 v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2. 事件的回调需要配置在methods对象中，最终会在vm上；
3. methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5. @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

2.v-on

语法：
缩写：@
注意：处理时间的函数名必须写在methods中，要让当前组件实例可访问
代码演示：

  <div id="app">
        <h2>点击数：{{counter}}</h2>
        <h2></h2>
        <button @click="increment">+</button>
        <button  @click="decrement">-</button>
        
    </div>
    <script>
        /*v-on指令
        作用：绑定事件监听器
        缩写 @
        语法： Function|Inline Statement|Object
        参数： event

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

事件修饰符

语法：

1. prevent：阻止默认事件（常用）；event.preventDefault()
2. stop：阻止事件冒泡（常用）；event.stopPropagation()
3. once：事件只触发一次（常用）；
4. capture：使用事件的捕获模式；
5. self：只有event.target是当前操作的元素时才触发事件；
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

修饰符也可以同时使用多个：

<button v-on:事件名.事件修饰符1.事件修饰符2.事件修饰符3="处理函数"></button>

代码示例：

 <div id="app">
        <!-- .stop 修饰符 阻止事件冒泡 -->
       <div @click="divClick">
        <button @click.stop="btnClick">按钮</button>
    </div>
    <!-- .prevent修饰符使用 提交时间不在重载页面 -->
    <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitClick">
        <button @click.prevent="submitClick">按钮1</button>
    </form>
    <!-- 监听某个键盘的键帽点击 -->
    <input type="text" @keyup.enter="keyup">
    <!-- once 只触发一次使用 -->
    <button @click.once="btn2Click">按钮2</button>
    </div>
    <script>
        const app =new Vue({
        el:'#app',
        data:{
            message:'你好啊'
        },
        methods:{
            btnClick(){
               alert('btnClick');
            },
            divClick(){
                alert('divClick')
            },
            submitClick(){
                alert('submitClick')
            },
            keyup(){
                alert('keyup')
            },
            btn2Click(){
                alert('btn2Click')
            }
        }
      })
    </script>

关键修饰符

1. 回车 => enter
2. 删除 => delete (捕获“删除”和“退格”键)
3. 退出 => esc
4. 空格 => space
5. 换行 => tab (特殊，必须配合keydown去使用)
6. 上 => up
7. 下 => down
8. 左 => left
9. 右 => right