黑马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. vue入门：（条件渲染）

    v-if v-show v-else 一.v-if:生成或者移出一个元素 <div id="example"> <button v-on:click=" ...

  2. vue入门：（模板语法与指令）

    vuejs使用及HTML的模板语法,可以实现声明式将DOM绑定至底层VUE实例的数据.通过模板语法将数据渲染进DOM的系统,结合响应系统,在应用状态改变时,Vue能够计算出重新渲染组件的最小代价并应用 ...

  3. Java设计模式只好

    有时,一些学生私下问我:如何学习前端问题.这里有一个统一的回复,下次我遇到这个问题,同学们会直接给你发这篇文章的链接地址. “如何学习前端”应该因人而异,其他人的方法可能不适合自己.让我们谈谈我的学习 ...

  4. Delphi 动态链接库编程

    樊伟胜

  5. 异步任务——AsyncTask的初步认识

    ProgressBar_test.class package com.example.administrator.ten_9; import android.app.Activity; import ...

  6. c++第三次作业：类的友元

    C++第三次作业:类的友元 1.友元的关系提供了不同类或对象的成员函数之间.类的成员函数与一般函数之间进行数据共享的机制.通俗的说友元关系就是一个类主动声明其他函数是他的朋友,可以使其获得特殊访问权利 ...

  7. Host服务

    这也是看网上的例子自己跟着配置做的一个小demo,这里记录一下. 一.创建一个空的控制台应用程序 二.安装所需dll 1.Quartz  Install-Package Quartz -Version ...

  8. ACwing 196. 质数距离

    #include <bits/stdc++.h> using namespace std; , M = ; int v[M]; long long prime[N],prim[N]; ; ...

  9. Python模块struct(二进制数据服务)

    struct模块 Python没有专门处理字节的数据类型.但由于b'str'可以表示字节,所以,字节数组＝二进制str. 而在C语言中,我们可以很方便地用struct.union来处理字节,以及字节和 ...

  10. Java动态绑定与多态

    在面向对象的程序设计语言中,多态是继数据抽象和继承之后的第三种基本特性.多态通过分离做什么和怎么做,从另一个角度将接口和实现分离开来.在一开始接触多态这个词的时候,我们或许会因为这个词本身而感到困惑, ...