Vue教程02(跑马灯效果案例)

核能气质少年 提交于 2019-11-28 11:20:32

原文: http://blog.gqylpy.com/gqy/423

置顶:来自一名75后老程序员的武林秘籍——必读(博主推荐)


来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/

你好,我是一名极客!一个 75 后的老工程师!

我将花两分钟,表述清楚我让你读这段文字的目的!

如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍!

没错,我就是这个老者!

干研发 20 多年了!我也年轻过,奋斗过!我会画原理图,会画 PCB,会模拟,会数字!玩过 PLC,玩过单片机,会用汇编,会用 C!玩过 ARM,比如 PLC,STM32,和时下正在起飞的 NXP RT1052!搞过 DSP,比如 TMS320F28335!搞过 FPGA,不管 Xilinx 还是 Altera,也不管是 Verilog 还是 VHDL,或者直接画数字电路图!我懂嵌入式系统,比如 uCOS 和 Linux!我懂开源的硬件,比如 Arduino 和树莓派!我也搞软件,学了一堆上位机的语言C#,JAVA,Python,Kotlin,Swift!会写爬虫工具,又自学写APP,不管Android 还是 IOS!

可是这一切有什么用呢?土鸡瓦狗!不值一提!干技术的永远就是最苦逼的那个人!

我相信看到这里的你,应该是个 IT 圈的人!或许是个学生,在学习某个技能!或者是个初入职场的年轻人,在啃某个技术!或者是个工程师,被项目困住,想找个资料快速突破阻碍!反正不管怎么样,你们都不会是泛泛之辈,不可能轻易交出智商税!

所以我把这份资料放进我的收费资源里,以证明接下去我要跟你讲的这本武功秘籍是可以真真实实的帮你赚到钱的!

我不知道叫它什么好,我把它写的像武林秘籍!所以我姑且叫它《武林秘籍》或者叫《赚钱秘籍》!

《武林秘籍》里封装了一个本人近期创造的一个可以一劳永逸的赚钱方法!你可以理解为躺着赚钱,或者挂机赚钱!请你放心,不是让你去违法!

我是一个IT男,从来不忽悠别人,这是我做人的原则。若此举能帮助你付起房子首付与月供,减轻一些目前高房价的压力,何乐而不为呢!

我提取里边几个要点:

  1. 将你手里有的资源按照说明书一步一步完成所有动作就可以躺着赚钱。
  2. 你不可能不劳而获,但是用这个方法确实是可以一劳永逸!
  3. 我用业余时间操作这个项目三个月,现在每天稳定收入300+。
  4. 里边会告诉你哪些是资源,怎么源源不断的获取资源。
  5. 里边会告诉你怎么获取爆炸的流量。
  6. 里边会告诉你很多黑技能(不是干坏事)。
  7. 总之,里边字字如金,有些东西我不告诉你可能这辈子都不会知道!

交了这波智商税,你的能力会爆涨,我说的不是你的专业能力,而是在这个社会生存的基础能力!

以上所有的东西可以规为武功的招式,但如果你想短期就实现目标,我还在说明书的最后留下了一些现成资源的下载链接,包括一些稀缺的资源,保证物有所值。这部分内容可以规为内功,继不继承由你自已决定!

好了,最后跟所有的老者不一样的是:这个老人要问你收取一点点小费,才会把无比珍贵的秘籍交到你手中!

以下是付款链接,付款后你将获取《武林秘籍》的访问密码。随后你将解锁另外一个谋生技能,在工作挣着死工资的同时,该技能也能同时帮你赚另一份钱,终身受用!

http://www.gqylpy.com/get_wlmj_pwd

能在此遇见是我们的缘分,我愿意帮助你,祝你取得成功!

传说中的武林秘籍:http://blog.gqylpy.com/gqy/401/

  前面的文章我们介绍了v-on这个指令,可以用来实现事件的绑定,本文我们利用v-on来实现一个简单的跑马灯效果,就是如下这种效果

Vue跑马灯效果

1.分析

  • a.点击"加油"按钮绑定一个点击事件,使用v-on或者缩写:"@"
  • b.在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串,然后 调用 字符串的 substring 来进行字符串的截取操作,把 第一个字符截取出来,放到最后一个位置即可;
  • 为了实现点击下按钮,自动截取的功能,需要把 2 步骤中的代码,放到一个定时器中去;

2.实现

2.1 绑定事件

    <input type="button" value="加油" @click="lang">     <input type="button" value="低调" @click="stop">        <script>     var vm = new Vue({       el: '#app',       data: {         msg: '加油,小强,你最棒~~!',         intervalId: null // 在data上定义 定时器Id       },       methods: {         lang() {         },         stop() {          }       }     })   </script> 

2.2 动态截取加定时

 var vm = new Vue({       el: '#app',       data: {         msg: '加油,小强,你最棒~~!',         intervalId: null // 在data上定义 定时器Id       },       methods: {         lang() {           // 获取到头的第一个字符           // 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() {          }       }     })  

2.3 取消定时器

stop() {          // 停止定时器         clearInterval(this.intervalId)         // 每当清除了定时器之后,需要重新把 intervalId 置为 null         this.intervalId = null; } 

2.4 完整代码

<!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>     // 分析:     // 1. 给 【浪起来】 按钮,绑定一个点击事件   v-on   @     // 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串,然后 调用 字符串的 substring 来进行字符串的截取操作,把 第一个字符截取出来,放到最后一个位置即可;     // 3. 为了实现点击下按钮,自动截取的功能,需要把 2 步骤中的代码,放到一个定时器中去;      // 注意:在 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;         }       }     })   </script> </body>  </html> 

最终效果

原文: http://blog.gqylpy.com/gqy/423

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!