尚品汇项目 笔记
Data: 2022-12-09
Author: gavin
视频地址
本项目值得一看
-
登录注册
P17 nprogress 进度条
主要时在 axios 请求拦截器中使用
步骤
- 安装三方包
npm i nprogress - 在接口处理 js 中使用
import nprogress from "nprogress"; // 进度条
import "nprogress/nprogress.css"; // 进度条样式
nprogress.start(); //在请求拦截器时开始
nprogress.done(); //在响应拦截器时结束
可在 nprogress.css 中自定义颜色
P24~26 函数防抖节流理解
防抖节流是什么
防抖是回城，如果被打断，前面的触发都取消，只有最后一次在规定时间才会触发，如果连续触发，只会执行一次。
节流是技能cd,规定时间内不会重复触发。大于规定时间才会再次触发
可以写个自动登录，防抖，在文本输入完成后，未发生变化时，发送请求。
lodash.js 封装了防抖节流的方法，闭包+延迟器。
lodash.js 是一个函数方法库，封装了许多有用的函数方法
如何使用
// html中
import lodash.js;
// 防抖
input.oninput=_.debounce(function(){
console.log('api发请求')
},2000);
// 节流
button.onclick=_.thrrottle(函数方法,时间)
// 函数方法是要实现的业务函数 function(){}
// 时间是节流时间 单位为微秒
在 vue 项目中使用 lodash
// vc中
import throttle from "lodash/throttle" //按需引入 lodash
methods : {
change: throttle(函数方法，时间) //函数不能为箭头函数 this 指向问题
}
P33 mockjs 模拟数据
在开发前在本地 mock 接口
步骤
-
安装三方包
npm i -D mockjs-D 表示安装在开发环境中，节省项目打包体积
创建src/mock文件夹,准备好相应 json 文件
创建mockServe.js文件，插入如下代码import Mock from 'mockjs' import banner from './banner.json' Mock.mock('/mock/banner', { code: 200, data: banner }) #mock路径和数据 -
在
main.js中引入import "@/mock/mockServe.js"; -
在请求路径前加入
/mock即可访问
P35 swiper 基本使用
用于快速生成轮播图
步骤
-
执行
npm i -S swiper@5,添加 swiper 库，因为 6 可能有 bug,所以用 5， -
引包（css）,在
main.js中引入import "swiper/css/swiper.min.css" -
书写 template 中 DOM 结构
<div class="swiper-container" ref="cur"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="carousel in list" :key="carousel.id"> <img :src="carousel.imgUrl" /> </div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> -
生成 Swiper 实例，实现展示效果,必须在所有 DOM 结构生成后起效
先引入import Swiper from "swiper";
在生命周期或方法里添加如下代码将 swiper 实例化var mySwiper = new Swiper("获取到的DOM节点", { direction: 'vertical', // 垂直切换选项 loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: ".swiper-pagination", clickable: true,//点击小球的时候也切换图片 }, // 如果需要前进后退按钮 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, });
在new Swpier实例之前，页面中结构必须有。所以
- watch+nectTick
wahtch只能保证数据已经存在，不能保证结构是否完整
nectTick：在下次DOM更新（服务器数据已返回）
循环结束之后（v-for执行结束 结构已完整）执行延迟回调。在修改数据之后（服务器数据回来）立即使用这个方法，获取更新后的DOM。
P106 图片懒加载
图片懒加载的意思是：在图片界面没有进入到可视范围前不加载, 在没有得到图片前先显示 loading 图片。
用于节省流量，提升网页浏览体验。
步骤：
-
安装三方包
npm install vue-lazyload -
在 assets 文件内准备图片 loading.gif
-
在 main.js 中引入配置
import VueLazyload from "vue-lazyload"; import loading from "@/assets/images/loading.gif"; //未加载得到图片之前的loading图片 Vue.use(VueLazyload, { // 内部自定义了一个指令v-lazy loading, }); -
将图片
src="Img"换成v-lazy="Img"即可
P109 路由懒加载
理解
- 当打包构建应用时，JS 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
- 本质就是 Vue 的异步组件在路由组件上的应用
- 需要使用动态 import 语法, 也就是 import()函数
使用
// import Home from '@/pages/Home'
/*
1. import('模块路径'): webpack会对被引入的模块单独打包
2. 路由函数只在第一次请求时才执行, 也就是第一次请求访问对应路由路径时才会请求后台加载对应的js打包文件
*/
const Home = () => import("@/pages/Home");
P110 清除打包后 map 文件
用于节省项目体积，在 vue.config.js 中加上productionSourceMap:false 字段即可
P114 组件通信六种方式
1. props
使用场景：父组件 ⇆ 子组件
书写方式：1.['todos'] 2.{type:Array}3.{type:Array,default:[]}
路由也可传_props_，书写形式：布尔值、对象、函数
2. 自定义事件
适用场景：子组件 → 父组件
$on 与 $emit
3. 全局事件总线 $bus
使用场景：任意组件间通信
Vue.prototype.$bus = this
4. pubsub-js,订阅发布（在 react 中使用较多）
使用场景：任意组件间通信
5. Vuex
适用场景：任意组件间通信
6. 插槽
适用场景：父组件 ⇆ 子组件(传递结构)
默认插槽、具名插槽、作用域插槽
P115 自定义事件深入
原生 DOM 绑定系统事件 @click 可以触发
自定义标签绑定系统事件 @click 不可以触发，需在其后加修饰符.native
原生 DOM 绑定自定义事件 和 自定义标签绑定自定义事件，都需要$emit进行触发，没有意义。
P116 v-model 深入
v-module 实现原理：通过 :value 与 input 事件实现，而且还需注意可通过v-module实现父子组件通信
// 父组件代码--------------------------
<input type="text" v-model="msg" />
<input :value="msg" @input="msg = $event.target.value" />
<!-- 子组件 -->
<About :value="msg" @input="msg = $event"></About>
<About :value="msg" v-model="msg"></About>
// 子组件代码--------------------------
<input type="text"
:value="value"
@input="$emit('input', $event.target.value)"
/>
props: ['value']
浙公网安备 33010602011771号