![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
时光机上敲代码
喜欢敲键盘的程序猿
展开
-
完美解决 antd-vue a-transfer 中 a-tree接口异步加载
可以让antd-vue 穿梭框能够把异步的树形图,能够正常的使用穿梭框,做了研究,发现全网找不到案例,研究一天搞定了。原创 2022-11-01 10:59:05 · 2210 阅读 · 0 评论 -
vue $set 1分钟精通
使用场景:经常在vue中,修改对象某个属性,或者修改数组时,会发现页面没有更新,这是因为vue为了性能,不会主动去监听对象的值是否改变,只有对象地址改变时,vue才会主动去更新。修改对象地址主要是使用深拷贝,还有一只方式就是用vue自带的$set.使用方式:$set更新对象时:this.$set(this.data,”key”,value’)$set更新数组时: this.$set(this.data,index,value’)...原创 2022-01-19 16:03:49 · 413 阅读 · 0 评论 -
Vue 中img标签src的路径问题
背景:开发过程在本地开发时候img正常显示,打包之后显示路径不正确。解决方法:<template> <div > <img :src="logo" /> </div></template><script>import logo from '@/image/logo.png'export default { data () { return { logo:logo ..原创 2021-12-02 16:35:22 · 1143 阅读 · 0 评论 -
vue v-for 最好不要index作为key
为什么要用key?Vue 和 React 都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。Vue 和 React 的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设:两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构。 同一层级的一组节点,他们可以通过唯一的id进行区分。为什么不能用index作为keyvue中 如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来原创 2021-10-11 08:49:30 · 161 阅读 · 0 评论 -
3分钟了解 vue props type类型
用了很久的vue,有时候总觉得props type类型,总是有点模棱两可,今天来好好的盘盘他props介绍:都知道props是用来父给子传值的(单向的),HTML 中的 attribute 名是大小写不敏感的,这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名props类型:props type使用的目的,有点像typescript那种类型检查,type的类型有如下几种,...原创 2021-10-08 17:16:29 · 17444 阅读 · 1 评论 -
nuxt项目打包成静态包,解决报错:xxx from origin ‘null‘ has been blocked by CORS policy
背景:公司需要把前端代码打包成静态文件,但是初始化打包,发现js报错。经过一番研究,解决了这个问题。报错信息:第一步:解决js引入路径问题在nuxt.config.js中修改js引用配置路径:添加mode 和 base配置...原创 2021-08-18 11:05:03 · 974 阅读 · 0 评论 -
VUE中优雅的全局使用websocket
VUE中优雅的全局使用websocket1.首先创建一个全局 js 文件,如 global.js ,用于定义全局变量 ws 和方法 setWs()// global.jsexport default { ws: {}, setWs: function(newWs) { this.ws = newWs }}在 main.js 中引入 global.js// main.jsimport global from './xx/global.js'原创 2021-08-05 13:52:17 · 2787 阅读 · 0 评论 -
v-html 安全问题处理
原因:你的站点上动态渲染的任意HTML可能会非常危险,因为它很容易导致XSS攻击。请只对可信内容使用HTML插值,绝不要对用户提供的内容插值。解决办法:使用<pre>标签替换掉<div>标签。利用的就是<pre>标签的这个功能:被包围在<pre>元素中的文本通常会保留空格和换行符,并且文本也会呈现为等宽字体。注意:pre标签使用的时候会出现不自动换行的问题,而且存在一些默认样式。一下是解决自动换行的办法:...原创 2021-05-19 14:31:10 · 1115 阅读 · 0 评论 -
vue 过滤器 管道符 {{ | }}
过滤器 又称管道符 : | ←就是这个竖线! 叫管道符将一串数据A拿去处理,处理完之后继续拿来用,且不会影响原来的数据A,也不会改变是一个方法?通过参数的方式接受处理的数据,通过返回值的方式 告诉Vue显示什么过滤器 — Vue.js<template>}{{item.addtime | afterTime }}</template><script> 写在export default里面的data同级后面filters:{afterTime(原创 2021-04-24 01:47:27 · 8500 阅读 · 0 评论 -
完美解决vue将 element el-table 表格导出为excel
第一步:安装依赖包npm install --save file-saver xlsx第二步:vue中的js例子,照着写,聪明的你看的懂。<template> <div class="hello"> <h1>vue</h1> <h2>{{msg}}</h2> <p><button type="button" id="export-table" @click="exportFu原创 2021-04-12 17:01:19 · 669 阅读 · 0 评论 -
vue3 element+ 后台管理最佳范例
https://github.com/newbee-ltd/vue3-admin原创 2021-03-31 10:52:17 · 227 阅读 · 0 评论 -
import 动态路由引入路径报错 Error:Can‘t find mudules
原因:因为import 在webpack4中动态路由中不能包含变量出错写法:export const loadView = (view) => { // 路由懒加载 //return (resolve) => require([`@/views/${view}`],resolve) return () => import(`@/views/${view}`)}正确写法:export const loadView = (view) => { // 路原创 2021-03-31 10:47:14 · 1729 阅读 · 0 评论 -
vue computed 无法得到this的属性或方法
场景:在vue中使用es6语法的箭头函数无法正常的使用this下面的方法原因:计算属性computed不应该使用箭头函数来定义计算属性 因为箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向Vue修改前:computed: { isShowDialog: () => { return this.$store.getters.isShowDialog; } },修改后:computed: { isShowDialog: f原创 2021-03-26 11:51:39 · 4364 阅读 · 0 评论 -
完美解决:Error: Can‘t find Python executable “python“, you can set the PYTHON env variable
问题:在npm install 或 npm i中,有时候会爆出Error: Can't find Python executable "python", you can set the PYTHON env variable问题解析:这是因为没有python的运行环境解决办法:npm install --global --production windows-build-tools...原创 2021-03-01 16:00:25 · 2720 阅读 · 0 评论 -
vue使用html2canvas开发截图功能和解决截图和顶部留白问题的坑
环境:vue2.0+ ; webpack3.0+项目:开发年终报告,类似支付宝年终账单的功能,需要使用swiper,上下滑动并且用到html2canvas截图功能;需要安装的包:npm ihtml2canvas -Stemplate中的html代码:<template> //添加一个class为page的div,里面包含所修改截图的html内容 <div class="page" @click="saveImg('page01')">....原创 2021-01-21 18:06:54 · 1192 阅读 · 0 评论 -
H5 vue 移动端px自动转换rem
环境:webpack:3.0+; vue:2.0+方法:使用 postcss-pxtorem插件步骤一:npm i postcss-pxtorem -D 步骤二:在package.json文件中postcss添加配置 "postcss": { "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue": 37.5, "propList": [..原创 2021-01-20 11:13:31 · 602 阅读 · 1 评论 -
vue滚动条缓慢移动到某个位置
需求:需要滚动条缓慢移动到某个位置scrollAnimation(currentY, targetY) { // 获取当前位置方法 // 计算需要移动的距离 let needScrollTop = targetY - currentY let _currentY = currentY setTimeout(() => { // 一次调用滑动帧数,每次调用会不一样 const dist = Math.c.原创 2021-01-19 17:29:22 · 1349 阅读 · 0 评论 -
vue封装svg组件和iconfont文件引入
封装SVG格式的图片,vue分装成组件步骤如下1.安装svg-sprite-loader插件,运行以下命令: npm i svg-sprite-loader -D2. webpack4.0版本中的配置:在vue.config.js chainWebpack添加配置 chainWebpack: (config) => { config.resolve.alias .set('@', resolve('./src')) ..原创 2021-01-19 10:08:40 · 575 阅读 · 0 评论 -
最新vue devtools安装
第一步:找到vue-devtools的github项目,并将其clone到本地 git clonehttps://github.com/vuejs/vue-devtools.git第二步:安装项目所需要的npm包 解压后在这个目录下用npm 安装(npm install)第三步:编译项目文件 再执...原创 2019-03-15 10:55:14 · 199 阅读 · 0 评论