v-on绑定事件 · vue

v-on用于绑定事件 v-on:click 可以简写成@click ~~~ <input type="button" value="开始" v-on:click="lang"> <input type="button" value="停止" @click="stop"> ~~~ ** 跑马灯效果** ~~~ <body>  <div id="app"> <input type="button" value="开始" v-on:click="start"> <input type="button" value="停止" @click="stop"> <h4>{{ msg }}</h4> </div> <script> // 注意：在 VM实例中，如果想要获取 data 上的数据，或者想要调用 methods 中的方法，必须通过 this.数据属性名或 this.方法名来进行访问，这里的this，就表示我们 new 出来的 VM 实例对象 var vm = new Vue({ el: '#app', data: { msg: '我们都有一个家名字叫中国', intervalId: null // 在data上定义定时器Id }, methods: { start() { if (this.intervalId != null) return; this.intervalId = setInterval(() => { var start = this.msg.substring(0, 1) // 获取到后面的所有字符 var end = this.msg.substring(1) // 重新拼接得到新的字符串，并赋值给 this.msg this.msg = end + start }, 400) // 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】 }, stop() { // 停止定时器 clearInterval(this.intervalId) // 每当清除了定时器之后，需要重新把 intervalId 置为 null this.intervalId = null; } } }) </script> </body> ~~~ ### 事件修饰符： * .stop 阻止冒泡 * .prevent 阻止默认事件 * .capture 添加事件侦听器时使用事件捕获模式 * .self 只当事件在该元素本身（比如不是子元素）触发时触发回调 * .once 事件只触发一次组织a标签的默认事件（页面链接），只当做一个按钮 ~~~ <a href="" @click.prevent="del(item.id)">删除</a> ~~~