要实现的效果如下：<template><div class="newsList"><div v-for="(items, index) in newsList"><div class="date">{{showDay(index)}}</div><div class="list" ><ul><li class="list-item" v-for="item in items"><span class="text">{{item.title}}</span><img :src="attachImageUrl(item.images[0])" class="image"/></li></ul></div></div><div class="infinite-scroll" v-show="loading"><svg class="loader-circular" viewBo...
本文介绍了vue异步加载高德地图的实现，分享给大家，具体如下：几种加载js的方式 同步加载异步加载延迟加载同步加载用的最多的一种方式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。 <scrip...
单页应用产出的入口chunk大小随着业务的复杂度线性增加，导致后期加载速度越来越慢。后面就需要对不同路径下的模块进行拆分，打包到相应的chunk下，按需加载，找到chunk的大小、个数和页面加载速度的平衡点。 解决办法 .vue模块文件按需加载，其实要做到两件事情：一是标记出这是一个异步组件；二是通知webpack把该组件单独产出为一个chunk。 vue的异步组件 官网给出的异步组件写法：异步组件是一个函数，函数的返回值是一个Promis...
最近研究了vue性能优化，涉及到vue异步组件和懒加载。一番研究得出如下的解决方案。 原理：利用webpack对代码进行分割是懒加载的前提，懒加载就是异步调用组件，需要时候才下载。 案例： 首先是组件，创建四个组件分别命名为first、second、three和four；内容如下 first<template> <div>我是第一个页面</div> </template>second<template> <div>我是第二个页面</div> </template>three<template> <div>我是第三个页面</div> </temp...
项目结构，在组件文件夹(components)下新建common文件夹，所用公用组件放里面，本例包含tips和loading两个一、loading组件 1.loading.vue组件内容如下：代码： <template><div class="loading" v-show="loading"><img src="./loading.gif"></div></template><script>export default {name: loading,data() {return {loading: false}},created() {var that = this;this.bus.$on(loading, function (data) {that.loading = !!dat...
基于vue的懒加载插件 目的：图片或者其他资源进入可视区域后加载安装使用直接下载dist目录下的vue-view-lazy.min.js使用使用npm安装直接使用<div id="app"><span v-view-lazy @model="handleModel"></span> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="./dist/vue-view-lazy.min.js"></script> <script>Vue.use(vViewLazy.default,{});new Vue({el:#app,data:{msg:数据},me...
Node 端渲染提示 window/document 没有定义业务场景 首先来看一个简单的 Vue 组件 test.vue <template><div><h2>clientHeight: {{ clientHeight }} px </h2></div> </template><script type="text/babel">export default {data(){return {}},computed :{clientHeight() {return document.body.clientHeight;}},mounted(){}} </script>上面 test.vue 组件通过 Vue computed 属性 clientHeight 直接获取 document 的文档高度，这段代...
1.第一例 const Home = resolve => {import("@/components/home/home.vue").then( module => {resolve(module)} }注：（上面import的时候可以不写后缀） export default [{path: /home,name:home,component: Home,meta: {requireAuth: true, // 添加该属性可以判断出该页面是否需要登录显示}, }]2.第二例 const router = new Router({routes: [{path: /home,component: (resolve)=> {require([../components/home/home], resolve) ...
本人正在基于 vue2.0 + webpack + es6 搭建前端架构，整理了部分插件，下面这个是下拉更新 上拉更多的，挺好用的，分享给大家。 直接上代码，不懂的多看几遍，下面我换会告诉大家如何使用。 <template lang="html"><div class="yo-scroll":class="{down:(state===0),up:(state==1),refresh:(state===2),touch:touching}"@touchstart="touchStart($event)"@touchmove="touchMove($event)"@touchend="touchEnd($event)"@scroll="(onI...
看到一篇Implementing an Infinite Scroll with Vue.js , 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考.从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件等等, 我这里主要是对原文的重点提取和补充本文技术要点 Vue生命周期axios简单用法moment.js格式化日期图片懒加载结合原生js来写scroll事件请求节流创建项目首先创建一个简单的vue项目 # vue init webpack-sim...
在使用vue绑定数据的时候，渲染页面时会出现变量闪烁，例如 <div class="#app"><p>{{value.name}}</p> </div>在加载的时候会看到 {{value.name}} 在页面出现，过了几秒之后才会渲染数据，在vue中有个指令可以解决这个问题，v-cloak 那么，v-cloak要放在什么位置呢，是不是每个需要渲染数据的标签都要添加这个指令，经过试验发现，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以， <div class="#app" v-cloak><p>{...
用过vue-router都知道它可以实现模块js的懒加载，即只有当需要时才去加载对应模块的js脚本文件，以加速主页的显示。比如只有第一次用户点击某个“用户信息”按钮或菜单时，才下载“用户信息”这个模块的js组件。 懒加载的实现，依赖与webpack下AMD模式require函数的功能。webpack会将异步require的文件生成一个独立的js文件，调用时异步下载这个js且在完成后再执行它。开发项目中实现的关键代码是： const basicInfo = {path: /use...
前言 作为一个网站应用，加载速度是非常重要的。加载速度，一个是程序的合理安排，如以组件按需加载，一个是js、css等资源的异步加载。 在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。 解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这...
最近实习的项目需求上要求不多，就学了下项目优化，主要是首屏加载太慢。 大文件定位 我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。 安装 npm install --save-dev webpack-bundle-analyzer在webpack中设置如下，然后npm run dev 的时候默认会在8888端口显示。 const BundleAnalyzerPlugin = require(webpack-bundle-analyzer).BundleAnalyzerPlugin; module.exports ...
demo：<div v-for="item in temps" :key="item.id"><div class="contract-item"><img :src="item.imgUrl"></div></div>引入图片，注意路径： import con1 from "@/assets/img/con01.png"; import con2 from "@/assets/img/con02.png"; import con3 from "@/assets/img/con03.png";进行图片的加载位置：temps: [{imgUrl: con1},{imgUrl: con2},{imgUrl: con3},],这样就实现了循环遍历的时候加载不同的图片。 以上这篇vue2.0 循环遍历...