【Vue】el & data 的这些细节你知道吗？

hello，我是小索奇，精心制作的Vue教程持续更新哈，花费了大量的时间和精力，总结拓展了很多疑难点，想要学习&巩固&避坑就一起学习叭~

el 与 data 的两种写法

el共有2种写法

el表达式主要用来在模板中展示数据,它可以输出简单的变量值,也可以调用方法。语法是${表达式}

1. 创建Vue实例对象的时候配置el属性

2. 先创建Vue实例，随后再通过VM.$mount('#root')指定el的值

根据需求设置，比如设置1000s后挂载

setTimeout(()=>{
            v.$mount('#root')
        },1000)

data的2种写法

1. 对象式：data： { }

2. 函数式：data() { return { } }

// 对象式
data:{
  name:'即兴小索奇'
}
// 函数式
data(){
  return {
    name:'即兴小索奇'
  }
}

函数式可以在每个实例中返回新的对象,防止对象被复用时数据互相污染

在这里哪种写法都可以，但到后期给伙伴们讲到组件时，data必须使用函数，否则会报错

注意

一定要牢记：由Vue管理的函数，一定不要写箭头函数，否则 this 就不再是Vue实例了，箭头函数没有this，那么向上"继承"，找到全局window，这句话能带你走更长的路~

下期详细讲解MVVM模型