Skip to content

V
VUE笔记

恨鱼腥 / VUE笔记

通知 2
Star 1
Fork 0
V
VUE笔记

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

源分支
选择Git版本
...
目标分支
选择Git版本
 
Commits (2)
    https://gitcode.net/qq_16229515/vue/-/commit/1acfc2fd75e623b1b5544a41afffe4c766918646 Vue应用和组件的基本概念 2021-06-28T22:47:35+08:00 Bobby 1907910817@qq.com https://gitcode.net/qq_16229515/vue/-/commit/500ed6e202dcda1a38ebbcbad45339d7c5fbb8f6 Vue组件和应用 2021-06-28T22:52:31+08:00 Bobby 1907910817@qq.com
隐藏空白更改
内联 并排
Showing with 39 addition and 0 deletion
2. Vue基础语法/1.Vue中应用和组件的概念.md 0 → 100644
浏览文件 @ 500ed6e2
# Vue应用和组件的概念
先回顾一下之前的代码
```HTML
<body>
<div id="root"></div>
</body>
<script>
// 使用Vue.reateApp创建一个APP即(Application)
// 传入的参数是用于定义所创建的应用的根组件(应用app下最外层的组件)应该怎样去创建,
const app = Vue.createApp({
// mvvm
// model 数据
data(){return{ myData:'勇敢牛牛，不怕困难'}},
// view 视图
template:`<div>{{myData}}</div>`
});
// 标识应用app只作用于id为root的DOM元素
// 同时Vue也会将app对应的根组件渲染后id为root的DOM元素上
const vm = app.mount('#root'); // vm即为app应用的根组件
</script>
```
正如代码中的注释，这做一个梳理：
- Vue.createApp会创建一个vue应用,而且创建的是需要在{}中做出一些定义，而这些定义的内容是用于构造app的<u>根组件</u>，这里有一层意思，即**应用需要组件来构成**。
- 应用需要挂载到DOM元素中，但是渲染在DOM元素中的是应用的根组件。
- 应用在挂载到DOM也元素时返回的的是根组件，即上面代码中的vm即表示根组件。
- 组件的按照mvvm模式进行创建，
- m : model数据
- v : view视图
- vm : 数据视图连接层
组件在创建时，只需要指定数据，即`data(){return{}}`和视图，即`template:<div></div>`,而数据视图连接层由组件(非应用)来实现
下面我们使用`vm.$data.myData`对根组件中的数据进行获取,**注意$符号**
![](images/markdown-img-paste-20210628223931456.png)