Vue学习篇一

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

文章目录

目录

系列文章目录

文章目录

前言

一、应用实例

二、根组件

三、挂载应用

四、应用配置

总结

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

一、应用实例

每一个Vue应用都是通过 createApp 函数来创建一个新的应用实例，其参数是一个对象

import { createApp } from 'vue'

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

二、根组件

我们传入 createApp 函数的对象实际就是一个组件，每一个应用都需要一个根组件，其他组件将做为子组件依托于根组件，就像一棵树，树干就可以看作是根组件，其上的树枝和树叶都可以看作是子组件，树枝和树叶都依托于树干。

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

const app = createApp(App)

三、挂载应用

使用 createApp 函数创建出来的应用实例必须通过调用 .mount() 方法后才会渲染出来，该方法接收一个容器作为参数，该参数可以是一个实际的DOM标签元素，也可以是一个CSS选择器字符串，一般来说，对于根组件所要挂载的容器，使用该容器的CSS的 id 选择器的值作为参数。

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

对于CSS样式id选择器，id 的值在全局是唯一的，而 class 选择器的值可以不唯一，且id的值通过 # 来取，class的值通过 . 来取 

四、应用配置

在使用 createApp 函数创建完应用实例并调用了 .mount() 方法将其挂载到一个容器上后，一个应用完成了基本的配置，但该应用目前还只是一个空架子，就像一个光秃秃的树干，没有什么功能，所以，在完成应用基本配置后，我们还需要为应用配置一些子组件和插件，

应用实例提供了一些方法来注册应用范围内可用的资源，这样在main.ts中注册是全局范围内有效，这使得 HelloWorld 在应用的任何地方都是可用的。例如注册一个组件：

import HelloWorld from "@/components/HelloWorld.vue"
app.component("HelloWorld",HelloWorld);

 也可以像这样注册一个插件：

// 引入element-plus
import ElementPlus from "element-plus";

const app = createApp(App);
// 注册 element-plus 插件
app.use(ElementPlus);
// 将应用实例挂载到id为app的容器上
app.mount("#app");

 

---

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。