2.1跑马灯vue绑定事件在vm实例中，想要调用data中的数据，调用methods中方法用this.属性名或者this

在vm实例中，想要调用data中的数据，调用methods中方法用this.属性名或者this.方法名
this指new中创建的vm实例对象

this指向问题

            // this指向问题
              var _this =this
             setInterval(function(){
                  // 索引为零，截取1个
              var start = _this.msg.substring(0, 1)
              // 截取尾部,1开始截取没截取到最后
              var ending = _this.msg.substring(1)
              // 重新拼接并赋值给this.msg
              _this.msg = ending + start
              // vm实例会监听自己身上data所有数据的改变，只要数据发生变化就会自动把最新数据，从data中同步到页面中去，好处只需要考虑数据的操作，不需要考虑dom


              // this指向问题
              //  箭头函数 将内部this与外部this指向一致
             setInterval(()=>{
                  // 索引为零，截取1个
              var start = this.msg.substring(0, 1)
              // 截取尾部,1开始截取没截取到最后
              var ending = this.msg.substring(1)
              // 重新拼接并赋值给this.msg
              this.msg = ending + start
              // vm实例会监听自己身上data所有数据的改变，只要数据发生变化就会自动把最新数据，从data中同步到页面中去，好处只需要考虑数据的操作，不需要考虑dom

             },400)

终极代码

  <!DOCTYPE html>
   <html lang="en">
   <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>跑马灯</title>
  <script src="./lib/vue.js"></script>
  </head>
   <body>
  <!-- 分析 -->
  <div id="app">
      <input type="button" value="宝宝" @click='lang'>
      <input type="button" value="小可爱" @click='stop'>
      <h4>{{msg}}</h4>
  </div>
  <script>
      // 分析：1加绑定事件给按钮
      // 2按钮上事件处理函数，写相关代码：拿到字符串，然后调用字符串substring()方法，截取字符串操作，把第一个截取出来，放到最后一位
      // 3 定时器每隔多少毫秒自动截取，将2中的代码放入定时器中
      var vm = new Vue({
          el: "#app",
          data: {
              msg: "宝宝的小可爱",
              // 局部变量访问不到
              inter: null
          },
          methods: {
              lang() {
                  // 当他没有运行时才可以运行
                  if (this.inter != null) return;
                  this.inter = setInterval(() => {
                      // 索引为零，截取1个
                      var start = this.msg.substring(0, 1)
                      // 截取尾部,1开始截取没截取到最后
                      var ending = this.msg.substring(1)
                      // 重新拼接并赋值给this.msg
                      this.msg = ending + start
                      // vm实例会监听自己身上data所有数据的改变，只要数据发生变化就会自动把最新数据，从data中同步到页面中去，好处只需要考虑数据的操作，不需要考虑dom
                  }, 400)

                  // this指向问题
                  //  箭头函数 将内部this与外部this指向一致
              },
              stop() {
                  clearInterval(this.inter)
                  // 每当清除了定时器之后需要把inter赋值为null
                  this.inter = null
              }
          }
      })
  </script>
  </body>
    </html>