1、打开Hbuilder、建立一个项目（引入vue.js的包，vue的官网可直接下载）、目录结构如下
2、用<script src="js/vue.js"></script>引入vue.js
3、建立两个按钮<input type="button" value="start" /><input type="button" value="stop" />
4、添加vue的渲染 <script> var vm=new Vue({ el:'#app', data:{ msg:'实现跑马灯效果' } }) </script>
5、添加click事件，以及字符串拆分，实现大致效果，如图
6、设置定时器、以及暂时效果
7、防止重复点击定时器
8、代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>测试第一个VUE(跑马灯效果)</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="start" @click="start"/> <input type="button" value="stop" @click="stop"/> <h4>{{msg}}</h4> </div> </body> <script> var vm=new Vue({ el:'#app', data:{ msg:'实现跑马灯效果', intervalId:null }, 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=end+start; },300) }, stop(){ clearInterval(this.intervalId) this.intervalId=null; } } }) </script></html>
