达拉崩巴斑得贝迪卜多比鲁翁_

原因：子组件改了父组件的值避免修改父组件传过来的值注意: 如果value是obj，需要进行深拷贝。可以参考： https://blog.csdn.net/u013948858/article/details/118342541 文章目录 1. 需求及报错2. 分析原因2.1 这是..

vue-cropper官网链接：https://github.com/xyxiao001/vue-cropper安装：npm install vue-cropper 或者 yarn add vue-cropper组件封装CropperImage.vue<template> <div class="cropper-content"> <div class="cropper-box"> <div class="cropper">

故事还要从授权开始首先判断用户是否授权：未授权：后端接口返回一个授权的link， 使用get请求访问link，需要手动修改referer，前端带的referer要和后端配置的referer是同一个，否则会报错。授权之后：创建会员卡：（我们使用的是1.0版本）接口文档：点击跳转到接口文档接口调试工具：https://mp.weixin.qq.com/debug/调试工具的使用方法：填写好appid appsecret会返回一个 access_token ...

例如：想给图片增加高度和宽度<el-image :class="classRotation" v-if="imageData.src !== undefined" :src="imageData.src" :style="imageStyle"></el-image> //在data中声明 imageStyledata(){ return{ imageData:{}, imageStyle :{}, //样式参数

原数据 editFormData: { column_info_list: [ { 'code': '', 'title': '', 'operate_type': 'openWeb', 'more_info': { 'url': '' } } ], }现在要修改 more-

// 查列表 async getlist (pageIndex) { let data = { pageIndex, pageSize: this.pageSize } await getCouponPageList(data).then(res => { const { data: { code, msg, data } } = res if (code === 0) { ...

一：<template> <div id="app"> <div class="y_bj" :style="y_bj"></div> </div></template><script>import { Toast } from "vant";export default { data() { return { y_bj: { backgroundImage:

后端返回的是链接，我们要将链接转化为二维码，并实现下载功能官方介绍： https://www.npmjs.com/package/vue-qr1. 安装npm install vue-qr --save2、导入vue项目中使用<template><vue-qr :text="link" :size="downImgSize" :margin="0" ref='Qrcode'></vue-qr><div class="mt20"> {{$t(.

此方法使用的是v-if来控制router-view的显示或隐藏，v-if从false变为true时，vue会重新渲染router-view区域，所以当参数变化时，只需让v-if 从true => false => false,就能实现页面刷新;问题描述官网地址路由http://localhost:1221/newproduct?entityId=7B311104点击div时，变为http://localhost:1221/newproduct页面不刷新怎么办……温馨提示,此方

一： vue 报错解决：TypeError: Cannot read property ‘_t’ of undefined" 前端报错如下： [Vue warn]: Error in render: “TypeError: Cannot read property ‘_t’ of undefined”是在项目中用了多语言配置，vue 跟 i18n之间的兼容问题。解决方法如下：Vue.use(ViewUI, { i18n: (key, value) => i18n.t(key, value)}

官网查看iview准备工作import { getDate, getTime } from '@/libs/util'@/libs/util/** * @description 日期时间转换时间戳 */export const getTime = dt => { return dt ? new Date(dt).getTime() : new Date().getTime()}/** * @description 时间戳转换日期时间 */export const ge

**　Vuex 中 使用 Action 处理异步请求时，常规写法如下：** getMenuAction:(context) =>{ context.commit('SET_MENU_LIST',['承保2','核保2']) } }我们也可以使用如下简化写法，如下： actions:{ getMenuAction:({commit}) =>{ commit('SET_MENU_LIST',['承保2','核保2'])

官网查看： 混入基础混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。例子：// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from

https://www.npmjs.com/package/js-export-excel第一步，先安装该组件：npm install js-export-exceloryarn add js-export-excel第二步，在需要地方引用const ExportJsonExcel = require("js-export-excel");orimport ExportJsonExcel from "js-export-excel";开始使用<template>

混合开发的时候是怎么做的前后端混合开发的时候，用户登录状态的管理一般都是通过session来实现的，原理很简单：用户登录后，服务端将登录用户信息存储到服务器上的特定位置，并生成对应的session id存储到浏览器的cookie中。需要校验的时候先读取cookie中的session id，找到服务器中对应的存储内容，完成校验。很显然，这个机制是建立在cookie基础上的，cookie又依赖于浏览器，而且有域名限制。是不适合app、小程序、以及前后端时数据接口采用其他域名等情况的。app、小程序、前后端

h5网页在移动端（安卓）head里的title为空，默认显示url地址。js代码将head的title设置为空解决方案： document.title='\u200E'router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = i18n.t(to.meta.title) } else { document.title='\u200E' } next()})之前

Normalize.css简介我们在开发的时候会发现很多样式都自带了各自特有的默认样式，而这样样式通常会被遗忘，导致样式调整起来很繁琐。为了让样式统一，我们在开发的时候通常会对一些元素进行样式重置，已避免默认样式影响开发。Normalize.css就是一个这样的CSS样式文件，它的作用就是让HTML元素更好的实现跨浏览器一致性。网址链接: http://necolas.github.io/normalize.css/Normalize.css 特点标准化的样式，适用于大部分HTML元素；保留有用

nprogress页面加载进度条前言很多时候在访问网页的时候我们总是看到页面在加载中，可以却不知道要加载多久，无期限的等待总是让人烦躁不安，所以我们希望能知道网页加载的进度，这样我们就能做到心中有数是否继续等待页面加载。这个功能我们可以依靠nprogress来实现，它是轻量级的进度条组件，使用简便，可以很方便集成到应用中来。安装nprogress直接在项目中执行安装命令：npm install --save nprogressnprogress方法NProgress.start() //

什么是vue-i18ni18n是 Internationalization 这个英文的简写，即国际化的意思，vue-i18n是一款针对于vue开发的国际化插件,让项目支持多语言切换，以适应不同地区用户的需求。安装vue-i18n直接在项目中执行安装命令：npm install vue-i18n --save​全局引入vue-i18n在项目中引入vue-i18n，实例化vue-i18n将需要加载的语言包通过require导入，这里看个人需求我只需要中英日文，所以引入zh-CN.js和en-US.j

项目中我们经常需要实现轮询-每隔几秒请求一次接口刷新数据一般都会使用setInterval，但要注意单纯使用它会导致页面卡死，所以一定要清除定时器setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死你的网页。但是setTimeout是自带清除定时器的mounted () { const timer = window.setInterval(() => { setTimeout(function () { chooseProdu

里面加上：<meta name="format-detection" content="telephone=yes"/>需要拨打的电话：<a href="tel:168-1686-16888">168-1686-16888</a>调用发短信：<a href="sms:18888888888">发短信</a>点击 页面上的电话号码 ，页面会调用手机的电话，短信 接口。...

进入本地仓库访问位置之后执行命令远程仓库相关命令检出仓库：$ git clone git://github.com/jquery/jquery.git查看远程仓库：$ git remote -v添加远程仓库：$ git remote add [name] [url]删除远程仓库：$ git remote rm [name]修改远程仓库：$ git remote set-url --push[name][newUrl]拉取远程仓库：$ git pull [remoteName] [loc.

在终端安装任何包，执行 npm i均报错npm ERR! code ENOTFOUNDnpm ERR! errno ENOTFOUNDnpm ERR! network request to https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz failed, reason: getaddrinfo ENOTFOUND registry.npmjs.orgnpm ERR! network This is a problem related to ne

路由元信息meta：每个路由的标识信息，是路由独有的一个信息，无论在路由中是否定义meta，在组件中都可以通过this.$route.meta访问到，如果没有定义，返回{}在组件中：通过this.router.meta获取该组件的路由元信息注意:如果没有在路由中定义meta，在组件中访问到的this.router.meta获取该组件的路由元信息 注意: 如果没有在路由中定义meta，在组件中访问到的this.router.meta获取该组件的路由元信息注意:如果没有在路由中定义meta，在

最近在重构公司以前产品的前端代码，摈弃了以前的session-cookie鉴权方式，采用token鉴权，忙里偷闲觉得有必要对几种常见的鉴权方式整理一下。 目前我们常用的鉴权有四种： HTTP Basic Authenticationsession-cookieT...

想必大家在刨坑vue的时候也遇到过下面情形：比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种：这时候我们最直接的思维就是想到下面这种：但是，试过的会发现用vue-router重新路由到当前页面，页面是不进行刷新的，根本没有任何作用~所以这个方法out！下面我这边整理几种可圈可点的三种方式，大家可以自行的选择：1、最直接整个页面重新刷新：location. reload()this.$router.go(0)这两种都可以刷新当前页面的，缺点就是相当于...

vue中的组件通信 相信小伙伴们已经达到炉火纯青的地步了提到vue里父子组件通信 脑子里第一个想到的是不是使用$emit来传递.实现肯定是能实现的 下面我们一起看一下一种简单的方法父组件:在父组件中定义了 传递的方法 method 并在父组件中打印<template> <div class="about"> <Son :arr="arr"></Son> </div></template><scri

time-formater 不是 time-format[t]er English 在javascript中显示日期。 使用方法 下载npm i -S time-formaterlet rawDate = time().format('YYYY-MM-DD HH:mm:ss') // 当前时间console.log(rawDate) // 2020-12-28 15:19:3...

今天用2.0创建项目的时候，使用scss一直不成功，一直报错………………记录一下，防止下次踩坑1、安装依赖包vue的webpack项目中需要安装上node-sass、sass-loader和style-loader，所以，在项目中，运行一遍：npm i node-sass sass-loader style-loader -D运行以上的命令之后，将在package.json文件中的“devDependencies”属性中看到对应的版本号。2、配置loader在项目中的build目录找到web

vue常用组件插件UI组件element- 饿了么出品的Vue2的web UI工具套件Vux- 基于Vue和WeUI的组件库mint-ui- Vue 2的移动UI元素iview- 基于 Vuejs 的开源 UI 组件库Keen-UI- 轻量级的基本UI组件合集vue-material- 通过Vue Material和Vue 2建立精美的app应用muse-ui- 三端样式一致的响应式 UI 库vuetify- 为移动而生的Vue JS 2组件框架vonic- 快速构建移动端单页应用eme- 优雅的Markd

vue组件里定时器销毁问题我在a页面写一个定时，让他每秒钟打印一个1，然后跳转到b页面，此时可以看到，定时器依然在执行。这样是非常消耗性能的。如下图所示：解决方法1：首先我在data函数里面进行定义定时器名称：data() { return { timer: null // 定时器名称 } },然后这样使用定时器：this.timer =

官网解释：ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册下面用两个例子来深入理解ref和refs一、ref作用于组件<div id="app"> <navbar ref="navbar"></navbar> <pagefooter r

Vue指令之v-for和key属性1.迭代数组<ul> <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li></ul>2.迭代对象中的属性 <!-- 循环遍历对象身上的属性 --> <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}}

overflow: auto 后监听滚动距离<div class="page-body-inner" @scroll.passive="getScroll($event)"></div>getScroll(e) { console.log(e.target.scrollTop)},if 想要点击之后 从顶部开始滚动 方法如下 <div id="over"> </div> document.getElementById('over').s

vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly即可，scrolly我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的一、main.js里面配置vuex//引用vueximport Vuex from 'vuex'Vue.use(Vuex)二、main.js里面vuex状态管理var store = new.

情景描述1.页面 /a, 有输入框, 当输入框输入合适的值的时候, 不隐藏软键盘, 点击相应按钮直接跳到 /b2.页面 /b, 页面本来内容很少, 没有滚动条的, 可是莫名的被下方的灰色区域顶到可视区上面, 内容被隐藏了一点, 但是手动拉回正常展示以后, 问题就不再重现解决办法(针对单个页面这个问题的)// 在/b页面, vue的mounted方法中, 写设置页面滚动条的这个方法mounted() { // 切换页面时滚动条自动滚动到顶部 window.scrollTo(0,0);}

在写导航切换时点击会有以下报错这个报错是是路由中点击路径重复 ，也有可能是安装的vue-router还是之前出错的那个版本，在项目目录下运行 npm i vue-router@3.0 -S 即可。解决方法1：在 main.js里添加一段代码。代码如下：import Router from 'vue-router'const routerPush = Router.prototype.pushRouter.prototype.push = function push(location) {

1.实现效果（左上角title变化）2.核心代码：1.这里主要是 meta 属性下面设置一个自定义的键值 title2.在前置导航守卫里面如下：router.beforeEach((to,from,next)=>{ // 根据路由元信息设置文档标题 window.document.title = to.meta.title || admin next()})3.完整的路由代码import Vue from 'vue'import Router from 'vue-rou

在vue项目中，切换路由时肯定会碰到需要登录的路由，其原理就是在切换路径之前进行判断，你不可能进入页面再去判断有无登录重新定向到login，那样的话会导致页面已经渲染以及它的各种请求已经发出。一、如需要登录的路由可在main.js中统一处理（全局前置守卫）我们可以在入口文件man.js里面进行配置，使用router.beforeEach方法，不懂得可以打印to，from的参数就ok，requireAuth可以随意换名的，只要man.js里面跟配置路由的routes里面的字段保持一致：import ro

项目中我们经常会遇见要把时间戳转换成时间的情况，或者是把当前的时间转换成时间戳传给后台。下面 向大家介绍几款好用的时间戳转化插件1. Day.js ：一个轻量的处理时间和日期的 JavaScript 库安装npm install dayjs --saveimport dayjs from 'dayjs'// 或者 CommonJS// var dayjs = require('dayjs');dayjs().format();API文檔API参考：当前时间 dayjs()