Vue学习篇一

发布于:2022-12-28 ⋅ 阅读:(393) ⋅ 点赞:(0)

系列文章目录

提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
例如:第一章 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提供了大量能使我们快速便捷地处理数据的函数和方法。

本文含有隐藏内容,请 开通VIP 后查看