尚硅谷-尚品汇项目开发总结（第十五天）

27：图片懒加载：vue-lazyload插件实现

27.1 为什么需要图片懒加载？

在图片很多的网站中，如果所有图片全部一次性加载完毕，可能会增加服务器压力、导致页面卡顿、影响用户体验。

为了解决这个问题，就使用懒加载这个方法，就是只显示当前可视窗口的图片，不是可视区的图片先不加载。

27.2 步骤

1.安装 npm install vue-lazyload -S

2.在main.js引入并配置

//引入插件
import vueLazyload from 'vue-lazyload'//引入图片资源，此图片是在图片未加载的时候展示
import lazyloadImg from './assets/1.jpg'使用插件
Vue.use(vueLazyload,{//配置对象,指定加载时的图片loading: lazyloadImg
})

3.使用

<div>//使用v-lazy指令<img v-lazy="defaultImg" />
</div>

28：vee-validate表单验证规则的简单使用（第二版本）

28.1 安装：npm i vee-validate -S

28.2 配置，完成之后在main.js中引入js文件即可

import VeeValidate from 'vee-validate'
import Vue from 'vue'Vue.use(VeeValidate)// 引入中文的校验提示
import zh_CN from 'vee-validate/dist/locale/zh_CN'// 表单验证
VeeValidate.Validator.localize('zh_CN',{messages:{...zh_CN.messages,is:field => `${field}必须与密码相同`  //修改内置规则的message，让确认密码和密码相同},// 给校验的 field 属性名映射中文名称attributes:{phone:'手机号',code:'校验码',password:'密码',confirmPassword:'确认密码',agree:'协议'}
})// 自定义校验规则---是否同意协议
VeeValidate.Validator.extend('agree',{validate:value=>value,// 下面这行代码可以不写（没有生效），没有影响，目前并不知道原因，// getMessage:field=>field+'必须同意'
})

28.3 使用

<inputtype="text"placeholder="请输入你的手机号"v-model="phone"name="phone"v-validate="{required: true,regex: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,}":class="{ invalid: errors.has('phone') }"
/>
<span class="error-msg">{{ errors.first("phone") }}</span>

<inputtype="checkbox"v-model="agree"name="agree"v-validate="{ required: true, agree: true }":class="{ invalid: errors.has('agree') }"
/>
<span>同意协议并注册《尚品汇用户协议》</span>
<span class="error-msg">{{ errors.first("agree") }}</span>

29：路由懒加载

29.1：为什么要进行路由懒加载？

在打包构建应用时，js文件会比较大，所有的路由都会被加载，影响页面的加载速度，所以需要路由懒加载。路由懒加载是指：当路由组件被使用的时候才进行加载。

29.2 使用

//未使用路由懒加载
import Search from '@/pages/search'//使用路由懒加载
const Search = ()=> import('@/pages/search')

29.3 分组路由懒加载：指在一组中的某一个路由被加载时，改组的所有路由都会被加载。


const ListContainer = ()=>import(/* webpackChunkName: "group1" */ '@/pages/Home/ListContainer')const TodayRecommend = ()=>import(/* webpackChunkName: "group1" */ '@/pages/Home/TodayRecommend')const Rank = ()=>import(/* webpackChunkName: "group1" */ '@/pages/Home/Rank')

尚硅谷-尚品汇项目开发总结（第十五天）相关推荐

尚硅谷-尚品汇项目开发总结（第十六天，电商项目完）
30:项目打包上线 30.1:运行npm run build,生成dist文件夹 30.2:.map文件:在项目打包后,代码都是经过加密的,如果运行时报错,输出的错误信息无法准确定位是哪里的代码出错, ...
WPF 项目开发入门（十）DevExpress 插件+NHibernate 登录实现
WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式与 TreeView树组件 ...
全球及中国分散式风电项目开发建设及十四五战略布局分析2021-2027年
全球及中国分散式风电项目开发建设及十四五战略布局分析2021-2027年 HS--HS--HS--HS--HS--HS--HS--HS--HS--HS--HS--HS-- [修订日期]:2021年11 ...
SAP UI5 应用开发教程之八十五 - 如何用 OPA5 编写测试用例来测试用户输入文本的功能试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
开发指南专题十五 JEECG微云快速开发平台EXCEL导入导出
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 开 ...
Polyworks脚本开发学习笔记(十五)-用Python连接Polyworks的COM组件
Polyworks脚本开发学习笔记(十五)-用Python连接Polyworks的COM组件用Polyworks脚本开发,没有高级语言的支持,功能难免单一,一些比较复杂的交互实现不了,界面和报告也很 ...
iOS 11开发教程（十五）iOS11应用视图的位置和大小
iOS 11开发教程(十五)iOS11应用视图的位置和大小当一个视图使用拖动的方式添加到主视图后,它的位置和大小可以使用拖动的方式进行设置,也可以使用尺寸检查器面板中的内容进行设置,如图1.52所示 ...
SAP UI5 应用开发教程之五十五 - 如何将本地 SAP UI5 应用通过 Node.js Express 部署到公网上试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之五十五 - 如何将本地 SAP UI5 应用通过 Node.js Express 部署到公网上
本教程迄今为止的前 54 个步骤,开发出来的 SAP UI5 应用都只能在本地通过 localhost 访问,除非将其部署到 ABAP 服务器上. SAP UI5 应用开发教程之三十五 - 如何把本地 ...

尚硅谷-尚品汇项目开发总结（第十五天）

尚硅谷-尚品汇项目开发总结（第十五天）相关推荐

最新文章

热门文章