Vue初体验（四），关于事件v-on

来源：互联网发布：淘宝物流业务流程图编辑：程序博客网时间：2024/05/17 22:07

事件是每个框架都绕不过去的话题，实现的方式各有千秋，而Vue中，我们使用v-on的指令来进行事件监听。
1、使用v-on监听事件。示例代码如下：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Vue学习</title>        <script src="https://unpkg.com/vue/dist/vue.js"></script>    </head>    <style>        .style{            color: red        }    </style>    <body>        <div id="app">            <button v-on:click="message+=1">click</button>            <p>被点击了{{message}}次</p>        </div>        <script>            new Vue({                el: '#app',                data: {                    message: 0                }            })        </script>    </body></html>

2、正常情况下，事件应该写在函数中，而我们需要在Vue这个对象的参数中配置methods属性，里面就是相应的一些方法，这个方法通过this能访问数据。代码如下：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Vue学习</title>        <script src="https://unpkg.com/vue/dist/vue.js"></script>    </head>    <style>        .style{            color: red        }    </style>    <body>        <div id="app">            <button v-on:click="clicks">click</button>        </div>        <script>            new Vue({                el: '#app',                data: {                    message: 0                },                methods: {                    clicks: function(){                        alert("发生点击事件了")                    }                }            })        </script>    </body></html>

3、关于事件修饰符。
在Vue中，我们不得不牵扯一些dom相关的东西，比如阻止默认行为，阻止事件冒泡等等，但是正常情况下，我们应该着手处理的是数据逻辑，而不是和dom相关的东西，尽管我们确实能在事件中处理。（这里应该这么理解，MVC思想中，和dom相关的处理尽可能的隔离出去，我们应该专注于数据和逻辑），这就是事件修饰符的存在意义。通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once

<!-- 阻止单击事件冒泡 --><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><!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a><!-- 只有在 keyCode 是 13 时调用 vm.submit() --><input v-on:keyup.13="submit"><!-- 同上 --><input v-on:keyup.enter="submit"><!-- 缩写语法 --><input @keyup.enter="submit">

可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应。
.ctrl
.alt
.shift
.meta

<!-- Alt + C --><input @keyup.alt.67="clear"><!-- Ctrl + Click --><div @click.ctrl="doSomething">Do something</div>

0 0