黑马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. 解决npm安装node-sass太慢及编译错误问题

    环境: win7 node v8.11.1 npm v5.6.0 背景: 最近vue项目使用sass,所以需要sass-loader,sass-loader依赖node-sass,还需安装node-s ...

  2. Ubuntu下编译boost for Android

    下载https://github.com/moritz-wundke/Boost-for-Android 解压后进入目录 运行 ./build-android.sh $(NDK_ROOT) NDK_R ...

  3. Caused by: java.lang.UnsatisfiedLinkError: Couldn't load 。。。。

    最近需要做个有地图搜索功能的模块,用到百度地图SDK,但是从官网上下载SDK后导入工程,修改apiKey后,还是无法运行,总是抱这个错误:Caused by: java.lang.Unsatisfie ...

  4. Matplotlib 随机漫步图

    import matplotlib.pyplot as plt from random import choice class Randomwalk(): def __init__(self,num_ ...

  5. systemd自启动tomcat

    tomcat自启动service [Unit] Description=Tomcat After=network.target [Service] Type=forking PIDFile=/usr/ ...

  6. 【icpc2019网络赛南昌站】Yukino With Subinterval

    傻b错误调一天系列 原题: 大意:给你一个数列a,字词两种操作: 1.把c[l]改成r 2.询问在区间[l,r]中,有多少个极大子区间满足子区间里的数全部一样,且在[x,y]范围内 (对于满足条件的区 ...

  7. LIBUSB_TRANSFER_ERROR

    首先, 我的设备是一个KNX无线接受模块, 利用UART与主机相连, 看到的设备就是ttyUSBx 利用libusb写了一个程序, 调用同步I/O 的API, 即libusb_bulk_transfe ...

  8. pycharm中如何让两个项目并存

    之前总是打开一个,另外一个没有了,来回切换还要找最近的project.十分麻烦. 1.File下拉项中选择Settings 2.Settings设置界面打开Project下拉列表,选择“Project ...

  9. win10日历交互效果

    win10日历 早就想试着实现以下win10日历的动态css效果,现在终于有时间试试啦.本篇文章只是实现简单的效果,进阶篇后续会放上来 目标效果 鼠标移入目标元素,周围相关八块元素点亮,点亮高光范围呈 ...

  10. 使用Navicat客户端运行SQL语句出现中文乱码

    出现乱码无非就是编码方式不统一造成的,通过查阅资料解决了问题. (简 体中文系统环境支持国标 GB2312.GB18030 和 Unicode (UTF-8) 编码.它们在系统中设置的locale(亦 ...