【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模型

猜你喜欢

转载自blog.csdn.net/m0_64880608/article/details/132977074