[Vue]el和data的两种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例,随后再通过vm.$mount('#root')指定el的值。
//------------- el 的两种写法 ------------- const vm = new Vue({ el: '#root', // 第一种写法 data: { name: '模板' } }) //----------------------------------------- const vm = new Vue({ data: { name: '模板' } }) vm.$mount('#root') // 第二种写法,挂载到容器#root中
2.data有2种写法
(1).对象式
(2).函数式
如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。
// ------------- data 的两种写法 ------------- const vm = new Vue({ el: '#root', // 第一种写法,对象式 data: { name: '模板' } }) // ------------------------------------------- const vm = new Vue({ // 第二种写法,函数式,写组件的时候用到 // 也可以直接写成 data(){} data: function () { // 此处如果是普通函数,this指向Vue实例对象;如果是箭头函数,this指向window对象。 console.log('this: ', this) return { name: '模板' } } })
3.一个重要的原则:
由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?