Vue的学习之路三：this

最新推荐文章于 2024-06-25 12:56:35 发布

亥虫

最新推荐文章于 2024-06-25 12:56:35 发布

阅读量3.9k

点赞数

分类专栏： # Vue 文章标签： vue html5

本文链接：https://blog.csdn.net/weixin_39020133/article/details/106288244

版权

Vue 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

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

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

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

亥虫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue的学习之路三：this

<body> <div id="app"> <input type="button" value="浪起来" @click="lang" /> <input type="button" value="低调" @click="stop" /> {{ msg }} </div> <script> // 注意：在VM实例中，如果想要获取 data 上的数据，或者想要调用
复制链接

扫一扫

专栏目录