Vue學習之路第七篇：跑馬燈項目實現
阿新 • • 發佈：2019-01-25
let rip char eth sta 對象 app 清除 一個
前面六篇講解了Vue的一些基礎知識，正所謂：學以致用，今天我們將用前六篇的基礎知識，來實現類似跑馬燈的項目。
學前準備：
需要掌握定時器的兩個函數：setInterval和clearInterval以及作用域的概念
上代碼，大家可以復制下來直接運行看看效果（vue.min.js 第一篇有下載鏈接）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>跑馬燈效果</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<!-- 頁面部分 -->
<div id="app">
<button @click="go()">開始</button> <button @click="stop()">停止</button>
<p>{{ msg }}</p>
</div>
<!-- JS部分 -->
<script type="text/javascript">
var
代碼分析：
頁面上定義兩個按鈕，分別用來觸發跑馬燈效果和停止跑馬燈效果。js部分分別定義了兩個對象以及對應的方法。
1、go方法主要是使用定時器，每次把msg文本分成兩個部分start和end，start為msg下標為0的字符串，end為msg下標為1至結尾的字符串，然後把end和start拼接為一個新的字符串賦值給msg，從而實現類似於跑馬燈的效果。
2、end方法用來清除定時器，終止跑馬燈效果。
3、methods方法裏想要使用datat裏的數據，需要使用關鍵字：this，但是這裏要註意this作用域的範圍。
4、大家可以看到每次改變msg文本內容的時候都會立刻反應在頁面上，從側面可以看出Vue響應式的特點。
內容還是很簡單的，主要是用來練習基礎的Vue知識。
學編程一定要勤動手，多練習，多思考！
每天進步一點點！
Vue學習之路第七篇：跑馬燈項目實現