Vue.js - 实例事件和修饰符 - 《Vue》

简介
.stop阻止冒泡
.self
.prevent
.sync
.once
监听键盘事件
其他的实例事件

简介

Vue里面有实例属性（$data,$el），实例方法(methods)，因为这两个和常用选项类似，不是很常用，所以这次主要写一下实例事件

.stop阻止冒泡

其实就是原生JS 里面的阻止冒泡.stopPropagation()的缩写
具体用法

<-html->
<div @click="divClick" style="width: 100px;height: 100px;background: red;">
    <button @click.stop="btnClick">点击按钮</button>
</div>
<-js->
<script>
          let app = new Vue({
        el: '#app',
        data:{
        },
        methods:{
            divClick(){
                alert('div被点击了')
            },
            btnClick(){
                alert('btn被点击了')
            }
        }
    })
</script>

这样点击按钮的时候只会弹窗 btn 被打印了

.self

只是作用在元素本身而非子元素的调用
具体用法

<-html->
<div @click.self="divClick" style="width: 100px;height: 100px;background: red;">
    <button @click="btnClick">点击按钮</button>
</div>
<-js->
<script>
          let app = new Vue({
        el: '#app',
        data:{
        },
        methods:{
            divClick(){
                alert('div被点击了')
            },
            btnClick(){
                alert('btn被点击了')
            }
        }
    })
</script>

.prevent

每次提交表单都会重载页面，而.prevent 的作用就是提交事件并且不会重载页面
具体用法

<-html->
    <form action="" @submit.prevent="hangle">
        <button type="submit"> 提交表单</button>
    </form>
<-js->
<script>
          let app = new Vue({
        el: '#app',
        data:{
        },
        methods:{
                        hangle(){
                    alert("不会重新加载页面了")
            }
        }
    })
</script>

.sync

<div id="app">
    <div>{{bar}}</div>
    <my-comp :foo.sync="bar"></my-comp>
    <!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> -->
</div>
<script>
    Vue.component('my-comp', {
        template: '<div @click="increment">点我+1</div>',
        data: function() {
            return {copyFoo: this.foo}
        },
        props: ['foo'],
        methods: {
            increment: function() {
                this.$emit('update:foo', ++this.copyFoo);
            }
        }
    });
    new Vue({
        el: '#app',
        data: {bar: 0}
    });
</script>

代码
会被扩展成
，
就是一个语法糖。

.once

只执行一次事件

<-html->
once: <br>
<button @click="onceMethod">执行无限次</button>
<button @click.once="onceMethod">只是执行一次</button>
<hr>
<script>
          let app = new Vue({
        el: '#app',
        data:{
        },
        methods:{
                        onceMethod(){
                    alert("执行 1 次")
            }
        }
    })
</script>

监听键盘事件

本次以enter 为例，其实还有其他的按键
.enter
.tab
.delete
具体可以看按键修饰符

<-html->
监听键盘事件：
<br>
<input @keyup.13 ="submitMe">
<input @keyup.enter ="submitMe">
<script>
          let app = new Vue({
        el: '#app',
        data:{
        },
        methods:{
            submitMe() {
            alert('按下了enter键')
            }
        }
    })
</script>

完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方法与事件</title>
</head>
<body>
<div id="app">
    <hr>
    stop用法： <br>
    <div @click.self="divclick" style="height: 100px;width: 100px;background-color: blue">
        <button @click="btnlcick">点击</button>
    </div>
    <hr>
    prevent的用法：
    每次提交表单都会重载页面
    <form action="" @submit.prevent="hangle">
        <button type="submit"> 提交表单</button>
    </form>
    <hr>
    once: <br>
    <button @click="onceMethod">执行无限次</button>
    <button @click.once="onceMethod">只是执行一次</button>
    <hr>
    监听键盘事件：
    <br>
    <input @keyup.13 ="submitMe">
    <input @keyup.enter ="submitMe">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            count: 0
        },
        methods:{
            divclick:function () {
                alert('div被点击了')
            },
            btnlcick:function () {
                alert('BUTTON被点击了')
            },
            hangle:function () {
                alert('我不重载了，页面也不刷心了')
            },
            onceMethod:function () {
                alert('多少次了？')
            },
            submitMe:function () {
            alert('您按下了enter键')
            }
        }
    })
</script>
</body>
</html>

其他的实例事件

$on（在构造器外部添加事件）
$on接收两个参数，第一个参数是调用时的事件名称，第二个参数是一个匿名方法

app.$on('reduce',function(){
    console.log('执行了reduce()');
    this.count--;
});

$off（关闭事件）

function off(){
    console.log('关闭事件');
    app.$off('reduce');
}

$emit（事件调用）

function reduce() {
    // 事件调用
    console.log('emit事件调用');
    app.$emit('reduce');
}