vue
Juliet_xmj
我只是一个小前端
展开
-
Vuex —— mapState、mapMutations、mapActions的使用
【代码】Vuex —— mapState、mapMutations、mapActions的使用。原创 2023-03-06 11:04:09 · 439 阅读 · 0 评论 -
echarts —— 显隐切换图表显示有误
解决echarts切换显隐显示问题原创 2022-12-02 10:18:26 · 977 阅读 · 0 评论 -
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 · 3561 阅读 · 0 评论 -
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 · 230 阅读 · 0 评论 -
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 · 6860 阅读 · 0 评论 -
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 · 1431 阅读 · 0 评论 -
Vue双向数据绑定原理
Vue双向数据绑定原理前端面试必问的一道面试题vue采用MVVM模式,数据劫持结合开发者-订阅者模式,通过Object.defineProperty()劫持各个属性的getter、setter,在数据变动时发布消息给订阅者,触发相应的监听回调。具体步骤Observe将数据对象(data数据)进行递归遍历,在每一个属性都加上setter和getter,给data的某个值赋值,就会触发setter,从而监听到数据变化。实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据模板指令原创 2020-10-27 11:36:11 · 129 阅读 · 0 评论 -
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 · 2103 阅读 · 0 评论 -
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 · 730 阅读 · 0 评论 -
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 · 415 阅读 · 0 评论 -
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 · 3976 阅读 · 1 评论 -
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 · 577 阅读 · 0 评论 -
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 · 589 阅读 · 0 评论 -
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 · 788 阅读 · 0 评论 -
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 · 1659 阅读 · 1 评论 -
Vue+阿里矢量图
Vue+阿里矢量图一、注册账号(没有注册的)可以通过微博登录或者GitHub账号登录二、搜索想要的图标有时候搜到的图标很少,要重新点一遍全部(红色按钮)就可以了,点击添加购物车三、添加项目点击购物车查看添加图标,点击添加项目,如果没有,这个按钮右边会出现添加新项目,点就行了四、Vue中解压后的文件复制到VUE项目中的assets/icon文件夹(icon是自己创建的)main.js(要放在UI框架后面)打开浏览器中Vue组件中使用iconfont 必须要带,后面的一个原创 2020-08-14 16:28:25 · 363 阅读 · 0 评论 -
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 · 2530 阅读 · 0 评论 -
vue —— 火狐浏览器不支持时间格式
问题描述vue项目中出现路由跳转param传值,传的时间字符串,但是页面使用时this.$route.params取出时间字符串时,获得内容NAN,以为是火狐浏览器params传值不行,换成query传值也是不行的原因火狐浏览器时间字符串只支持yyyy/mm/dd格式,而我传的字符串是yyyy.mm.dd格式...原创 2021-12-14 14:22:51 · 1159 阅读 · 0 评论 -
vue —— 新增面试题(项目使用)
vue的面试题,大部分时项目中具体使用原创 2022-06-08 09:59:54 · 288 阅读 · 0 评论 -
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 · 589 阅读 · 0 评论 -
vue —— 在不安装脚手架情况下启动项目
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 · 2412 阅读 · 0 评论 -
npm install 报错
安装依赖报错或者是报错python环境有误,解决:将npm 降级到6,node版本最好控制在14之下https://nodejs.org/download/release/v14.19.3/全局下,将npm降级npm install npm@6.14.10 -g查看版本node -vnpm -v原创 2022-05-30 12:43:24 · 163 阅读 · 0 评论 -
vue —— 内置组件keep-alive
vue内置组件keep-alive使用方法原创 2022-06-08 09:44:31 · 155 阅读 · 0 评论