![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
木头没有瓜
王者也飘然
展开
-
vue2和vue3的区别
这个副作用函数的参数也是一个函数,注册副作用清理的回调函数。返回的对象以及其中嵌套的对象都会通过 ES Proxy 包裹,因此不等于源对象,建议只使用响应式代理,避免使用原始对象。功能:侦听数据的变化,和选项式api中的watch实现的功能一样,组合式api中watch功能更加强大,灵活。1)、功能:接受一个内部值,返回一个响应式的、可更改的 ref 对象,ref对象只有一个属性:value。通过Proxy(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。原创 2023-09-01 22:31:06 · 408 阅读 · 0 评论 -
vue vuex和pinia(菠萝)的区别
pinia就是vuex的升级版。pinia(菠萝)的优点。原创 2022-11-15 16:26:01 · 1608 阅读 · 0 评论 -
js vue自动创建blob/binary文件给后端服务器
背景服务器需要(xml)文件,一般文件都是读取的,通过input=file,但是能不能手动创建文件并上传呢,答案是可以的。重头戏、创建blob对象。设置http传输格式。原创 2022-07-25 12:28:09 · 1911 阅读 · 0 评论 -
vue 动态组件&异步组件
详情查看官方文档动态组件 & 异步组件 — Vue.js背景:做一个弹窗,但是弹窗的内容是组件,并且组件是未知的,服务器接口会返回组件的物理绝对地址<component :ref="currentDialogComponent" :visible.sync="visible" :is="currentDialogComponent" @submitFormData="submitFormData" />dialogC...原创 2022-03-28 16:29:17 · 1183 阅读 · 0 评论 -
vue-cli 替我们做了哪些工作?
首先需要知道 vue-cli 是什么?它是基于 Vue.js 进行快速开发的完整系统,也可以理解成是很多 npm 包的集合。其次,vue-cli 完成的功能有哪些?.vue 文件 --> .js 文件ES6 语法 --> ES5 语法Sass,Less,Stylus --> CSS对 jpg,png,font 等静态资源的处理热更新定义环境变量,区分 dev 和 production 模式vue-cli是vue的一个脚手架工具,主要作用:目录结构、本地调试、代码部署、原创 2022-02-26 17:42:49 · 1216 阅读 · 0 评论 -
SCRIPT5005: 缺少字符串 abclite-2063-s.js (1,43533) vue 兼容 ie 浏览器报错(iview-admin, view-design)
网上有很多种方案,首先通用的设置是一样的,通过babel-polyfill来降级处理,抹平差异化,通用的配置可以参考这篇文章vue 项目在ie浏览器的兼容问题_尹小姐的博客-CSDN博客_vue兼容ie浏览器解决方案1、安装:npm install --save babel-polyfill;2、配置:module.exports = { entry: ["babel-polyfill", "./src/main.js"] };其他没有配置,最后我的项目配置如下,package.json文件原创 2022-02-23 14:56:18 · 1488 阅读 · 0 评论 -
vue和react的区别是什么?
原文地址:vue和react的区别是什么? - 知乎1、监听数据变化的实现原理不同Vue通过 getter/setter以及一些函数的劫持,能精确知道数据变化。React默认是通过比较引用的方式(diff)进行的,如果不优化可能导致大量不必要的VDOM的重新渲染。为什么React不精确监听数据变化呢?这是因为Vue和React设计理念上的区别,Vue使用的是可变数据,而React更强调数据的不可变,两者没有好坏之分,Vue更加简单,而React构建大型应用的时候更加鲁棒。2、数据流的不同原创 2022-02-07 18:43:45 · 1909 阅读 · 0 评论 -
vue生命周期钩子函数详解
简述每个周期具体适合哪些场景?beforeCreate:创建前,此阶段为实例初始化之后,this指向创建的实例,此时的数据观察事件机制都未形成,不能获得DOM节点。 data,computed,watch,methods 上的方法和数据均不能访问。 可以在这加个loading事件。 created:创建后,此阶段为实例已经创建,完成数据(data、props、computed)的初始化导入依赖项。 可访问 data computed watch methods 上的方法和数据。 初始化完成时的原创 2022-02-07 14:46:20 · 509 阅读 · 0 评论 -
原生浏览器分享能力vue
项目1地址:fa-ge/nativeSharedemo1地址:NativeShare demo项目2地址:RedSuper/nativeShare.js · GitHubdemo2地址:NativeShare demo兼容性(毫无疑问是兼容浏览器最多的插件了)移动端几乎所有浏览器都支持分享到QQ和QQ空间 QQ浏览器 UC浏览器 微信自带浏览器(只能设置文案,分享需要用户手动点击右上角) ios QQ自带浏览器(只能设置文案,分享需要用户手动点击右上角) QQ空间APP(只能.原创 2021-12-29 16:26:36 · 1200 阅读 · 0 评论 -
Vue 使用form表单提交问题
背景:公司的项目对接了一家第三方的支付机构,使用云闪付web移动端支付,对方要求form表单提交信息1、一开始,使用接口使用Axios请求设置form格式提交import axios from "axios"; axios.post( success.data.credential.postParamMap, JSON.parse(success.data.credential.postParamMap),原创 2021-12-10 16:21:25 · 3269 阅读 · 0 评论 -
Vue祖孙组件
$attrsvue 在 2.4.0 版本中新增了 $attrs 属性。根据前面的理解 $attrs 就是没有在 props 中声明要接收的一些属性。此外,还可以通过 v-bind="$attrs" 把来自父组件的一些属性直接传递到子组件中。① GrandFather 组件不用做修改② 这次在 Father 中只在 props 接收了 msg1,与自己无关的直接使用 v-bind="attrs" 绑定到子组件上。当然,在 Father 中还是可以访问 $attrs 的。在代码中访问要使用 th原创 2021-11-29 17:18:44 · 749 阅读 · 0 评论 -
Vue数据双向绑定原理(vue2和vue3)
原文地址:Vue数据双向绑定原理(vue2向vue3的过渡)_Vam的金豆之路-CSDN博客众所周知,Vue的两大重要概念:数据驱动组件系统接下来我们浅析数据双向绑定的原理一、vue21、认识definePropertyvue2中的双向绑定是基于defineProperty的get操作与set操作,那么我们简单认识下defineProperty,作用: 就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性。那么我们先来看下Object.getOwnPrope...https://blog.csdn原创 2021-11-26 11:11:07 · 360 阅读 · 0 评论 -
vue中clearInterval无效~解决方法
vue页面中不要直接使用setInterval(fun,5000) 和 clearInterval() 会出现clearInterval 失效的问题。建议采用window.setInterval(fun,5000) 和window.clearInterval() clearInterval失效问题就可以解决,具体原因不明...原创 2021-11-19 16:13:58 · 1742 阅读 · 4 评论 -
location. reload() 安卓微信内不刷新页面 vue 已解决
this.$router.go(0)换了这个就好了搞了大半天原创 2021-10-16 16:44:08 · 533 阅读 · 0 评论 -
vue push 同一个路由,到当前页面的时候刷新数据
业务场景是这样子的,我从点击搜索框输入搜索,跳转提油页,发现在促销界面点击不会发起请求,因为顶部的区域是写在公共组件里的,那怎么才刷新呢// main.vue 文件 this.$router.push({ name: 'salepomption', params: { timestamp: (new Date()).valueOf()}, query: { code: this.searchData, timestamp: (new Da.原创 2021-09-27 18:04:58 · 699 阅读 · 0 评论 -
h5页面唤起微信小程序(vue)
腾讯文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62前提请确保小程序是已认证的非个人主体的小程序,或者已认证的服务号 · “JS接口安全域名” 已经绑定(登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名原创 2021-08-26 16:52:19 · 12111 阅读 · 0 评论 -
【已解决】‘webpack-dev-server‘ 不是内部或外部命令,也不是可运行的程序
做一个vue项目的时候,npm run dev 报错'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序最终通过以下方案解决npm install webpack-dev-server@2.9.1原创 2021-02-18 15:46:36 · 1519 阅读 · 0 评论 -
vue运行报错冒号问题,browser.js:158 Uncaught SyntaxError: Unexpected token ‘:‘
遇到了一个超级奇怪的问题,vue编译控制台没有报错,但是运行控制台报错browser.js:158 Uncaught SyntaxError: Unexpected token ':'browser.js文件应该是编译打包生成的文件,在vue项目中并不存在,很明显,host 处的值没有使用双引号,导致运行报错只好根据使用到host的查找乍看一下好像没有什么问题,但是扯淡的是,host的值会被运行成不带引号,实在是令人摸不着头脑,经仔细筛查,只有加上双引号,如下才不会报错.原创 2021-02-18 11:08:43 · 875 阅读 · 1 评论 -
出现`webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`报错
vue 项目 npm run dev 运行时报错:npm ERR! xxx@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js原因:新版的webpack-dev-server 3.1.14 存在问题。解决方法:package.json 中指定 webpack-dev-server 低版本号方法1:“webpack-dev-server”: “^2.9.1”删除 no.原创 2021-02-05 18:58:54 · 1365 阅读 · 0 评论 -
Vue Keep-alive 原理
原文地址:https://www.cnblogs.com/gaosirs/p/10601463.htmlKeep-alive 是 Vue 的一个内置组件,会缓存不活动的组件实例,防止重复渲染DOM。一、原理 Vue 的缓存机制并不是直接存储 DOM 结构,而是将 DOM 节点抽象成了一个个VNode节点。 因此,Vue 的 keep-alive 缓存也是基于VNode节点而不是直接存储 DOM 节点。二、参数 Keep-alive 组件提供了include和excl...原创 2021-01-13 14:34:57 · 214 阅读 · 0 评论 -
Vue 限制input输入金额 小数点后两位number
限制input输入 小数点后两位number<input type="number" @keydown="handleInput" placeholder="请输入或查看" v-model="item.SalePrice">handleInput(e) { // 通过正则过滤小数点后两位 e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null},Vue 限制input输入数字 不可.原创 2021-01-12 15:39:02 · 2876 阅读 · 0 评论 -
v-for指令循环中key属性有什么作用?
转载自:http://www.itcast.cn/news/20200720/1814543451.shtmlkey的特殊attribute主要用在Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不使用key, Vue会使用一 种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用key时,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。有相同父元素的子元素必须有独特的key,重复的key会造成渲染错误。在截图中我们重点看红原创 2020-12-21 11:39:55 · 434 阅读 · 1 评论 -
vue 怎么实现seo
参考文章:https://www.cnblogs.com/yaphetsfang/articles/13154149.html前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SSR和静态化基于Nuxt.js来说。1.SSR服务器渲染; 2.静态化; 3.预渲染prerender-spa-plugin; 4.使用Phantomjs针对爬虫做处理。1.SSR服务器渲染关于服务器渲染:Vue官网介绍,对Vue版本有要求,原创 2020-12-17 09:54:03 · 941 阅读 · 1 评论 -
Vue中hash模式和history模式的区别
vue-router 中hash模式和history模式。在vue的路由配置中有mode选项,最直观的区别就是在hash模式下的地址栏里的URL夹杂着‘#’号 ,而history模式下没有。vue默认使用hash。mode:"hash";mode:"history";hashhash模式依靠的是onhashchange()事件去监听location.hash的改变。比如这个 URL:http://www.aaa.com/#/hello,hash 的值为 #/hello。它的特点在于:has原创 2020-12-16 18:19:39 · 1349 阅读 · 0 评论 -
uniapp h5 vue 全面屏刘海屏顶部适配
如图所示解决方案,在App.vue中全局设置<template> <!-- <div id="app" ref="homePage"> <router-view/> </div> --> <div id="app" v-cloak ref="homePage"> <!--缓存想要缓存的页面,实现后退不刷新--> <!--加上v-if的判断,可以自定义想要缓存的组件..原创 2020-09-01 15:40:55 · 4536 阅读 · 0 评论 -
vue 使用vant Uploader 文件上传
直接上代码data() { return { filePath: '', fileList: [], } },<van-uploader :after-read="onRead" accept="image/gif, image/jpeg, image/png" v-model="fileList" :max-count="1"></van-uploader> // 读取文件 onRea原创 2020-08-27 19:31:15 · 9010 阅读 · 2 评论 -
Nginx 如何 开启gzip 来提高页面加载速度
打开conf文件gzip on;gzip_min_length 1k;gzip_buffers 4 16k;#gzip_http_version 1.0;gzip_comp_level 2;gzip_types text/plain application/javascript application/x-javascript text/css application/xml...原创 2020-04-23 12:21:35 · 553 阅读 · 1 评论 -
vue-cli3项目npm run build --report不生成分析图
npm run build --report不行换npm run build -- --report原创 2020-04-23 11:49:15 · 1060 阅读 · 0 评论 -
vue-cli 3.0 build包太大导致首屏过长的解决方案
前言:最近用vue-cli 3.0 构建一个小型的工单管理系统,完工后build发现一个chunk-vendors包就达到985kb,加上其他一些资源文件,首页的下载总共大小快要2M。测试给的第一个反馈就是首屏慢慢慢慢慢!根据首屏加载资源文件过大,进行一下优化:1. 路由懒加载结合Vue的异步组件再结合webpack的代码分割,我们可以轻松的实现路由懒加载。vue-cli 3....原创 2020-04-23 11:28:49 · 385 阅读 · 0 评论 -
vue部署环境总结
1、proxyTable: { '/api': { target: 'http://192.162.31.133:8080', //本地电脑 // target: 'http://192.118.1.116:8080', //虚拟机 // target: 'http://106.112.3...原创 2018-08-08 00:58:32 · 279 阅读 · 0 评论 -
使用CryptoJS 实现简单的加密解密
文本加密var CryptoJS = require("crypto-js");// Encryptvar ciphertext = CryptoJS.AES.encrypt('my message', 'secret key 123');// Decryptvar bytes = CryptoJS.AES.decrypt(ciphertext.toString(), 'sec...原创 2018-07-27 20:29:58 · 6996 阅读 · 0 评论 -
vue常见控制台报错问题
vue常见报错不影响功能使用问题,常见控制台报错1、[Vue warn]: Missing required prop: "value" <Option value="all">不限</Option> option要加value原创 2018-07-30 17:07:03 · 2940 阅读 · 0 评论 -
跨域问题Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin
场景:前端跟后台联合开发的时候,在局域网内,浏览器访问别人的地址可以获取数据,但是通过接口请求,就会跨域解决方法:现在是vue项目,用axios请求,前端这边单独解决这个问题,不需要后端处理第一、找到config/index.js 设置proxyTable,实际上就是设置代理路径(PS:设置config文件之后,需要重新npm run dev)dev: { ...原创 2018-07-26 14:19:56 · 236795 阅读 · 14 评论 -
vue从父组件中获取数组,子组件input循环,绑定v-model的方法
通过绑定key值,如,searchConditionsData是父组件传递过来的数组,searchConditions: [{ name: '名称', type: 'text', model: 'eq-name', },]子组件绑定自身组件的model,通过condition.key ...原创 2018-07-17 20:50:23 · 6649 阅读 · 0 评论 -
vue 中router.go;router.push和router.replace的区别以及应用场景
router.go(n) n是int类型,意思是在 history 记录中向前或后退多少步,类似 window.history.go(n)router.push(location) 导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。router.replace(locat...原创 2018-07-17 16:31:33 · 2674 阅读 · 0 评论 -
vue中使用excel导入导出
原文地址: https://www.cnblogs.com/liguiwang/p/8430672.html感谢该大神的分享1、在vue中使用导入导出,需要下载3个依赖包和2个js包: 使用npm安装: npm install -S file-saver xlsx(这里其实安装了2个依赖) npm install -D script-loader或者使用yarn安装:...转载 2018-08-15 14:58:08 · 5082 阅读 · 1 评论 -
Vue调试神器vue-devtools安装
原文地址: https://segmentfault.com/a/1190000009682735前言vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。chrome商店直接安装vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了。不过...转载 2018-08-28 15:09:00 · 157 阅读 · 0 评论 -
vue部署到线上时,Loading chunk xxx failed 问题
如图所示,今天遇到了一个奇怪的问题,做了两套路由,超级管理员一套,普通管理员一套,从超管切到普管页面的时候,普管的权限页面怎么点击都是报Loading chunk xxx failed问题,而在本地没有这个问题,从网上的方法得知,将config / index.js的build的路径assetsPublicPath改为‘/’,就好了,而本地的是早就设置了‘/’,所以没有这个问题...原创 2018-09-26 19:40:07 · 46289 阅读 · 7 评论 -
index.html引入的css和js没有引号
vue build项目部署到线上之后,index.html文件一直报如下错误,仔细看后发现,是由于文件引入资源的时候,很多需要有引号的地方没有了,原来是打包出了问题在对vue-cli项目打包后出现index.html引入的css和js没有引号 即:<link href=/css/xxx.css rel=stylesheet>解决办法:找到webpack.prod.c...转载 2018-09-26 19:43:21 · 874 阅读 · 0 评论 -
font-awesome build之后丢失
项目在本地run情况下显示正常,在build后font-awesome的css文件依赖的几个图标文件引用路径报错。解决方法如下,在build > webpack.base.conf.js中的配置如下: { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', ...原创 2018-09-26 19:48:47 · 422 阅读 · 0 评论