vue el 和 data的两种写法
这是我参与8月更文挑战的第30天，活动详情查看:8月更文挑战
el
第一种写法
我们前几篇文章都是通过 el 使 实例和容器进行绑定的。
<div id="root">
<h1>Hello,{{name}}</h1>
</div>
<script>
// 创建vue实例
new Vue({
el: '#root',
//写成对象
data: {
name: '孙尚香',
}
})
</script>第二种写法
我们现在不用 实例中的el了。我们先打印一下vue实例来看一下
const newVue = new Vue({
data: {
name: '孙尚香',
}
})
console.log(newVue)所有红色框中的带 $的属性都是给程序员使用的。不带 $的都是底层使用的。
image.png
我们现在要用的东西不在实例身上，而在实例的缔造者身上，也就是它原型对象上的方法。如下图
image.png
newVue.$mount('#root')$mount 也能指定容器。
data
第一种写法
对象式
data:{
name:'yyds'
}第二种写法
函数式
并且这个函数要有返回值。在组件中只能使用函数式的写法。
new Vue({
el: 'root',
data: function () {
return {
name: '孙尚香',
}
}
})🤔 这个函数是我们调用的吗？
不是，是Vue的实例调用的。那我们看一下这个函数当前的this指向。
new Vue({
el: 'root',
data: function () {
console.log(this,"this")
return {
name: '孙尚香',
}
}
})可以看到当前的this指向是Vue的实例
image.png
🤔 我们把普通函数写法换成箭头函数
new Vue({
el: 'root',
data :()=> {
console.log(this,"this")
return {
name: '孙尚香',
}
}
})可以发现当前的this指向变成了 window。因为箭头函数没有自己的this，它会找到它外层的this。
image.png
我们不能使用箭头函数
最后
- el的两种写法：
new Vue 时配置el属性 先创建vue实例，随后通过vm.$mount('#root')绑定el的值- data的两种写法
对象式 函数式 组件写法必须使用这个，否则报错 - 一个重要的原则
由Vue管理的函数，一定不要写箭头函数，一旦写了，this 就不再是Vue实例了。本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-08-30，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。