zoukankan      html  css  js  c++  java
  • 关于Vue中main.js,App.vue,index.html之间关系进行总结

     

     

    在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到:

    index.html---主页,项目入口

    App.vue---根组件

    main.js---入口文件

    那么这几个文件之间的联系如何呢?

    1.先看index.html中的内容:(为了很好的标识各个文件,我对各文件进行了文字标记)

    2.在App.vue中,我做了如下处理:

    3.在main.js中,文件初始内容如图:

    那么我们打卡的网页如何呢?

    网页效果如下:

    也就是说,在网页的Title部分,加载了index.html中定义的Title,而在正文部分,加载了App.vue中定义的部分。(但是需要注意的是,在浏览器打开的瞬间,浏览器中正文部分会瞬间显示index.html中定义的正文部分

    那么,我们就可以来分析上述的逻辑了,浏览器访问项目,最先访问的是index.html文件,

    而index.html中

    1
    <div id="app">来自index.html正文中的内容</div>

     上面有一个id为app的挂载点,之后我们的Vue根实例就会挂载到该挂载点上

     main.js作为项目的入口文件,在main.js中,新建了一个Vue实例,在Vue实例中,通过

    new Vue({
      el: '#app',
      //components: {App },
      //template: '<App/>'
    })

    告诉该实例要挂载的地方;(即实例装载到index.html中的位置)

    接着,实例中注册了一个局部组件App,这个局部组件App来自于哪儿呢?

    复制代码
    import App from './App.vue'
    
    new Vue({
      //el: '#app',
      components: {App },
      //template: '<App/>'
    })
    复制代码

    这个局部组件是当前目录下的App.vue;

    而起模板是什么呢?模板就是组件App.vue中的template中的内容。(template会替代原来的的挂载点处的内容)

     所以Vue这个实例就是战士的是App.vue这个组件的内容

     所以,我们进行总结:在项目运行中,main.js作为项目的入口文件,运行中,找到其实例需要挂载的位置,即index.html中,刚开始,index.html的挂载点处的内容会被显示,但是随后就被实例中的组件中的模板中的内容所取代,所以我们会看到有那么一瞬间会显示出index.html中正文的内容。

    而index.html中的Title部分不会被取代,所以会一直保留。

    main.js是项目的入口文件,项目中所有的页面都会加载main.js,所以main.js,主要有三个作用:
    1.实例化Vue。
    2.放置项目中经常会用到的插件和CSS样式。例如: 网络请求插件:axios和vue-resource、图片懒加载插件:vue-lazyload
    3.存储全局变量。例如(用于的基本信息)



  • 相关阅读:
    angular1.5 组件学习 -- 4.2、组件的其他属性 transclude
    angular1.5 组件学习 -- 4.1、组件的其他属性 require
    angular1.5 组件学习 -- 3、组件的生命周期钩子
    angular1.5 组件学习 -- 2.2、组件间的交互:子向父
    angular1.5 组件学习 -- 2.1、组件间的交互:父向子
    angular1.5 组件学习 -- 1、组件的基本结构
    android内存优化相关1
    Android快速开发系列 10个常用工具类
    android Activity的启动模式
    [转载]Android系统开机画面的实现
  • 原文地址:https://www.cnblogs.com/nuoruo/p/14328588.html
Copyright © 2011-2022 走看看