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> ~~~