VUE笔记 - 插值表达式 v-on: / @ 事件绑定 定时器运用

 

 

<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() {
      
          if (this.intervalId != null) return;  
          // 判断定时器有没有在运行，在运行 则直接返回。避免重复点击导致多个定时器同时生效。
          // this.intervalId != null  表示定时器里的内容不是空值，所以是在运行。

          this.intervalId = setInterval(() => {   // 注意箭头函数用法和特点，ES6再复习一下。
            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)
          
          this.intervalId = null;
          // 每当清除了定时器之后，需要重新把 intervalId 置为 null
          // 否则下一次点击开启定时器时，定时器的值不是null，就无法运行新一轮定时器。 

          //　疑问：　清除了定时器之后，　定时器的值是？？？
        }
      }
    })
  </script>
</body>

 

posted @ 2019-01-15 14:31  CarpenterZoe  阅读(744)  评论(0)    收藏  举报