昨天我们学习了如何安装 Vue 和一个单页应用执行的过程（Vue3 安装与执行过程）。今天我们学习一下通过 createApp 来创建一个 app。

创建一个 app

在使用 Vue 框架时，你首次要接触的是创建一个 app，它相当于 Vue 的一个运行环境，后面所有的业务逻辑和数据都会在这个运行环境中执行。Vue 本身是一个 JS 对象，通过 script 标签直接引入 Vue 库：

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue3编程思想、源码解读</title><script src="https://unpkg.com/vue@next"></script>
</head>

打开浏览器控制台，输入 Vue，回车，你会看到 Vue 对象中所有的方法：

Vue 对象

当加载下面这个 js 文件后，会在 window 上增加一个 Vue 属性。

<script src="https://unpkg.com/vue@next"></script>

其实我们可以模仿一下 Vue 的实现，在 window 上添加一个 SuYanVue 属性：

如果你读不懂下面的代码，可以看我写的让 JavaScript 文件代码相互独立

window.SuYanVue = (function(exports) {// exports 参数值为一个空对象// 给 exports 添加一个方法 createAppexports.createApp = function() {console.log('create a suyan app');}// 把最终结果返回return exports;
}({}));

我来看 Vue 的 createApp 方法，它的作用是创建一个 app，有两个参数：

1、根组件
2、根组件的属性值

关于组件，本书的组件部分会详细讲解。

创建一个根组件 HomeCard，它内部又使用了一个组件 SuYan，使用的自定义组件需要在 components 这个属性中声明。

创建一个子组件，组件其实就是一个「定制化」的 JS 对象，需要提供 Vue 组件预先需要的方法属性：

const SuYan = {template: '<div>我是素燕</div>'
};

创建根组件，homeTemplate 是一个 Vue 模板字符串，它的语法规则我们会在模板小节中详细讲解：

const homeTemplate = `<h1>{{ title }}</h1><span>{{ des }}</span><p>{{ age }} </p><SuYan></SuYan>`;const HomeCard = Vue.defineComponent({name: 'home-card',/*** 组件对应的 HTML 模板，可以使一个静态字符串*/template: homeTemplate,/*** 自定义组件需要声明*/components: {SuYan},/*** data 为数据源，用来定义与模板绑定的属性*/data() {return {des: '帮助 10W 人入门并进阶前端'}},/*** 定义属性，父组件传递过来的*/props: {title: String,age: {// 定义类型type: Number,// 默认值default: 0,// 是否必须required: true,// 校验数据是否合法validator: value => {return value > 0;}}}
});

创建 app 实例，并挂载到元素上。

const app = Vue.createApp(HomeCard, {title: '和素燕一起学习 Vue',age: 20
});
// 把 app 这个节点挂载到选择器 #suyan-app 对应的元素上。
app.mount('#suyan-app')

#suyan-app 是在 HTML 中已经定义好的一个节点，可以把 Vue 创建的 app 挂载到这个节点上，这样就会把使用 Vue 创建的内容渲染到页面上。

<body><div id="suyan-app"></div>
</body>

我们来深入分析下 app 这个实例，打印一下 app，结果如下：

从图中可以看到，app 这个实例有很多方法和属性，其中以 _ 开头的属性是 Vue 内部使用的。下节内容我们一起看看这些方法的作用和实现。

本节内容同步在网站 https://lefex.gitee.io/ 上，我会把大家的问题汇总到网站上。大家加油！！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/

来，开局先创建一个 app相关推荐

如何使用Teams Toolkit高效创建一个App
在两三年前,teams刚在国内流行起来的时候,大家都是自己徒手撸各种代码结构及配置,如果需要有认证相关的内容,都得自己上手搞. teams现在在国内也算是很火了,至少是个很流行的ToB产品了,我上家公 ...
Xcode8 + Swift3.0 创建一个app基础框架
源代码放在github里面github源代码 QQ:26108724 下面这块是添加每一个TabbarItem的方法下面这一块是添加所有VC到Tabbar里面的代码 import UIKitclas ...
初学者用pycharm创建一个django项目和一个app时需要注意的事项
目录如何新建一个djiango项目: 如何创建一个app: 如何启动一个django项目: 新建一个django项目,需要注意以下几项配置: 如何新建一个djiango项目: 1.在pycharm中 ...
使用django创建一个简单的APP应用
一.创建一个app(前提是你已经建立一个django项目) 1.在cmd命令中创建APP 1.1.在项目文件夹中打开命令窗口 1.2.进入虚拟环境(有关django虚拟环境的创建,可以参考:Djang ...
用PhpStorm IDE创建GG App Engine PHP应用教程
在上一篇文章中提到了PhpStorm IDE已经支持Google App Engine PHP了,而且介绍了如何安装相关功能插件.那么在万事俱备之后,又怎样开始创建一个App呢,在创建过程有哪些步骤和 ...
【Android】Android Studio中新创建的app目录结构
安装Android Studio后,然后创建一个app项目.对于初学者来说,我们希望了解app目录结构,然后更好的进行开发工作. 但是要想了解一个app的目录结构,首先需要明确两个概念 Project ...
Django 创建项目app
Django 中的一个app 就是项目里面的一个应用的意思. 一个项目包含多个app. 一个app 通常就是一个相对独立的模块 ,实现相对独立的功能. Django 中创建app 可以通过执行命令, ...
django 命令行创建项目app
django 命令行创建项目app 方法一: 在pycharm中打开Terminal 找到自己想要创建的文件目录下创建app django-admin startapp app名称方法二: 第一步 ...
如何用 React Native 创建一个iOS APP？（二）
我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...

来，开局先创建一个 app

创建一个 app

来，开局先创建一个 app相关推荐

最新文章

热门文章