VUE学习笔记（二）

最新推荐文章于 2024-08-24 12:37:57 发布

DHDN——1997

最新推荐文章于 2024-08-24 12:37:57 发布

阅读量108

点赞数 1

分类专栏： VUE 文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/weixin_44939146/article/details/131569587

版权

VUE 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了在Vue中如何创建应用实例，包括使用`createApp`函数，导入根组件，以及将应用挂载到指定DOM元素。此外，还讲解了全局和局部组件注册的方法，以及main.js、App.vue和index.html在项目结构中的作用。

摘要由CSDN通过智能技术生成

创建应用实例函数

import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})

根组件

我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。
如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件。`

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'
const app = createApp(App)

挂载应用

应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

<div id="app"></div>
app.mount('#app')

应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。

.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。

Vue中main.js、App.vue和index.html

main.js是项目的入口文件，定义了vue实例，并引入根组件app.vue，将其挂载到index.html中id为‘app’的节点上。

App.vue是主组件，所有页面都是在App.vue下进行切换，可以理解为所有的路由都是App.vue的子组件

index.html是页面的入口文件，里面包含一个id为app挂载点，main.js中定义的Vue根实例就会挂载到该挂载点上

打开网页的时候，页面Title是index.html中定义的Title，而正文部分是App.vue中定义的内容。但在打开的瞬间是会显示index.html里面的内容（如果定义了的话）

main.js入口文件
import Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
  el: '#app', //挂载点
  components: { App }, // 根组件
  template: '<App/>'
})

vue实例挂载后，会对节点原内容进行覆盖。所以，即便index.html和app.vue中都定义了<div id="app"></app>, 最终网页也不会出现两个id为app的节点。

index.html：页面的入口文件
<body>
    <div id="app"></div>
  </body>

app.vue 主组件，所有页面都是在App.vue下进行切换
<template>
  <div id="app">
    .....
  </div>
</template>

组件注册

全局注册

我们可以使用 Vue 应用实例的 app.component() 方法，让组件在当前 Vue 应用中全局可用。

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)

如果使用单文件组件，你可以注册被导入的 .vue 文件：

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

局部注册

局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。

局部注册需要使用 components 选项：
<script>
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
}
</script>

<template>
  <ComponentA />
</template>

DHDN——1997

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
VUE学习笔记（二）

打开网页的时候，页面Title是index.html中定义的Title，而正文部分是App.vue中定义的内容。main.js是项目的入口文件，定义了vue实例，并引入根组件app.vue，将其挂载到index.html中id为‘app’的节点上。index.html是页面的入口文件，里面包含一个id为app挂载点，main.js中定义的Vue根实例就会挂载到该挂载点上。App.vue是主组件，所有页面都是在App.vue下进行切换，可以理解为所有的路由都是App.vue的子组件。
复制链接

扫一扫

专栏目录