企业网站备案还是不用备案广州seo网站推广平台
文章目录
- 创建应用实例
- 挂载应用
- 没有模板的组件的挂载
- 应用配置
- 多个应用实例
其实使用脚手架创建的vue项目的main.js文件中已经为我们配置好
vue应用的创建。
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
创建应用实例
每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例。
createApp的参数应该是一个组件,应该是应用的跟组件,其他组将将作为其子组件。
该组件可以是从其他文件夹引入的.vue文件,也可以是直接编写的组件内容:
- 引入文件做参数
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)
- 直接编写组件内容
import { createApp } from 'vue'const app = createApp({template:'<div>组件的模板内容</div>', data() {return {count: 0}}
})
挂载应用
创建好的应用实例必须在调用了 .mount() 方法后才会渲染出来。.mount()方法接受一个“容器”参数,可以是一个实际的DOM元素,也可以是一个CSS选择器字符串。
index.html(容器位置):
<div id="app"></div>
挂载:
app.mount('#app')
应用实例的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。
.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意,不同于其他资源注册方法,它的返回值是根组件实例而非应用实例。
没有模板的组件的挂载
根组件的模板通常是组件本身的一部分:
- 在组件的配置项中编写
template配置项 - 或者在组建文件的
<template></template>中直接编写模板。
但是组件也可能并没有模板,此时如果该组件作为根组件进行挂在的时候,Vue 将自动使用容器的 innerHTML 作为模板
eg:
index.html
<div id="app"><button @click="count++">{{ count }}</button>
</div>
main.js
import { createApp } from 'vue'const app = createApp({data() {return {count: 0}}
})app.mount('#app')
页面展示一个0
应用配置
应用实例会暴露一个 .config 对象允许我们配置一些应用级的选项:
- 配置错误处理器,捕获所有子组件上的错误
app.config.errorHandler = (err) => {/* 处理错误 */
}
- 注册组件
应用实例提供了一些方法来注册应用范围内可用的资源,例如注册一个组件:
app.component('TodoDeleteButton', TodoDeleteButton)
多个应用实例
用实例并不只限于一个。createApp API 允许你在同一个页面中创建多个共存的 Vue 应用,而且每个应用都拥有自己的用于配置和全局资源的作用域。
main.js
const app1 = createApp({/* ... */
})
app1.mount('#container-1')const app2 = createApp({/* ... */
})
app2.mount('#container-2')
