黑马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 实例对象
25     var vm = new Vue({
26       el: '#app',
27       data: {
28         msg: '猥琐发育，别浪~~！',
29         intervalId: null // 在data上定义 定时器Id
30       },
31       methods: {
32         lang() {
33           // console.log(this.msg)
34           // 获取到头的第一个字符
35           // this
36
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.msg
44             this.msg = end + start
45           }, 400)
46
47           // 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
48         },
49         stop() { // 停止定时器
50           clearInterval(this.intervalId)
51           // 每当清除了定时器之后，需要重新把 intervalId 置为 null
52           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>

跑马灯效果

  1. HTML结构：

<div id="app"><p>{{info}}</p><input type="button" value="开启" v-on:click="go"><input type="button" value="停止" v-on:click="stop"></div>
  1. 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);}}});

转载于:https://www.cnblogs.com/Renyi-Fan/p/11618809.html

黑马vue---10-11、Vue实现跑马灯效果相关推荐

  1. 【Vue案例一】实现跑马灯效果

    在Vue学习笔记(一)中我们已经学过了 v-on 这个指令,可以用来实现事件的绑定,本文我们利用 v-on 来实现一个简单的跑马灯效果,就是如下这种效果: 第一步:导入Vue包 <script ...

  2. vue 手写图片左右跑马灯 效果

    效果图与代码贴上: 1.html部分 <template><div class="box"><Icon class="icons1 icon ...

  3. Vue实现跑马灯效果以及封装为组件发布

    Vue 实现跑马灯效果 前言 最近做活动需要做跑马灯效果,其他同事也有实现,本来打算复制他们代码,发现都是使用setInterval实现了,也没有封装为组件,所以自己用CSS3实现了一下跑马灯效果,并 ...

  4. 分别用Js和vue实现跑马灯效果

    写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴 ...

  5. 【前端框架学习】第一次实验 跑马灯效果的制作

    一.什么是跑马灯效果 每隔一段时间,排在首位的字符会被后一个字符所代替,而首位字符会被移到队尾. 二.实验过程 1.首先创建控制区域与vue实例: <div id="app" ...

  6. html网页内容自动滚动实现跑马灯效果

    1.效果1 超出div高度,文本自动滚动(像跑马灯一样从下往上滚动) 一个div里面有文字 1.如果文字没超出div高度:文字不用滚动 2.如果文字太多超出了div高度,那些文字就自动滚动 ps:滚动 ...

  7. web展现mysql_web页面实现LED跑马灯效果(涉及web前端、原生JS、PHP、mysql)

    本帖最后由 yoin 于 2019-11-21 16:24 编辑 产品需求: LED跑马灯页面展示内容(班级电脑展示) setLED更改内容(老师电脑更改内容) LED页面及时更新内容设计思路: 最初 ...

  8. android 图片跑马灯动画,【Android自定义View】- 文本跑马灯效果

    简介 有些时候,文字过长,或者有多条需要展示的文本时,我们需要将文本进行左右滚动,多条文本时,还得上下滚动以实现展示不同的文本内容.这时候就需要我们自定义view来实现文本跑马灯效果了. 效果图 jj ...

  9. iOS中跑马灯效果小结

    时光过得好快,记忆中刚刚从春节返回没有多久,清明.五一已飞逝而过,眨眼已到盛夏季节.不过还好,济南这两年不算太热,刚开始升温几天,一场及时雨总能让温度保持适宜.为了纪念一下青春的尾巴,也为了能有个健康 ...

最新文章

  1. LNMP安装与启动脚本编写
  2. linux查询关键词上下行_Linux：从文件中搜索关键字并显示行数（cat,grep函数）
  3. android-侧滑菜单
  4. 招聘 | 香侬在召唤：算法工程师，让金融把你的代码变现
  5. 建立一个laravel项目
  6. linux emacs配置文件,[z]使用.emacs.d目录管理Emacs配置文件
  7. linux下无mysql命令_linux下mysql命令
  8. 服务器技术文件,服务端开发技术文档要包含什么？
  9. 消色差、半复消色差、复消色差的区别
  10. php 图片木马,php图片木马怎么运行
  11. Monte Carlo(MC) Policy Evaluation 蒙特·卡罗尔策略评估
  12. 一个有趣的字符滚动GIF动态验证码识别
  13. bluedroid源码分析之ACL包发送和接收（二）
  14. 万能遥控程序c语言,51单片机万能红外遥控解码程序
  15. 项目经理证书PMP怎么考
  16. 设计模式综合实例分析之数据库同步系统（一）
  17. 关于“/usr/include/openssl/bn.h 288 error: parse error before BN_ULONG解决方法
  18. 如何让alias永久生效？
  19. windows怎么查看本地80端口被占用
  20. github代码推送

热门文章

  1. 2017-06-14 Linux 添加密钥key
  2. libgdx学习记录18——Box2d物理引擎
  3. 30天敏捷结果（4）：放弃一些事情
  4. Ubuntu的which、whereis、locate和find命令
  5. Python学习笔记《Python核心编程》第4章Python对象
  6. 【原】HTML页面元素加载顺序研究报告（2）----背景图片
  7. 前方车辆检测的常用方法
  8. 工程架构师对3月14号的白×××人节有什么看法？？
  9. YunTable开发日记（3） – BigTable的数据模型和调用接口 （转载）
  10. 使用 Electron 从协议处理器启动应用程序