<body>
<div id="app">
<input type="button" value="浪起來" @click="lang" />
<input type="button" value="低調" @click="stop" />
{{ msg }}
</div>
<script>
// 注意：在VM實例中，如果想要獲取 data 上的數據，或者想要調用 methods 中的方法，必須通過 this.數據屬性名 或者 this.方法名 來進行訪問，這裏的this，就表示我們 new 出來的 VM實例對象
var vm = new Vue({
el: '#app',
data: {
msg: '猥瑣發育，別浪~~！',
intervalId: null, //在data上定義定時器 id
},
methods: {
lang() {
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)
// 每當清除了定時器之後，將id重新賦值爲 null
this.intervalId = null
}
},
})
// 分析
// 1. 給 【浪起來】 按鈕，綁定一個點擊事件 v-on @
// 2. 在按鈕的事件處理函數中，寫相關的業務邏輯代碼，拿到 msg 字符串，然後調用字符串的 substring 來進行字符串的截取操作，把第一個字符截取出來，放到最後一個位置即可
// 3. 爲了實現點擊一下按鈕，自動截取的功能，需要把2步驟的代碼放到定時器裏
</script>
</body>
通過這個小實戰複習以前的知識
this：在VM實例中，如果想要獲取 data 上的數據，或者想要調用 methods 中的方法，必須通過 this.數據屬性名 或者 this.方法名 來進行訪問，這裏的this，就表示我們 new 出來的 VM實例對象- VM實例，會監聽自己身上 data 中所有數據的改變，只要數據一發生變化，就會自動把最新的數據，從data上同步到頁面中去；【好處：程序猿只需要關心數據，不需要考慮如何重新渲染DOM頁面】