zoukankan      html  css  js  c++  java
  • 第六章、Vue项目预热

    6-2.项目的整体架构

    src--->整个项目的源代码

    main.js-->整个项目的入口文件

    app.vue-->项目的最原始的根组件

     定义了一个vue的根实例,挂载到一个id等于app一个元素上,打开整个项目下的html文件,这里有一个div它的id等于app,所以main.js上的挂载点就是指index.html上的app。components是局部组件。template是渲染局部组件。根实例做一件事情,把局部组件app显示在页面上。所以看app是哪个,上面的App中from ‘./App’中先从src中找App.vue若无则找App.js若无,找App.json等直到找到一个匹配的。

    一、打开main.js

    二、打开hmtl

    三、打开一个单文件组件App.vue(一个文件以.vue结尾,称为单文件组件)

    路由,就是根据网址不同,显示不同的内容给用户。

    <rooter-view>显示的是当前路由地址显示的内容 

    6-3.单文件组件与路由

     

    6-4单页应用VS多页应用

    多页应用,每次跳转的时候,后端都返回一个新的html文件。

    首屏快是因为,我们访问一个页面,服务器返回一个html,这个过程只经历了一个http请求,所以会很快。

     单页应用,页面每次跳转并不加载html,而是通过js动态把当前页面内容删除掉,再把新的当前页面dom结构渲染。页面跳转的时候,并不请求html文件,所以页面切换快。首屏展示的时候

    需要请求一个html请求和一个js请求,所以首屏时间慢。

    6-5、项目代码初始化

    (1)、

    (2)、引入reset.css及border.css

     (3)、解决手机点击延迟300ms的问题

    a、安装

    b、引入fastclick

  • 相关阅读:
    api.js
    vue开关
    vue 单选框自定义
    vue 笔记
    Flutter 检测网络连接 监听网络变化
    lutter 调用原生硬件 Api 实现扫码
    flutter 支付宝支付流程以及用 Flutter 在 Android Ios 中实现支付宝支付
    js+css 动效+1的效果
    Vue -- filters 过滤器、倒计时效果
    移动端如何实现两行点点点?
  • 原文地址:https://www.cnblogs.com/qdwz/p/11391869.html
Copyright © 2011-2022 走看看