案例实现分析:

把第一个字符追加到最后一个字符身上去

基本结构:

<body>

  <div id="app">

    <input type="button" value="继续浪"  @click="lang()"/>

    <input type="button" value="别浪了"  @click="stop()"/>

    <h1>{{msg}}</h1>

  </div>

  <script src="./vue2.6.10.min.js"></script>

  <script>

    var vm = new Vue({

      el: '#app',

      data: {

       msg:'浪起来吧~~~~哦耶'

      },

     methods: {

      lang(){

      },

      stop(){

      }

    }

  })

  </script>

</body>

添加方法:

  1. 先截取到第一个字符,然后把这个字符放到结尾

截取字符串的方法 subsring()

substring()的使用如下:

var vm = new Vue({

      el: '#app',

      data: {

       msg:'浪起来吧~~~~哦耶'

      },

    methods: {

      add(){

        // console.log(this.msg.substring(开始的索引，结束的索引(不包含结束的索引)))

        // 想要获取'浪'

        var num = this.msg.substring(0,1)

        console.log('获取浪' + '-------' +  num)

        //想要获取'吧'

        var num2 = this.msg.substring(3,4)

        console.log('获取吧'+' ------- '+  num2)

        //想要获取'浪起来'

        var num3 = this.msg.substring(0,3)

        console.log('获取浪起来'+ ' ------- ' + num3)

        //substring(0)要是只传入一个参数0或者什么都不传的话，截取的就是全部字符串

        var num4 = this.msg.substring()

        console.log('获取全部' + ' ------- ' + num4)

        var num5 = this.msg.substring(0)

        console.log('获取全部' + ' ------- ' + num5)

        //substring(1)要是只传入一个参数1的话，截取的就是出第一个字符以外的全部字符串

        var num6 = this.msg.substring(1)

        console.log('获取除第一个字符外的全部字符串'+'-------'+num6)

      }

      }

 })

来吧展示:



获取第一个字符与除第一个字符的全部字符进行尾和头的拼接

var vm = new Vue({

      el: '#app',

      data: {

       msg:'浪起来吧~~~~哦耶'

      },

     methods: {

      lang(){

        var header = this.msg.substring(0,1)

        var body = this.msg.substring(1)

        this.msg =  body + header

        console.log(this.msg)

      }

      }

    })



不可能每次都由我们自动去点击它才让它跑起来,所以需要添加定时器

methods:{

lang(){

        setIntervar(function(){

        var header = this.msg.substring(0,1)

        var body = this.msg.substring(1)

       this.msg =  body + header

        console.log(this.msg)

        },400)

      }

 }

报错原因:

定时器中的this指向的使window，所以需要转换一下this的指向

解决方法:

使用箭头函数，箭头函数的特性：内部的this永远指向外部的this,所以this.msg也是指向vm实例的

lang(){

          setInterval(() => {

            var header = this.msg.substring(0,1)

            var body = this.msg.substring(1)

            this.msg =  body + header

            console.log(this.msg)

          }, 400)

      }

来吧展示:



给 别浪了 绑定停止事件stop()

<script>

    var vm = new Vue({

      el: '#app',

      data: {

       msg:'浪起来吧~~~~哦耶',

       intervalId:null

      },

     methods: {

      lang(){

          // var intervalId = setInterval(() => {

            this.intervalId = setInterval(() => {

            var header = this.msg.substring(0,1)

            var body = this.msg.substring(1)

            this.msg =  body + header

            console.log(this.msg)

          }, 400)

      },

      stop(){

        clearInterval(this.intervalId)

      }

      }

    })

  </script>

解释:

clearInterval(this.intervalId)

这里应该给setInterval用变量接收一下

var intervalId = setInterval(()=>{})

然后把要把intervalId拿过来

但是stop()与lang()属于两个不同的函数，代表着两个不同的作用域

在clearInterval()中拿不到intervalId

不能写成clearInterval(intervalId)

注意：只要属于vm就能拿到this,data中的数据就都能拿到，只要能访问到this,那么this上的数据就能拿到

所以说把interval挂载到data身上，也就是在data中再添加一个变量

data:{ interval:null }

那么claeraInterval()就能拿到

就可以通过this.intervalId清除定时器

注意:

虽然实现了浪起来和别浪了的事件,但是有个bug在于:

每当点击浪起来的时候,就会重新开启触发新的定时器,会导致速度加快,并且点击别浪了也不会停止

解决办法:

办法一:在执行lang()方法的时候,先清除定时器

lang(){

           clearInterval(this.intervalId)

            this.intervalId = setInterval(() => {

            var header = this.msg.substring(0,1)

            var body = this.msg.substring(1)

            this.msg =  body + header

            console.log(this.msg)

          }, 400)

      },

注意(bug):

当频繁一直点击“继续浪”的时候，就会卡住停止，因为400毫秒就会执行下一次定时器，一直在点击的时候就会清定时器

最佳方式:

      lang(){

      //如果定时器的id不等于null，就表示有定时器在执行了，直接退出就不会再开启第二个定时器

        // if(this.intervalId !== null){

        //   return intervalId

        // }

        // 简写成

        //if(this.intervalId !== null) return

         if(this.intervalId !== null) return

            this.intervalId = setInterval(() => {

            var header = this.msg.substring(0,1)

            var body = this.msg.substring(1)

            this.msg =  body + header

            console.log(this.msg)

          }, 400)

注意(bug):

当点击“别浪了以后”，再次点击“继续浪”没有再次执行，所以需要在stop()方法在清除定时器以后再重置定时器

stop(){

        //如果不清除定时器的话，那么点击“别浪了”没有反应，不会停止

        clearInterval(this.intervalId)

         this.intervalId = null

        //每当清除定时器之后，为了保证下次能够正常开启定时器，所以，需要把intervalIdcID重置为null

   }

浪起来~~~哦耶的代码整合

<!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>浪起来~~哦耶</title>

</head>

<body>

  <div id="app">

    <input type="button" value="继续浪"  @click="lang()"/>

    <input type="button" value="别浪了"  @click="stop()"/>

    <h1>{{msg}}</h1>

  </div>

  <script src="./vue2.6.10.min.js"></script>

  <script>

    var vm = new Vue({

      el: '#app',

      data: {

       msg:'浪起来吧~~~~哦耶',

       intervalId:null

      },

     methods: {

      lang(){

       clearInterval(this.intervalId)

          if(this.intervalId !== null) return

            this.intervalId = setInterval(() => {

            var header = this.msg.substring(0,1)

            var body = this.msg.substring(1)

            this.msg =  body + header

            console.log(this.msg)

          }, 400)

      },

      stop(){

        clearInterval(this.intervalId)

         this.intervalId = null

      }

      }

    })

  </script>

</body>

</html>

来吧展示:

vue学习笔记（一）---- vue指令（浪起来~~~哦耶 的案例）的更多相关文章

  1. 【Vue学习笔记】—— vue的基础语法 { }

    学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...

  2. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  3. vue学习笔记：vue的认识与特点与获取

    Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...

  4. Vue学习笔记之Vue指令系统介绍

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...

  5. vue学习笔记—bootstrap+vue用户管理

    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...

  6. Vue学习笔记之Vue知识点补充

    0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...

  7. Vue学习笔记之Vue学习前的准备工作

    0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...

  8. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  9. Vue学习笔记之Vue组件

    0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...

  10. Vue学习笔记之Vue的使用

    0x00 安装 对于新手来说,强烈建议大家使用<script>引入 0x01 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. ...

随机推荐

  1. Day03.1：初学者安装IDEA后需要知道的小技巧

    初学者安装IDEA后需要知道的小技巧 1.输入psvm直接生成 main方法 2.输入sout可以直接生成输出语句 3.代码放大设置 4.注释颜色更改 5.代码字体大小通过Ctrl+鼠标滑轮控制的设置 ...

  2. MybatisPlus Lambda表达式 聚合查询 分组查询 COUNT SUM AVG MIN MAX GroupBy

    一.序言 众所周知,MybatisPlus在处理单表DAO操作时非常的方便.在处理多表连接连接查询也有优雅的解决方案.今天分享MybatisPlus基于Lambda表达式优雅实现聚合分组查询. 由于视 ...

  3. js高级之对象高级部分

    基于尚硅谷的尚硅谷JavaScript高级教程提供笔记撰写,加入一些个人理解 github源码 博客下载 对象的创建模式 Object构造函数模式 套路: 先创建空Object对象, 再动态添加属性/ ...

  4. 造个Python轮子，实现根据Excel生成Model和数据导入脚本

    前言 最近遇到一个需求,有几十个Excel,每个的字段都不一样,然后都差不多是第一行是表头,后面几千上万的数据,需要把这些Excel中的数据全都加入某个已经上线的Django项目 这就需要每个Exce ...

  5. mindxdl--common--utils.go

    // Copyright (c) 2021. Huawei Technologies Co., Ltd. All rights reserved.// Package common define co ...

  6. typora实现多平台发布文章

    源码下载 前言 之前写过一片文章,typora 使用CSDN作为图床,用来存储 markdown 文章的图片资源文件.后来发现 typora 还可以自定义导出命令,那么也可以利用这个功能实现直接发布到 ...

  7. 在 win11 下搭建并使用 ubuntu 子系统（同时测试 win10)——（附带深度学习环境搭建）

    对于一个深度学习从事者来说,Windows训练模型有着诸多不便,还好现在Windows的Ubuntu子系统逐渐完善,近期由于工作需求,配置了Windows的工作站,为了方便起见,搭建了Ubuntu子系 ...

  8. 【Java】FileUtils-获取路径的所有文件（或文件夹）

    一.获取指定路径下的所有Excel文件 package com.boulderaitech.utils; import java.io.File; import java.util.Arrays; p ...

  9. 【每日一题】【直接循环&二分查找】2022年2月10日-NC32 求平方根

    描述实现函数 int sqrt(int x).计算并返回 x 的平方根(向下取整) 方法1:直接循环 import java.util.*; public class Solution { /** * ...

  10. 为什么Git远程仓库中要配置公钥？

    最近在使用阿里云效平台代码管理,首次使用新建仓库,使用SSH时需要配置公钥.之前也在GitHub.Gitee上配置过,每次都能正常使用,也没有思考过为什么要配置公钥.这次记录一下其中的原理. 本地和远 ...