Vue中事件处理器

2018-03-14

监听事件

vue 使用 v-on监听DOM事件来触发js代码

1	<button v-on:click="count+1">增加1</button>

方法事件处理器

//html
<button v-on:click="sayhello">调用函数</button>

//vue
methods:{
    sayhello:function(){
        alert("hello world!")
    }
}

这里调用的函数也可以传参数

事件修饰符

<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

1 2	<!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a>

Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：
全部的按键别名：

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

可以通过全局 config.keyCodes 对象自定义键值修饰符别名

点击enter的时候提交

1	<input @keyup.enter="submit">

点击和键盘事件实例

<body>
    <div id="app">
        <!-- <div class="box" :class="{active:isactive}"></div>
        <button @click="changecolor">点击变色</button> -->
        <!-- 输入完成后点击enter 键提交 -->
        <p>输入点击添加 或者键盘点击enter 事件确定</p>
        <button @click="show">添加</button>
        <input type="text" @keyup.enter="show" v-model="message">
        <ol>
            <li v-for="(item,index) in showmessage">
                <span>{{item}}</span><button @click="deleate(index)">删除</button>
            </li>
        </ol>

    </div>
    <script>
        var app1 = new Vue({
            el: "#app",
            data: {
                // isactive: false,
                showmessage: [

                ],
                message: ''

            },
            methods: {
                // changecolor: function () {
                //     this.isactive = true
                // },
                show: function () {
                    this.showmessage.push(this.message)
                    this.showmessage.reverse()
                },
                deleate: function (index) {
                    this.showmessage.splice(index, 1)
                }
            }
        })
    </script>
</body>