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

原文:
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

原文地址:https://www.cnblogs.com/mypath1/p/11406479.html

时间: 2024-10-11 15:50:07

Vue教程02(跑马灯效果案例) 𽳜的相关文章

Vue.js01:跑马灯效果

<!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" con

VUE之文字跑马灯效果

<!DOCTYPE html> Title <input type="button" value="浪起来" @click="lang"> <input type="button" value="低调" @click="stop"> {{msg}} 原文地址:https://www.cnblogs.com/charlypage/p/9801085.ht

VUE小案例--跑马灯效果

自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="

横冲直撞vue(第四篇):v-model、指令系统总结、指令系统示例轮播图实现、指令系统示例跑马灯效果实现、在vue中使用样式的方式

一. v-model v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素. 尽管有些神奇,但v-model本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件: text 和 textarea 元素使用 value 属性和 input 事件: checkbox

ListView 中的TextView实现跑马灯效果

案例:怎么样在一个ListView中含有TextView的item中实现字母滚动呢.这个在一些特定的场合经常用得到.如下图,当焦点位于某个item的时候其内容就自动滚动显示 要实现这样的效果,废话不多说直接上代码: adapter对应的layout 对应的listView的layout 切记千万不要在TextView中加上android:focusable="true" view plain <LinearLayout android:orientation="vert

使用ivx的3D世界实现跑马灯效果的经验总结

之前的案例涉及的动画效果都是平面展示,但是ivx中也可以通过3D世界组件展示3D的效果.今天我们就以跑马灯为例来讲一下ivx中的3D世界是如何使用的.一.3D世界3D世界最基础的组成部分就是坐标系和摄像机.坐标系是一个空间直角坐标系,3D世界下的所有组件都会有一个XYZ坐标来决定它在3D世界中的位置,而摄像机负责控制我们的视角,下图中红圈处就是摄像机的位置,黄线框起来的区域就是我们的视角范围.另外我们还可以在3D世界中添加各种光源,字体,图片,图片序列和物体模型这些具有展示效果的组件,除此之外还

练习:WinForm 跑马灯效果+Timer

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace Timer { public partial class Form1 : Form { public Form1

Android TextView跑马灯效果

TextView跑马灯简单效果 <!--简单示例--> <TextView android:text="@string/longWord" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView1" android:ellipsize="marquee&quo

android 怎么实现跑马灯效果

自定义控件 FocusedTextView, 使android系统误以为它拥有焦点 1 public class FocusedTextView extends TextView { 2 public FocusedTextView(Context context, AttributeSet attrs, int defStyle) { 3 super(context, attrs, defStyle); 4 // TODO Auto-generated constructor stub 5 }