黑马vue---10-11、Vue实现跑马灯效果
一、总结
一句话总结：
1. 给 【浪起来】 按钮，绑定一个点击事件 v-on @
2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；
3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；
4. （资源）定时器设置一个即可，在浪起来 方法中判断有无定时器，在stop方法中将定时器清空
1、在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，要注意什么？
必须通过 this.数据属性名 或 this.方法名 来进行访问
在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名 或 this.方法名 来进行访问，这里的this，就表示 我们 new 出来的 VM 实例对象
2、vue的最大的便利之处是什么，及如何实现？
好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面
原理：VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去
二、Vue实现跑马灯效果
1、截图
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <!-- 1. 导入Vue包 -->10 <script src="./lib/vue-2.4.0.js"></script>11 </head>12 13 <body>14 <!-- 2. 创建一个要控制的区域 -->15 <div id="app">16<input type="button" value="浪起来" @click="lang">17<input type="button" value="低调" @click="stop">18 19<h4>{{ msg }}</h4>20 21 </div>22 23 <script>24// 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名 或 this.方法名 来进行访问，这里的this，就表示 我们 new 出来的 VM 实例对象25var vm = new Vue({26 el: '#app',27 data: {28 msg: '猥琐发育，别浪~~！',29 intervalId: null // 在data上定义 定时器Id30 },31 methods: {32 lang() {33 // console.log(this.msg)34 // 获取到头的第一个字符35 // this36 37 if (this.intervalId != null) return;38 39 this.intervalId = setInterval(() => {40 var start = this.msg.substring(0, 1)41 // 获取到 后面的所有字符42 var end = this.msg.substring(1)43 // 重新拼接得到新的字符串，并赋值给 this.msg44 this.msg = end + start45 }, 400)46 47 // 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】48 },49 stop() { // 停止定时器50 clearInterval(this.intervalId)51 // 每当清除了定时器之后，需要重新把 intervalId 置为 null52 this.intervalId = null;53 }54 }55})56 57 58// 分析：59// 1. 给 【浪起来】 按钮，绑定一个点击事件 v-on @60// 2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；61// 3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；62 </script>63 </body>64 65 </html>
跑马灯效果
HTML结构：<div id="app"><p>{{info}}</p><input type="button" value="开启" v-on:click="go"><input type="button" value="停止" v-on:click="stop"></div>
Vue实例：
// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {info: '猥琐发育，别浪~！',intervalId: null},methods: {go() {// 如果当前有定时器在运行，则直接returnif (this.intervalId != null) {return;}// 开始定时器this.intervalId = setInterval(() => {this.info = this.info.substring(1) + this.info.substring(0, 1);}, 500);},stop() {clearInterval(this.intervalId);}}});
