1. 在new出来的vue对象里，如果想要获取data上的数据，或者调用methods中的方法，必须通过this.进行访问，this表示new出来的实例对象。
  2. 实例会监听自己身上data中所有数据的改变，只有数据一发生变化，就会自动把新数据从data同步到页面上。减少重新渲染，减少dom操作
  • 箭头函数 =》，内部的this总是和外部的this同步 
    <div id="app">
        <p v-cloak>{{ msg }}</p>
        <input type="button" value ='动一动' v-on:click='start'>
        <input type="button" value="停停停" v-on:click='stop'>
    </div>
    <script >
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'来~呀~快~活~呀~~！！',
                interval:null
            },
            methods:{

                start(){
                    if (this.interval!=null) {return;}//防止多次点击动一动导致的变速问题
                    this.interval=setInterval(() => {
                        var begin=this.msg.substring(0,1);
                        //剪切字符串，首尾拼接
                        var end=this.msg.substring(1);
                        this.msg=end+begin;

                    },400)
                    

                },
                stop(){
                    clearInterval(this.interval);
                    //清除计时器，重置null
                    this.interval=null;
                }
            }
        })
    </script>

    总结

  • this问题，vm中的data数据必须通过this访问
  • function（）{}和箭头函数的this不同
  • var interval=setInterval（function（）{},400），clearInterval（interval）；句式
  • string.substring（1,2），substring（start，end）方法用于提取字符串中介于两个指定下标之间的字符，子串包括 start 处的字符，但不包括 stop 处的字符。如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。start和end不接受负数。