<body>
    <div id="app">
      <input type="button" value="浪起来" @click="lang" />
      <input type="button" value="低调" @click="stop" />
      {{ msg }}
    </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 = 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)
            // 每当清除了定时器之后,将id重新赋值为 null
            this.intervalId = null
          }
        },
      })
      // 分析
      // 1. 给 【浪起来】 按钮,绑定一个点击事件 v-on @
      // 2. 在按钮的事件处理函数中,写相关的业务逻辑代码,拿到 msg 字符串,然后调用字符串的 substring 来进行字符串的截取操作,把第一个字符截取出来,放到最后一个位置即可
      // 3. 为了实现点击一下按钮,自动截取的功能,需要把2步骤的代码放到定时器里
    </script>
  </body>

通过这个小实战复习以前的知识

  1. this:在VM实例中,如果想要获取 data 上的数据,或者想要调用 methods 中的方法,必须通过 this.数据属性名 或者 this.方法名 来进行访问,这里的this,就表示我们 new 出来的 VM实例对象
  2. VM实例,会监听自己身上 data 中所有数据的改变,只要数据一发生变化,就会自动把最新的数据,从data上同步到页面中去;【好处:程序猿只需要关心数据,不需要考虑如何重新渲染DOM页面】
Logo

前往低代码交流专区

更多推荐