黑马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. 关于学习电信nb-iot的小结

    关于这几天对nb-iot的学习的总结和遇到的坑 初步学习nb-iot,了解到了nb-iot对于传感器数据传输功能的强大: 废话不多说,对于nb-iot我们选择的有人的模块,选择B5频段也就是电信的nb ...

  2. 面向对象相关概念与在python中的面向对象知识（魔法方法+反射+元类+鸭子类型）

    面向对象知识 封装 封装的原理是,其成员变量代表对象的属性,方法代表这个对象的动作真正的封装是,经过深入的思考,做出良好的抽象(设计属性时用到),给出“完整且最小”的接口,并使得内部细节可以对外透明( ...

  3. java_day10_多线程

    第十章:线程 1.进程和线程的概述 1)进程和线程定义 进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位. 线程是进程的一个实体,是CPU调度和 ...

  4. Delphi DLL文件的静态调用

  5. arm交叉编译sudo-1.8.6p7

    1.交叉编译 # tar -xvf sudo-1.8.6p7.tar.gz # cd sudo-1.8.6p7/ # mkdir build # ./configure --prefix=/home/ ...

  6. Bootstrap常用的自带插件

    Bootstrap自带的那些常用插件. 模态框 模态框的HTML代码放置的位置 务必将模态框的HTML代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态 ...

  7. 排序算法之快速排序QuickSort

    挖坑填数-快速排序 1. left = L,right = R;将基准数挖出形成第一个坑s[left]; 2. right --; 由后向前找比它小的数,找到后挖出此数填前一个坑s[left]中. 3 ...

  8. Jmeter中间件处理-缓存

    前言 消息队列和缓存是目前主流的中间件,我们在日常测试过程中,无论是接口还是压力测试,都会遇到需要处理这些中间件数据的情况.本文以Redis对缓存做一个简单的介绍,并基于Jmeter实现缓存数据处理. ...

  9. Python 编解码

    字符串编码常用类型:utf-8,gb2312,cp936,gbk等. python中,我们使用decode()和encode()来进行解码和编码 在python中,使用unicode类型作为编码的基础 ...

  10. git 清除所有历史记录

    有些时候,git 仓库累积了太多无用的历史更改,导致 clone 文件过大.如果确定历史更改没有意义,可以采用下述方法清空历史, 1) 先 clone 项目到本地目录 (以名为 mylearning ...