随笔分类 - vue项目实践
摘要：首页加载很慢的原因： 1. 由于vendor.js和app.css较大，VUE等主流的单页面框架都是js渲染html body的，所以必须等到vendor.js和app.css加载完成后完整的界面才会显示。 2. 单页面首次会把所有界面和接口都加载出来，会有多次的请求和响应，数据不能马上加载，二者相
阅读全文
摘要：步骤一：将原来锚链接中href="#id1"去掉，增加点击事件@click="toTopic('#id'+index)" <a v-for="(tag, index) in 30" :key="index" @click="toTopic('#t'+index)"> <el-tag type="in
阅读全文
摘要：使用场景： ①可以减少图片的请求数量（集合到js、css代码中）； ②可以防止因为一些相对路径等问题导致图片404错误； ③提高加载速度； 步骤一：打开网站：https://www.strerr.com/cn/base64_encode_img.html 步骤二：上传图片，复制转换后的base64数
阅读全文
摘要：vue-seamless-scroll使用手册：https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/properties.html 步骤一：git bash输入：npm install vue-seamless-scroll --s
阅读全文
摘要：1.方式一 步骤一：创建文件：src/utils/numberToCurrency.js export function numberToCurrencyNo(value) { if (!value) return 0 // 获取整数部分 const intPart = Math.trunc(val
阅读全文
摘要：方案：可以用watch监听meta，在监听里面调用接口。这样就保证父组件传过来的值一定能接收到，无论接口的快慢。 步骤一：父组件 <template> <div> <zi-jian :meta='meta'></zijian> //绑定参数:meta </div> </template> <scri
阅读全文
摘要：步骤一：创建watermark.js文件（可以自己设置属性） /** 水印添加方法 */ const setWatermark = (str1, str2) => { const id = "1.23452384164.123412415"; if (document.getElementById(
阅读全文
摘要：1. 单击click <div @click="clickFun"></div> //是否有括号决定是否可传参 <div @click="clickFun($event)"></div> // $event表示当前事件对象 <div @click.stop="clickFun()"></div> /
阅读全文
摘要：注意：不能直接day-1，因为当今天为1号时，直接减，day就变成0了 <script> export default{ getFormateDate(){ let date1 = new Date(); //当前：Wed Jun 08 2023 17:47:37 GMT+0800 (中国标准时间)
阅读全文
摘要：1.hash 默认使用hash模式，url会自带#。另一种模式history模式，url不带#。 //router/index.js const router = new Router({ routes, // vue-router默认使用hash模式，所以在路由加载的时候，项目中的url会自带#。
阅读全文
摘要：1. 路由跳转的4种方法： 方式一：router-link //步骤一：设置路由（文件：/src/router/index.js） import Home from "@/components/Detail"; const routes = [ { path: "/detail", name: "d
阅读全文
摘要：方案： ①首屏加载时候img标签src赋为空值，这样就不会去渲染看不见的图片而浪费时间； ②当用户滑动到图片的可视区域后，替换src的路径，改为正式路径，则开始渲染图片；好处：一是首屏加载快，二是节省流量。在图片没有到达可视区域的时候不会加载，因为不可能每一个用户会把页面从上到下滚动完。 方式一：传
阅读全文
摘要：原因：若没有使用路由懒加载，在webpack打包后，打包后的文件会非常大，影响首页加载速度，可能会出现白页。 而运用路由懒加载，当路由被访问的时候才加载对应组件，达到了按需加载，减少了首页的加载时间。 方式一：import按需加载（常用） export default new Router({ ro
阅读全文
摘要：1. 同步和异步的区别： 同步：同步是指一个进程在执行某个请求的时候，如果该请求需要一段时间才能返回信息，那么这个进程会一直等待下去，直到收到返回信息才继续执行下去。 //同步 first() { return new Promise((resolve, reject) => { setTimeou
阅读全文
摘要：1. 第一种（推荐） 缺点：这种方法会在浏览器地址栏中多添加#reloaded mounted() { if (location.href.indexOf("#reloaded") == -1) { location.href = location.href + "#reloaded"; locat
阅读全文
摘要：1. 浅拷贝：默认在改变新的数组的时候，也改变了原数组。 let obj = { name: "张三", age: 28 }; let qian = obj; qian.name = "李四"; console.log(obj.name); //李四 console.log(qian.name);
阅读全文
摘要：1. 定义一个Map数据： let map=new Map([['name','tom'],['age',12]]); 2. Map数据的基本用法： （1）新增Map数据: let map=new Map([['name','tom'],['age',12]]); let newMap=map.se
阅读全文
摘要：1. 引入JSON的三种方法 方法一：axios异步请求 <script> import axios from "axios"; export default{ mounted(){ this.fetchData() }, methods:{ fetchData(){ this.$axios.get
阅读全文
摘要：1. 字符串常用的几个方法： （1）字符串中是否包含某个字符串（indexOf的替代方案）: let str1 = "abcdefgh"; let str2 = "def"; let res = str1.includes(str2); console.log(res); //true （2）得到一
阅读全文
摘要：1. 判断对象是否存在某一属性： let obj={id:1,name:'张三',age:26} let isObj1=obj.hasOwnProperty('name') let isObj2=obj.hasOwnProperty('url') console.log(isObj1); //tru
阅读全文
浙公网安备 33010602011771号