vue创建应用

创建应用

createApp函数传入一个对象来配置应用，该函数会返回一个应用实例。

const app = createApp({
    
})

传入的对象实际上是个组件，每个应用必须一个根组件，其余为子组件

createApp的参数

1. 组件选择对象
   最常见的用法，传入一个组件选择对象,这个对象包含了Vue组件的各种选项，这里面用选项式写法来包装

   import { createApp } from 'vue'
   
   const app = createApp({
    data() {
        return {
            message: "Hello Vue!"
        }
    },
    methods: {
        changeMessage() {
            this.message = "Hello Vue!"
        }
    },
    template: '<div>{{ message }}</div>'
   })
   
   app.mount('#app')

2. 导入的组件
   直接传入一个导入的组件(通常是根组件App.vue)

   import { createApp } from 'vue'
   import App from './App.vue'
   
   createApp(App).mount('#app')

3. 渲染函数组件
   传入一个使用渲染函数的组件的定义

   jsCopyimport { createApp, h } from 'vue'
   
    const app = createApp({
    render() {
        return h('div', {}, [
        h('h1', {}, 'Hello Vue 3'),
        h('p', {}, `当前计数: ${this.count}`),
        h('button', { onClick: this.increment }, '增加')
        ])
    },
    data() {
        return {
        count: 0
        }
    },
    methods: {
        increment() {
        this.count++
        }
    }
    })
   
    app.mount('#app')

4. 函数式组件

   import { createApp} from 'vue'
   
   // 函数式组件
   const SimpleComponent = () => h('div', {}, 'Hello Vue!')
   
   const app = createApp(SimpleComponent)
   app.mount('#app')

还接受可选的第二个参数，用于向根组件传递props

挂载应用

上面的实例需要调用.mount()方法来渲染出来，方法接受“容器”参数:DOM元素或CSS选择器字符串。

组件模板

1. 组件内部定义模板

   // main.js
    import { createApp } from 'vue'
   
    const app = createApp({
    // 组件内部定义模板
    template: '<div>Hello Vue!</div>'
    })
   
    app.mount('#app')

2. 单文件组件(.vue)

   <!-- App.vue -->
   <template>
    <div>Hello Vue!</div>
   </template>
   
   <script>
   export default {
    //组件逻辑
   }
   </script>

   // main.js
   import { createApp } from 'vue'
   import App from './App.vue'
   
   createApp(App).mount('#app')

3. 在挂载容器内直接编写模板

   <!-- index.html -->
   <div id="app">
    <!-- 这里直接编写的HTML内容会作为根组件的模板-->
    <h1>Hello Vue!</h1>
    <button @click="changeMessage">Click me</button>
   </div>

   // main.js
   import { createApp } from 'vue'
   
   const app = createApp({
    data() {
        return {
            message: "Hello Vue!"
        }
    },
    methods: {
        changeMessage() {
            this.message = "Hello Vue!"
        }
    }
   })
   
   app.mount('#app')

多个应用实例

同一个页面可以创建多个共存的Vue应用，每个都拥有自己配置和全局资源的作用域