四、VUE事件处理

一、初识VUE
二、再识VUE-MVVM
三、VUE数据代理
四、VUE事件处理
五、VUE计算属性
六、Vue监视属性
七、VUE过滤器
七、VUE内置指令
九、VUE组件

事件处理

• Vue中的事件可以分为两类，一类是原生事件（如点击事件），一类是自定义事件（如子组件向父组件传值时触发事件）
• 事件处理的思路都是用监听的形式对事件名进行监听，当该事件被触发时就执行相应的回调，可以是一段代码，或是一个函数。
• 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名

<!--点击按钮时打印出字符串click-->
<button @click="console.log('click')"></button>

• 事件的回调需要配置在methods对象中，最终会在vm上
• methods中配置的函数，不要用箭头函数！否则this就不是vm了
• methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
• @click=“showInfo1” 和 @click=“showInfo1($event)” 效果一致，但后者可以传参

<button v-on:click="showInfo1">点我提示信息1</button>
<!--简写形式 @click-->
<button @click="showInfo2($event,66)">点我提示信息2</button>

<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data(){
            return {
                name: 'shanghai',

            }
        },
        //methods配置事件处理的回调函数
        methods:{
            showInfo1(e){
                //默认给你传递event参数
                //当是箭头函数的话this那就是window
                console.log(this === vm); //this是vue实例
                console.log('你好');
            },
            //接收参数
            showInfo2(e,num){
                console.log(e.target);//
                console.log(`接收参数：${num}`);
            }
        }
    });
</script>

事件修饰符

• 修饰符是用 . 表示的指令后缀
• .prevent：阻止默认事件
• .stop：阻止事件冒泡
• .once：事件只触发一次
• .capture：使用事件的捕获模式
• .self：只有event.target是当前操作的元素时才触发事件
• .passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

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

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

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
<div @click.capture="doThis">...</div>

<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>

<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

• 事件修饰符可以连用

<!-- 修饰符串联使用的情况：-->
<a v-on:click.stop.prevent="doThat"></a>

请勿同时使用 .passive 和 .prevent，因为 .passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则 .prevent 会被忽略，并且浏览器会抛出警告。

按键别名

• enter =回车

<input type="text" @keyup.enter="showInfo" placeholder="按下回车提示输入"/>   

• delete=删除\退格

 <input type="text" @keyup.delete="showInfo" placeholder="退格或删除提示输入"/>

• 退出 = esc

<input type="text" @keyup.esc="showInfo" placeholder="按下esc提示输入"/>

• 换行 = tab (特殊，必须配合keydown去使用)

<input type="text" @keydown.tab="showInfo" placeholder="按下tab示输入"/>

keydown : JavaScript事件，用于检查用户是否按了键盘上指定的键

<input type="text" @keyup.ctrl="showInfo" placeholder="按下command提示输入"/>

<input type="text" @keydown.p="showInfo" placeholder="按下p提示输入"/>

• 键盘事件的修饰符也可以连用

<input type="text" @keydown.command.g="showInfo" placeholder="按下command和g提示输入"/>