VUE第二天(制作跑马灯效果)
先来练习一下前面看的一些基础代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Day2</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div v-for="n in 9"> <b v-for="m in n"> {{m}}*{{n}}={{m*n}} </b> </div> </div> <script> new Vue({ el:'#app' }) </script> </body> </html>
<!--正片开始-->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Day2</title> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="Move" @click='Move'> <input type="button" value="Stop" @click='Stop'> <h1>{{ msg }}</h1> </div> <pre> <h2> 1,用v-on给move按钮绑定时间 2.在按钮的时间处理函数中,写入相关方法或逻辑代码 3.获取msg字符串,进行截取操作调用字符串的substring的方法,进行字符串的截取放到最后的位置 4.为了实现循环点击按钮自动截取的功能需要把2.放入一个定时器中 </h2> </pre> <!-- 正片开始 --> <script> var vm = new Vue( /* 在vm实列中,如果我们想要调用data中的数据或者想要调用methods中的方法必须通过 this. 数据属性名 或this.方法名来进行访问,这里的this表示new出来的vm实例 */ { el:'#app', data:{ msg:'hello Vue I like Vue ', intervalId:null//在data上面定义一个计时器 }, methods:{ Move(){ if(this.intervalId) return; this.intervalId = setInterval(() =>{ //箭头函数内部的this指针和外部的this始终保持一致 var start = this.msg.substring(0,1) var end = this.msg.substring(1) this.msg = end + start; }, 400)//定时器每隔400毫秒运行一次setIntervalId内部的函数 }, Stop(){ clearInterval(this.intervalId) /*每当clear清除之后将重新赋值为null,否则再次点击定时器开关将会出问题*/ this.intervalId = null } } } ) </script> </body> </html>