• vue main.js App.vue index.html之间的联系


    1.main.js

     1 import Vue from 'vue'
     2 import App from './App'
    3 //根实例 4 new Vue({ 5 //挂载到index.html的<div id="app"> 6 el: '#app', 7 //router对象,包含路由信息 8 router, 9 //在该根实例中注册App.vue中的App组件 10 components: {"App": App}, 11 //模版,vue文档中说是会使用template来替换被挂载的节点,也就是 index.html 的<div id="app"> 13 template: '<App/>' 14 })


    2.App.vue

    <template>
         <div id="app" v-cloak>
    
        <!--被匹配成功的组件将会被渲染到这里-->
        <router-view/>
    
        </div>
    </template>
    <script>
        export default {
        name: 'App'
        }
    </script>


    3.index.html

      <html> 
         <body>
            <!--被main.js挂载的标签--> 
            <div id="app"></div> 
         </body>
      </html>    


    说明:main.js中的根实例会挂载到index.html中的<div id="app">,且用template替换,即替换为<App></App>. 由于根实例注册了App组件,所以这标签就是App.vue组件。由于App.vue中含有<router-view/>,所以路由匹配成功的页面都在这里进行渲染和切换。
    ---------------------
    作者:转的你死
    来源:CSDN
    原文:https://blog.csdn.net/a493556721/article/details/81979558
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    NOI2005 聪聪和可可
    CodeVS 1344 线型网络
    BZOJ 2466: [中山市选2009]树
    BZOJ 3827: [Poi2014]Around the world
    BZOJ 1109: [POI2007]堆积木Klo
    BZOJ 2124: 等差子序列
    BZOJ 4544: 椭圆上的整点
    BZOJ 2342: [Shoi2011]双倍回文
    BZOJ 2084: [Poi2010]Antisymmetry
    BZOJ 3111: [Zjoi2013]蚂蚁寻路
  • 原文地址:https://www.cnblogs.com/150536FBB/p/10253467.html
Copyright © 2020-2023  润新知