Juliet_xmj-CSDN博客

安装依赖报错或者是报错python环境有误，解决：将npm 降级到6，node版本最好控制在14之下https://nodejs.org/download/release/v14.19.3/全局下，将npm降级npm install [email protected] -g查看版本node -vnpm -v

2022-05-30 12:43:24 140

vue —— 在不安装脚手架情况下启动项目要安装node.js可能会报错node-sass，如果是版本问题，下面操作可以解决，如果是node-sass版本与其他版本出现不适配的报错，主页其他文章中有解决方法1.切换到淘宝镜像npm install -g cnpm --registry=http://registry.npm.taobao.org2.初始化项目，生成node_modules文件告诉 NPM 忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装，保证各

2022-04-26 16:35:32 2303

原创 vue —— 项目启动时无法识别es6的扩展语法

启动项目报错解决ES6的拓展运算符报错1.切换淘宝镜像npm install -g cnpm --registry=http://registry.npm.taobao.orgcnpm install --legacy-peer-deps --save-dev babel-preset-stage-3cnpm install --legacy-peer-deps --save-dev babel-plugin-transform-object-rest-spread4.根目

2022-04-20 10:07:33 3275

原创 js —— 去重、排序基础总结

js去重、排序基础总结（持续更新）排序1）for循环排序——冒泡排序2）for循环排序——选择排序、相邻3）sort排序 —— 升降序排序去重1） for循环去重 —— splice（）let arr = [1,4,2,2,8,4,5,9,10,8,4,6]2）indexOf去重3）es6 —— includes去重4）es6 ——set去重第一种，扩展运算符第二种，Array.from重点不可少...

2022-02-28 16:26:02 310

原创 vue —— 父组件同一时间多次调用子组件方法

子组件方法 child.vue<div>{{msg}}</div>props: { msg: { type: String, default: '' }},methods: { getData () { console.log(msg) }}父组件 fa.vue1.引入子组件import child from './child'data () { return { list: [ { msg: 'hhhh', in

2021-12-23 16:55:34 2409

原创 vue —— 火狐浏览器不支持时间格式

问题描述vue项目中出现路由跳转param传值，传的时间字符串，但是页面使用时this.$route.params取出时间字符串时，获得内容NAN，以为是火狐浏览器params传值不行，换成query传值也是不行的原因火狐浏览器时间字符串只支持yyyy/mm/dd格式，而我传的字符串是yyyy.mm.dd格式...

2021-12-14 14:22:51 1088

原创 vue —— async...await

async…awaitasync用于声明function 是异步的，await用于等待异步方法的执行完成单单使用async，return出的返回值是个Promise对象async Func () { return 'hello word'}Func().then(res => { console.log(res)} // hello word1）关于async…await 我自己的项目中经常用于接口调用时获取数据async Func () { const { data } =

2021-12-06 11:13:56 560

原创 vue —— api、axois封装

结构模块中各个api文件引用base.js、http.js中的方法api.js中引用模块中各个api文件，并使用exports导出base.jsvue代理路由地址// 接口域名管理const base = { apiUrl : 'http://192.100.100.135:1001'}export default basehttp.jsvue路由处理，axois封装、路由拦截器，使用了element UI中的全局loading方法，不加loading的也有import Vue

2021-11-04 10:01:04 200

原创 vue —— 调用浏览器复制方法

vue —— 调用浏览器复制方法原生<el-button type="text" @click="copy(‘里面传想要复制的内容’)">复制</el-button>// 复制 info 为传入的内容 copy (info) { let createInput = document.createElement('input') createInput.value = info document.body.appendChild(createInpu

2021-10-25 14:48:46 534

原创 vue——数字加逗号分隔

带小数的数字三位一分隔filters: { num: (val, fix = 2) => { val = val.toFixed(fix) // 保留小数2位 val = '' + val // 转换成字符串 let int = val.slice(0, fix * -1 - 1) // 获取整数 let ext = val.slice(fix * -1 - 1) // 获取到小数 int = int.split('').reverse().j

2021-10-18 09:34:37 3642 1

原创 vue——微信二维码显示vue-qr/qrcodejs2

微信二维码之vue-qr/qrcodejs2 区别vue-qr弊端：当后端微信返回二维码，不兼容IE浏览器npm install vue-qr --savemain.jsimport vueQr from 'vue-qr'Vue.use(vueQr)<vue-qr :text="qrCode" :margin="0" colorLight="#fff" :logoSrc="require('./../../assets/wpay.svg')" :logoScale="0.2" :si

2021-10-08 10:05:58 713

原创 swiper——异形swiper中最后一个元素无法使用点击事件

swiper——异性swiper中最后一个元素无法使用点击事件1.原因swiper异性中使用了loop:true属性，循环，但是元素总共就那几个，swiper循环时会复制前后元素，但是只复制元素，不复制事件，导致最后一个元素渲染成功，但是无法使用事件表现在：点击左边这个圆圈其实是切换到了最后一个轮播元素，点击事件失效，但是向右点击到该轮播元素点击事件正常2.解决因为渲染的元素存在，可以将事件绑定在dom节点上，而我使用的方法是比较笨的一种，但是很有效果，点击事件要加在图中按钮中，内容比较隐私，没什

2021-09-16 11:55:20 1335

原创 swiper——vue页面配合显示隐藏渲染两个轮播插件

swiper——vue页面配合显示隐藏渲染两个轮播插件问题：显示隐藏项目中使用vue v-show控制轮播盒子不同渲染，但是会出现第一次点击，轮播插件显示出现错误，具体表现为轮播子元素只剩下一个，且为缩小状态，需要多次切换显示轮播才能正常显示解决： this.$nextick()1.注意两个轮播盒子要使用不同的父元素，swiper-container不能用做最外层盒子2.切换显示隐藏方法需要调用加载swiper方法3.使用this.$nextTick()方法防止swiper方法初始化出现问题

2021-09-13 17:03:41 678

原创 element——vue封装弹窗及注意事项

element——vue封装弹窗及注意事项可在每页写单独样式或在封装文件中写统一样式1. 弹窗脚部取消按钮可隐藏，2. 按钮可实现loading效果，3. 弹窗标题、脚部按钮内容、弹窗宽度都可以自定义第一种方法弊端：弹窗插件点击确定会默认调取弹窗右上角关闭事件，所以有时候关闭方法中的内容会替换确定方法中的内容，导致确定方法中调取接口时数据错误1.1 封装<template> <div class="all-dialog2"> <el-dia

2021-09-08 10:41:02 1441 2

原创 Vuex——数据持久化

vuex-persistedstate1.终端安装插件npm install vuex-persistedstate --save2.store文件引入import Vue from 'vue'import Vuex from 'vuex'import app from './modules/app'import user from './modules/user'import tagsView from './modules/tagsView'import permission fro

2021-07-28 16:57:28 387

原创 js——正则归纳（持续更新）

输入框只能输入正数和小数点<input @keyup="this.value = this.value.replace(/[^0-9.]/g, "").trim()">输入框只能输入正数或两位小数<input @keyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">...

2021-07-21 14:04:13 86

原创 Vue——url下载图片文件（cavans）

Vue——url下载图片文件（cavans）记录项目中下载图片方式，这个方法不会在当前页打开而且兼容1.方法// 下载图片 phoneDown (imgsrc, name) { //下载图片地址和图片名 let image = new Image() // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous') image.onload = function() { let

2021-07-16 17:28:55 1513 1

原创 vue——scss变量全局使用

vue——scss变量全局使用1.终端安装sass-resources-loadernpm install sass-resources-loader --save2.vue.config.js注册最重要，不然报错SassError: Undefined variable.module.exports = { outputDir: 'ts-platform', css: { loaderOptions: { sass: { prependData: '

2021-07-12 11:22:48 549

原创兼容ie——下载base64pdf格式文件

dataURLtoBlob (dataurl) { const bstr = atob(dataurl) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new Blob([u8arr], { type: 'pdf' }) },// 兼容ie浏览器写法const URL = this.dataU

2021-06-17 11:01:48 771

原创 Vue——按钮防抖

Vue——按钮防抖按钮多次点击，只执行点击动作完成的一次事件触发1.创建util/once.js文件export const Debounce = (fn, t) => { const delay = t || 500 let timeout return function () { const context = this const args = arguments if (!timeout) { timeout = setTimeout(()

2021-05-21 13:25:44 634

原创 vue——base64图片转网络URL

vue——png图片base64解码// dataurl: 'XXXXXXXX' // base64编码imgUrl: '' // 图片路径// methodsbase64ImgtoFile (dataurl, filename = 'file') { const arr = dataurl.split(',') const mime = arr[0].match(/:(.*?);/)[1] const suffix = mime.split('/')[1]

2021-04-26 13:04:26 6131

原创 vuex——计算属性获取的getter值需要刷新才能更新

vuex——计算属性获取的getter值需要刷新才能更新描述： // state state: { leader: null }, // getters getters: { getLead: state => state.leader } // mutations mutations: { setLead (state, data) { state.leader = data } },// 页面中赋值// 登录时改变state.le

2021-03-31 11:17:22 1971

原创 PC项目——vue 脚手架中实现阿里云人机滑动验证

转自๑柯帆๑找半天才找到这个可用的 vue 脚手架中实现阿里云人机滑动验证描述：照官网写的引入方式引入vue报错 AWSC is not define解决：.html文件引入script标签后<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>在使用滑块的页面中需要再引入一遍script，大概是在页面内容之前要先加载该功能的资源吧<script type

2021-03-26 15:06:25 1315

原创 js——纯js模拟双向数据绑定

js——纯js模拟双向数据绑定是不是很多人只是知道双向数据绑定的实现效果，并不知道其原理，或是知道其原理并不明白的，使用js模拟一个简单的双向数据绑定案例吧，就会变得容易理解Object.defineProperty()vue双向数据绑定的原理就是它了html：<div class='box'> // input输入框最能体现双向数据绑定的效果了 <input type='text' id='txt' /> // 输入内容会同步显示在这里 <p i

2021-03-19 15:31:42 809

原创 ie浏览器兼容——scrollTop

ie浏览器兼容——scrollTop报错无法获取未定义或 null 引用的属性“scrollTop”解决polyfill document.scrollingElement.jshttps://github.com/yangg/scrolling-elementnpm install scrolling-element --save页面或main.js中引入import 'scrolling-element'或.html文件引用<script src="scrolling-e

2021-03-16 11:49:25 385

原创 swiper——轮播slider最后一个元素显示不全

轮播slider最后一个元素显示不全，能拖出来，松手弹回去slidesPerView: ‘auto’,重要的属性设置，有的人说要给slider元素设置宽高，或者去掉所有的padding，但是slidesPerView: 'auto’设置过后会使轮播元素长度呈现一行无限滑动效果，最终在轮播初始化中设置固定宽度width，这个宽度要自己调试的，可能不是铺满。const swiper = new Swiper('.swiper-container', { slidesPerView: 'aut

2021-02-20 16:36:54 2621

原创 element——表单的复杂数组渲染

element——表单的数组渲染及校验(vue)常见表单渲染及校验<template> <div class='test'> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="活动名称" prop='name'> <el-input v-model="form.name"></el-input> </e

2021-02-08 16:31:41 705

原创 element——时间选择器当天之后，后一选择器时间不超过前时间选择器

element——时间选择器当天之后，后一选择器时间不超过前时间选择器 <el-date-picker type="date" placeholder="请选择" v-model="startTime" :picker-options="pickerOptions" value-format="yyyy-MM-dd"></el-date-picker> <el-date-picker type="date" placeholder="请选择"

2021-01-21 13:21:48 654

原创 elementui——带建议的输入框远程搜索

```javascript<el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete><script> export default { data() { return { restaurants: [],.

2021-01-14 17:24:57 964

原创报错笔记——serve : “vue-cli-service serve“

报错笔记——serve:“vue-cli-service serve”项目运行编译时报错如图所示，网上搜的删除node_modules并重新npm install根本没有用；原因：node版本过高，出现不兼容解决办法：卸载当前node，并安装v10及以下版本，删除node_modules文件，命令行npm install 重新运行编译npm run serve即可所有node版本入口node版本入口下载msi版本可自动添加path配置...

2020-12-22 17:32:33 1158

原创循环遍历的区别

循环遍历的区别forEach直接循环数组，没有返回值for循环数组，对数组的每一项进行加工，并返回一个新的数组filter循环并过滤数组，得到想要的内容let arr = [1,2,3,4,5,6,7,8,9];arr.filter((item,index)=>{ if(item % 2 == 0){ //偶数 retrun true //返回true（留下偶数） }else{ //奇数 return false

2020-10-27 14:41:24 1304 2

原创 Vue双向数据绑定原理

Vue双向数据绑定原理前端面试必问的一道面试题vue采用MVVM模式，数据劫持结合开发者-订阅者模式，通过Object.defineProperty()劫持各个属性的getter、setter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤Observe将数据对象（data数据）进行递归遍历，在每一个属性都加上setter和getter，给data的某个值赋值，就会触发setter，从而监听到数据变化。实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据模板指令

2020-10-27 11:36:11 115

空空如也

空空如也