黑马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、代码

 <!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>Document</title>

   <!-- 1. 导入Vue包 -->

   <script src="./lib/vue-2.4.0.js"></script>

 </head>

 <body>

   <!-- 2. 创建一个要控制的区域 -->

   <div id="app">

     <input type="button" value="浪起来" @click="lang">

     <input type="button" value="低调" @click="stop">

     <h4>{{ msg }}</h4>

   </div>

   <script>

     // 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名  或  this.方法名 来进行访问，这里的this，就表示 我们 new 出来的  VM 实例对象

     var vm = new Vue({

       el: '#app',

       data: {

         msg: '猥琐发育，别浪~~！',

         intervalId: null // 在data上定义 定时器Id

       },

       methods: {

         lang() {

           // console.log(this.msg)

           // 获取到头的第一个字符

           // this

           if (this.intervalId != null) return;

           this.intervalId = setInterval(() => {

             var start = this.msg.substring(0, 1)

             // 获取到 后面的所有字符

             var end = this.msg.substring(1)

             // 重新拼接得到新的字符串，并赋值给 this.msg

             this.msg = end + start

           }, 400)

           // 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】

         },

         stop() { // 停止定时器

           clearInterval(this.intervalId)

           // 每当清除了定时器之后，需要重新把 intervalId 置为 null

           this.intervalId = null;

         }

       }

     })

     // 分析：

     // 1. 给 【浪起来】 按钮，绑定一个点击事件   v-on   @

     // 2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；

     // 3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；

   </script>

 </body>

 </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 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        info: '猥琐发育，别浪~！',

        intervalId: null

      },

      methods: {

        go() {

          // 如果当前有定时器在运行，则直接return

          if (this.intervalId != null) {

            return;

          }

          // 开始定时器

          this.intervalId = setInterval(() => {

            this.info = this.info.substring(1) + this.info.substring(0, 1);

          }, 500);

        },

        stop() {

          clearInterval(this.intervalId);

        }

      }

    });
 

黑马vue---10-11、Vue实现跑马灯效果的更多相关文章

  1. Vue学习笔记四：跑马灯效果

    目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...

  2. vue实现跑马灯效果

    vue实现跑马灯效果为阿中哥哥应援 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...

  3. VUE小案例--跑马灯效果

    自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

  4. vue学习第二天：Vue跑马灯效果制作

    分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...

  5. marquee标签实现跑马灯效果--无缝滚动

    今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...

  6. flex 简单跑马灯效果（竖着显示）

    <mx:Move id="move_area" target="{VBox_AreaWarning}"/> //move效果,模拟跑马灯 <s ...

  7. Android学习总结——TextView跑马灯效果

    Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须 ...

  8. ListView 中的TextView实现跑马灯效果

    案例:怎么样在一个ListView中含有TextView的item中实现字母滚动呢.这个在一些特定的场合经常用得到.如下图,当焦点位于某个item的时候其内容就自动滚动显示 要实现这样的效果,废话不多 ...

  9. table数据跑马灯效果

    1.使用marquee标签实现普通文本字符串跑马灯效果. <marquee behavior="scroll" scrollamount="3" styl ...

随机推荐

  1. python图像处理-生成随机验证码

    前面说了PIL库,还说了图片的缩放.旋转和翻转.现在说下网站上常用的随机验证码的生成.参考网站:https://www.liaoxuefeng.com/wiki/1016959663602400/10 ...

  2. shell中处理参数getopts命令

    一.getopts 简介 由于shell命令行的灵活性,自己编写代码判断时,复杂度会比较高.使用内部命令 getopts 可以很方便地处理命令行参数.一般格式为:getopts optstring n ...

  3. 第四章·Kibana入门-安装,索引添加及界面功能

    1.Kibana简介及部署 什么是Kibana? Kibana是一个通过调用elasticsearch服务器进行图形化展示搜索结果的开源项目. Kibana安装及配置 #将Kibana安装包上传至服务 ...

  4. linux常用查看命令

    一般查看 cat -n 文件名 n 代表显示行号 分页查看 more 文件名 more -50 文件名 -50 代表一页显示50行 向下翻页  空格 向上翻页 b more +/搜索值 文件名 查找文 ...

  5. springboot配置对jsp页面的解析支持

    pom.xml文件配置依赖信息 <!--引入Spring Boot内嵌的Tomcat对JSP的解析包,不加解析不了jsp页面--> <dependency> <group ...

  6. Python中的字符串及其相关操作

    1.表示: 字符串可以用单引号或者双引号括起来,两者效果是完全一样的. 针对较长的字符串,也可以用三个引号括起来,即"""..."""或者' ...

  7. Python——import与reload模块的区别

     原创声明:本文系博主原创文章,转载或引用请注明出处. 1. 语法不同 import sys reload('sys') 2. 导入特性不同 import 和reload都可以对同一个模块多次加载, ...

  8. Jmeter：非 GUI 命令行执行脚本文件

    介绍 进行性能测试时,Jmeter 官方文档声明是不建议在 GUI 执行的,此时需要用到命令行. 第一步:环境配置 把 Jmeter安装目录\bin 添加到 系统环境变量path 第二步:命令参数 - ...

  9. JAVA WEB初接触——简单的MVC架构

    1.概述 之前有过开发web的经验,因此我不会向无头苍蝇一般,心里还是有点数的

  10. Git-------常用操作记录

    说明: 一般情况下,git要将内容提交到本地仓库,都是先将内容提交到暂存区,然后再从暂存区提交到本地仓库. 常用命令(一个简单的示例操作): git init:会默认创建一个分支,命名为master ...