Vue核心 el与data的两种写法
1.5. el 与 data 的两种写法
el有2种写法
a创建Vue实例对象的时候配置el属性
b先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
data有2种写法
a对象式：data： { }
b函数式：data() { return { } }
如何选择：目前哪种写法都可以，以后到组件时，data必须使用函数，否则会报错
一个重要的原则
由Vue管理的函数，一定不要写箭头函数，否则 this 就不再是Vue实例了
el有2种写法
a创建Vue实例对象的时候配置el属性
b先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
data有2种写法
a对象式：data： { }
b函数式：data() { return { } }
如何选择：目前哪种写法都可以，以后到组件时，data必须使用函数，否则会报错
一个重要的原则
由Vue管理的函数，一定不要写箭头函数，否则 this 就不再是Vue实例了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>el与data的两种写法</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>你好，{{name}}</h1> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 // el的两种写法 // const v = new Vue({ // //el:'#root', // 第一种写法 // data: { // name:'cess' // } // }) // console.log(v) // v.$mount('#root') // 第二种写法 // data的两种写法 new Vue({ el: '#root', // data的第一种写法：对象式 // data:{ // name:'cess' // } //data的第二种写法：函数式 data() { console.log('@@@', this) // 此处的this是Vue实例对象 return { name: 'cess' } } }) </script> </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？