vue学习笔记（一）---- vue指令（浪起来~~~哦耶的案例）

案例实现分析:

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

基本结构:

<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>

添加方法:

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

截取字符串的方法 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>

来吧展示:

在这里插入图片描述

相关阅读:
multiview
RadioButton
信息存储与管理读书笔记1
个人Wordpress站点设置Windows Live writer
test
test
AS类库推荐
 JAVA坏境变量中的JAVA_HOME path classpath 的设置与作用
 actionscript3 中关于sprite的mask问题
 RED5遍历客户端并生成在线列表[转]
原文地址：https://www.cnblogs.com/Chinatsu/p/13870648.html

vue学习笔记（一）---- vue指令（浪起来~~~哦耶 的案例）

vue学习笔记（一）---- vue指令（浪起来~~~哦耶的案例）