vue的执行顺序(局部组件和全局组件)

短命女 2022-09-10 09:27 210阅读 0赞

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title>default</title>
      </head>
      <body>
        <noscript>
          <strong>We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="aaa"></div>
        
      </body>
    </html>

import Vue from 'vue'
    import App from './App.vue'
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#aaa')

<template>
      <div id="aaa">
        <img alt="Vue logo" src="./assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
      </div>
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    
    export default {
      name: 'aaa',
      components: {
        HelloWorld
      }
    }
    </script>
    
    <style>
    #aaa {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <hello></hello>
      </div>
    </template>
     
    <script>
    // 导入组件
    import Hello from './components/Hello'
     
    export default {
      name: 'app',
      components: {
        Hello
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 1]创建一个app的组件，然后把他挂载到\#app上。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 3]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 5]不是一行的情况

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
    <div id="app">
        <button-counter></button-counter>
    </div>
    
    <script>
    // 创建一个Vue 应用
    const app = Vue.createApp({})
    
    // 定义一个名为 button-counter 的新全局组件
    app.component('button-counter', {
      data() {
        return {
          count: 0
        }
      },
      template: `
        <button @click="count++">
          点了 {
       { count }} 次！
        </button>`
    })
    app.mount('#app')
    </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 8]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 9]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/a00941c3d9134d6b934a50a710d15823.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/86e0781f235f4e6eb12b77b14ed5dc32.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/f39c34080ed248b590dd79754a69b750.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/3ff47d6fe8554a9c9096043bb71cfdc6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/9e18028729884e579ae640e4d70b6c17.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/ce631ea7abe3403e89bcb8ae0380c015.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/9f3d9a735cd24dfdb09bffd9d2f6362f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220829/38c34f527b684a0a92c57be4cc5d1e97.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220829/c228a70f769f4d71869c654e42298378.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220829/56ff55310b044f85a19c6647af7216b9.png