Vue中隐式全局变量，框架和库的区别，常用指令，修饰符，插值表达式

细节-全局变量

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: '猥琐发育~~~别浪！',
            firstIn: null
        },
        methods: {
            Frist() {
            //@1
                clearInterval(this.firstIn)
                console.log(firstIn);
                //@2
                firstIn = setInterval(() => {
                    let charsetFrist = this.msg.substring(0, 1)
                    let charsetLast = this.msg.substring(1)
                    this.msg = charsetLast + charsetFrist
                    console.log(charsetFrist, charsetLast);
                }, 100)
            },
            Last() {
                console.log(this.firstIn);
                @3
                clearInterval(this.firstIn)
            }
        }
    })
</script>

定时器逻辑

在每点击一次先关闭定时器，在开启定时器

结果

执行完以上代码关闭不掉定时器

解析

在@1不写this. 会报错，就是未定义
@2中创建定时器，发生了全局的隐式转换 每点击一次就创建一个全局的定时器(叠层)。
所以在@3中关闭定时器，只能关闭当前的一个定时器，无法关闭上一个的定时器

解决方案

把所有的变量都变成局部的变量
@2中加上this.,就变成了Vue中的定时器
@1中就可以关闭Vue中的定时器
@2中就是在局部创建一个定时器
@3也是局部的定时器

心得

变量尽量都在data里面声明，相当于在局部声明

框架和库的区别

框架是一套完整的解决方案，侵入性大
库只是一部分侵入，如果一个库解决不掉，可以切换其他的库

常用指令

v-on和v-bind的区别
v-on:click绑定事件，可以省略成 @click=“事件名字”
v-bind:disabled:'true’绑定属性 可以省略成 :disabled:‘true’

修饰符

（ .stop） 阻止冒泡
（.captrue） 改变成捕获
（.prevent）阻止默认事件
（.self）只当事件在该元素本身触发时触发回调函数
（.once）事件只触发一次

插值表达式

{{变量}}