跑马灯效果制作-上|学习笔记

简介: 快速学习跑马灯效果制作-上

开发者学堂课程【Vue.js 入门与实战跑马灯效果制-上学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8132


跑马灯效果制作-上


目录:

一、总结学习的指令及功能

二、案例:跑马灯效果


一、总结学习的指令及功能

前边三个章节学习了以下内容:

1.如何定义一个基本的Vue代码结构;

2.插值表达式和v- text;

3. v-cloak;

4. v-html;

5. v-bind  Vue提供的属性绑定机制  缩写是“ : ”;

6. v-on    Vue提供的事件绑定机制  缩写是“ @ ”。

那么,学会这些基本指令后,根据这些内容可以制作最基本的案例了。如:跑马灯效果。

 

二、案例:跑马灯效果

跑马灯效果是什么样的呢?

有一行几个连续的字符串,点击一个按钮能让它们依次循环动起来,第一个字符被截取放到最后,每隔一段时间,都会把第一个字符放到最后循环动起来。再点击按钮,就停止。

实例:

新建HTML文件:03.跑马灯效果.html,编辑:

跑马灯效果是什么样的呢?

有一行几个连续的字符串,点击一个按钮能让它们依次循环动起来,第一个字符被截取放到最后,每隔一段时间,都会把第一个字符放到最后循环动起来。再点击按钮,就停止。

实例:

新建HTML文件:03.跑马灯效果.html,编辑:

1  <!DOCTYPE html>

2  <html lang="en">

3

4  <head>

5  <meta charset= "UTF-8">

6  <meta name= "viewport" content= "width=device-width, initial-scale=1. 0">

7  <meta http- equiv="X -UA-Compatible" content=" ie=edge">

8  <title>Document</ title>

9  <!--  1.导入Vue包 -->

10  <script src="./1ib/vue-2.4.0.js"></script>

11 </head>

12

13  <body>

14 <!--  2.创建一个要控制的区域 -->

15 <div id="app">

16  <input type= "button" value= "浪起来"  @click="lang">

17 <input type= "button"  value=" 低调">

18

19<h4>{{ msg }}</h4>

20

21 </div>

22

23<script>

24 //注意:在VM实例中,如果想要获取data 上的数据,或者想要调用 methods 中的方法,必须通过this.数据属性名 或this.方法名来进行访问,这里的this.就表示new 出来的VM实例对象.

25 var vm = new Vue({

26 el: '#app ',

27data: {

28 msg: 猥琐发育,别浪~~!

29},

30methods: {

31lang() {

32// console .1og (this.msg)

33 //获取到头的第一个字符

34setInterval ( () => {

35var start = this . msg . substring(0, 1)

36 //获取到后面的所有字符

37   var end = this . msg . substring (1)

38 //重新拼接得到新的字符串,并赋值给this . msg

39    this .msg = end + start

40    },400)

41

42    //注意: VM 实例,会监听自己身上 data 中所有数据的改变,只要数据一 发生变化,就会自动把最新的数据,从 data 上同步到页面中去;好处 :程序员只需要关心数据,不需要考虑如何重新渲染 DOM 页面】.这个 setInterval 函数能够解决 this 指向问题。setInterval 内部的地址永远和 setInterval 函数外部方式一致。外部地址指向VM实例,就能访问到msg

43  }  

44 }

45 })

46

47 //分析:

48  // 1.给[浪起来]按钮,绑定个点击事件 v-on 或 @

49  // 2.在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串,然后调用字符串的 substring 来进行字符串的截取操作,把第一个字符截取出来,放到最后一个位置即可 ;

50  //3.为了实现点击一下按钮,自动截取的功能,需要把2步骤中的代码,放到一个定时器中去;

51 </ script>

52 </body>

53

54 </html>

刷新 Dooument 浏览器页面,可以看到结果如下,

动起来或者点击 浪起来 按钮后的效果

图片1.png


相关文章
|
JSON 图形学 数据格式
unity使用TextMeshPro实现聊天图文混排
使用unity也能实现qq好友聊天效果
|
3月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
69 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
6月前
|
小程序
【经验分享】使用swiper组件制作文字上下滚动播报效果
【经验分享】使用swiper组件制作文字上下滚动播报效果
265 6
|
6月前
微信小游戏制作工具中关于背景图的设置
微信小游戏制作工具中关于背景图的设置
204 0
|
6月前
|
前端开发
前端知识笔记(二十)———简易弹窗制作
前端知识笔记(二十)———简易弹窗制作
69 0
|
自然语言处理 C++
制作有道词典——标题栏
制作有道词典——标题栏
制作有道词典——标题栏
|
JavaScript 开发者
跑马灯效果制作-下|学习笔记
快速学习跑马灯效果制作-下
105 0
跑马灯效果制作-下|学习笔记
|
JavaScript 开发者
跑马灯效果制作-上|学习笔记
快速学习跑马灯效果制作-上
106 0
跑马灯效果制作-上|学习笔记
|
JavaScript
跑马灯效果制作-下
跑马灯效果制作-下
跑马灯效果制作-下
|
JavaScript 程序员
跑马灯效果制作-上
一、总结学习的指令及功能 二、案例:跑马灯效果
跑马灯效果制作-上