Vue的学习之路三：this

<body><div id="app"><input type="button" value="浪起来" @click="lang" /><input type="button" value="低调" @click="stop" />{{ msg }}</div><script>// 注意：在VM实例中，如果想要获取 data

亥虫

3929人浏览 · 2020-05-22 17:54:40

亥虫 · 2020-05-22 17:54:40 发布

<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页面】

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^