前言
最近在學習vue，看的某站上某馬的教程。也看官網的文檔，我學習一直兩者結合學習。很感謝某馬的教程，講的非常容易理解，真是家裏貧窮，不然肯定去給某馬點學費。不過，我一直對同學報班的同學宣傳某馬。由於以下代碼與源代碼差別不大，不知道該不該投自制，算了，還是投翻譯吧！如果對貴公司有影響，聯繫我必刪除。
代碼實現
<!--
該網頁用於製作一個跑馬燈效果Demo
//分析：
//1.給｛浪起來｝按鈕，綁定一個點擊事件 v-on @
2. 在按鈕的時間處理函數中，寫相關的業務邏輯代碼：
拿到msg字符串，然後調用字符串的substring方法來進行字符串的截取操作，
把第一個字符截取出來，放到最後一個位置即可；
3.爲了實現點擊一下按鈕，自動截取的功能，需要把2步驟中的代碼，放到一個定時器中去。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--1.導入Vue包-->
<script src="js/vue.js"></script>
</head>
<body>
<!--2.創建一個要空值的區域-->
<div id="app">
<input type="button" value="跑起來" @click="lang"/>
<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:{
lang(){
// var _this=this
// console.log(this.msg)
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>
</html>