黑马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. CSS中为什么有的元素能够设置高度，而有的元素却不能设置高度与宽度？

    可以使用{display:block}将内联元素变为块级元素,同时使用{display:inline}将块级元素变为内联元素. {display:inline-block}又是怎么回事,根据张鑫旭老师 ...

  2. js跳转页面与打开新窗口的方法

    1.超链接<a href="http://www.jb51.net" title="脚本之家">Welcome</a> 等效于js代码 ...

  3. Idea格式化快捷键无效，没反应

    Idea格式化快捷键无效,没反应 1,关闭网易云音乐快捷键 2,修改搜狗输入法快捷键 目前本人只遇到过这两种

  4. Tomcat项目自动部署脚本

    一般情况下使用的Linux环境都是加固的,root路径只有超级管理员权限才能进入.我们新建一个自己的用户,在/home下会有一个用户目录,传输war包都放在这个目录下,此时不动webapps文件下的内 ...

  5. fastadmin 列表展示时字段值截取

    {field: '字段名', title: __('lang中的语言名'),formatter:function(value,row,index){ value=value?value:''; var ...

  6. HNOI 世界树 虚树

    //virtual tree /*Huyyt*/ #include<bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) #defin ...

  7. YII2.0.12兼容PHP7.2版本升级

    YII2.0.12兼容PHP7.2版本升级 报错信息: FastCGI sent in stderr: "PHP message: PHP Fatal error:  Cannot use ...

  8. 系列文章--Python Web编程

    我从网上找到了其他园友的文章,很不错,留着自己学习学习. Python Web编程(一)Python Web编程(二)Python Web编程(三)Python Web编程(四)Python Web编 ...

  9. TCP_Wrappers访问控制

    一.TCP_Wrappers简介 对有状态连接的特定服务进行安全检测并实现访问控制,它以库文件形式实现,某进程是否接受libwrap的控制取决于发起此进程的程序在编译时是否针对libwrap进行编译的 ...

  10. es实战一：基本概念

    基本概念 可以对照数关系型据库来理解Elasticsearch的有关概念. Relational DB Elasticsearch Databases Indices Tables Types Row ...