![](https://img-blog.csdnimg.cn/20210309172614939.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js
文章平均质量分 59
Vue
呆萌宝儿姐
CSDN专家博主、阿里云开发者社区专家博主、51CTO社区专家博主、360书馆认证博主、知乎掘金B站等平台受邀作者。
如遇开发、程序等需求,博客首页下拉加入公众号,私信博主
展开
-
Vue.js过滤器
文章目录过滤器定义与调用小案例:私有过滤器全局过滤器过滤器概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;定义与调用过滤器定义时候的格式Vue.filter('过滤器的名称', function (参数1, 参数2, ...) { ... })过滤器调用时候的格式{{ name | 过滤器的名称 }} 小案例:原创 2022-07-21 09:14:58 · 1355 阅读 · 0 评论 -
Vue 生命周期钩子解读
例如。原创 2022-07-21 09:12:18 · 1895 阅读 · 0 评论 -
在网页中打开展示pdf文件
1、点击PDF文件链接点击PDF文件链接在新的页面打开pdf文件(将PDF文件放在和HTML文件同等目录下):<a href="Test.pdf" target="_blank">PDF<a>如果将PDF文件改为Docx文件,那么点击之后就是下载页面,不会像PDF文件那样在新页面展示内容‘;如果将PDF文件改为图片文件,那么点击之后就是在新页面展示图片;如果将PDF文件改为一个文件夹,那么打开就是整个目录,且可以访问其内容,类似FTP服务2、通过的浏览器<emb原创 2022-07-07 14:42:27 · 4678 阅读 · 0 评论 -
element-ui中下拉command传递多参数事件封装
文章目录问题产生解决办法:效果图:vuejs问题产生command事件中默认传递一个参数,即你每个下拉选项el-dropdown-item中设定的command的值,怎么样传递多个参数呢?我的项目中el-dropdown在一个遍历循环中,需要将index角标将参数传给@command="handleCommand"事件中。解决办法:动态设置每个el-dropdown-item中command的值效果图:效果:下拉框选中后,el-dropdown-link显示选中的信息,并且弹一下消息,内容为选原创 2022-05-15 15:07:12 · 2680 阅读 · 0 评论 -
VScode使用element-ui插件准备
文章目录插件1、Chinese(Simplified) Language Pack for Visual Stidio Code 中文汉化包2、Auto Close Tag 自动闭合标签3、Auto Rename Tag 尾部闭合标签同步修改4、Bracket Pair Colorizer 用不同颜色高亮显示匹配的括号5、Highlight Matching Tag 高亮显示匹配标签6、Vscode-element-helper7、live server Vscode-热更新插件8、Browser Prev原创 2022-05-16 16:37:10 · 14622 阅读 · 2 评论 -
JavaScript获取当前日期时间及其它扩展操作(代码实现)
文章目录Js 获取当前日期时间及其它操作实现代码拓展Data对象代码如下:Js 获取当前日期时间及其它操作实现代码function Thistime() { //当前日期 var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var mytime=date.toLocaleTimeString(); //获原创 2022-05-31 23:44:25 · 2601 阅读 · 0 评论 -
浏览器禁止缓存讲解
浏览器缓存(Browser Caching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览。浏览器缓存主要有两类:缓存协商:Last-modified ,Etag 和彻底缓存:cache-control,Expires。在浏览网页过程中网站开发人员为了给用户带来更佳的浏览体验,使网站加载快速高效往往会在浏览器本地也就是设备上面存储缓存文件,因为网站或者web应用并不是实时大量内容的更新的,而是原创 2022-06-09 10:31:29 · 6816 阅读 · 0 评论 -
在网页中打开展示pdf文件
1、点击PDF文件链接点击PDF文件链接在新的页面打开pdf文件(将PDF文件放在和HTML文件同等目录下):<a href="Test.pdf" target="_blank">PDF<a>如果将PDF文件改为Docx文件,那么点击之后就是下载页面,不会像PDF文件那样在新页面展示内容‘;如果将PDF文件改为图片文件,那么点击之后就是在新页面展示图片;如果将PDF文件改为一个文件夹,那么打开就是整个目录,且可以访问其内容,类似FTP服务2、通过的浏览器<emb原创 2022-05-27 14:10:29 · 4454 阅读 · 0 评论 -
JavaScript中清空数组最有效的三种方法
文章目录1、用“length”清除2、用“splice”清除3、用“[]”清除1、用“length”清除用length方法可以很轻松地清空数组,代码示例:var arr = [1,2,3];1console.log(arr);arr.length = 0;console.log(arr);123结果如下:2、用“splice”清除splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目var arr = [1,2,3];console.log(arr);arr.原创 2022-05-31 18:30:51 · 17613 阅读 · 4 评论 -
wangEditor富文本编辑器安装与入门
文章目录官网安装#npm#CDN使用官网https://www.wangeditor.com/v5/安装包括 vue React 组件#npm安装 editoryarn add @wangeditor/editor# 或者 npm install @wangeditor/editor --save安装 React 组件yarn add @wangeditor/editor-for-react# 或者 npm install @wangeditor/editor-for-react -原创 2022-05-31 20:33:03 · 2437 阅读 · 0 评论 -
vue抗遗忘的基本安装操作,哎
npm install -g @vue/clivue --versionvue create coulddiskcd coulddisknpm server run出现这个页面关闭eslintmodule.export = { lintOnSave: false安装iviewnpm install view-design --save切换淘宝镜像:npm config set registry https://registry.npm.taobao.orgnpm i原创 2022-05-16 16:56:22 · 1398 阅读 · 0 评论 -
Vue3-修改端口号
在图形界面中更改参数方法三在运行项目的时候追加端口号方法四在根目录下新建一个vue.config.js文件(和package.json同一目录) ,内容如下方法五端口文件存放目录为:node_modules/@vue/cli-service/lib/commands/serve.js优先级:方法一>方法二=方法三>方法四>方法五如果方法二和方法三同时使用,且端口号设置不同,就会报错...原创 2022-06-17 19:27:59 · 3576 阅读 · 2 评论 -
vue项目axios的使用实例详解
1、 基本用法首先要在 main.js 中引⼊ axios首先要在 main.js 中引⼊ axios首先要在 main.js 中引⼊ axios(重要的事情说三遍!!!)然后才能在组件中使⽤ axios2、 axios实例2.1、 创建axios实例示例代码在配置文件(axios.js)中配置在其他文件引入包后也可以同时创建多个axios实例。也可以全部配置2.3、 axios实例配置示例代码也可以不用配置,现用现创建现配置2.4、 axios请求配置示例代码还可以直接在请求中原创 2022-06-26 09:54:01 · 7195 阅读 · 1 评论 -
如何在 Vue 中导出数据至 Excel 表格
更多使用参考npm:https://www.npmjs.com/package/xlsx我们先来安装 xlsx 库 ,它是用来实现前端对 Excel 的解析:当用户点击「导出至 Excel」按钮时,我们执行一个函数将 JSON 数据转化为 Excel 并下载到本地。...原创 2022-07-07 15:20:49 · 1764 阅读 · 0 评论 -
Vue:路由传参的三种方式
【vue】vue路由传参的三种方式vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转。传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式。params 传参(显示参数)又可分为 声明式 和 编程式 两种方式该方式是通过 router-link 组件的 to 属性实现,该方法的参数可以是一个字符串路径,或者一个描述地址的对象。使用该方式传值的时候,需要子路由提前配置好参数,例转载 2022-06-26 18:07:40 · 8185 阅读 · 0 评论 -
Vue:Uncaught TypeError Object(...) is not a function at resetStoreState (vuex.esm-browser.js55021
原因:Vue 2.x和Vuex 4.x版本不对应Vue 3 匹配Vuex 4 ,Vue 2 匹配Vuex 3问题浏览器控制台报错Uncaught TypeError: Object(…) is not a functionat resetStoreState (vuex.esm-browser.js5502:140:1)at new Store (vuex.esm-browser.js5502:932:1)at eval (index.js4360:48:1)at Module…/src/s原创 2022-05-25 10:42:04 · 1955 阅读 · 0 评论 -
Vue报错:This dependency was not found: vuex in ./node_modules/babel-loader/lib
报错This dependency was not found:* /components/Lianxi.vue in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vueTo install it, you can run: npm install --save /components/Lianxi.vue原因&解决原创 2022-05-25 10:48:08 · 3105 阅读 · 0 评论 -
Vue 安装 element-ui时报错 code ERESOLVE unable to resolve dependency tree
文章目录报错原因原命令解决1、规避报错2、降低版本报错原因检查当前版本是否为 npm 8.x,8.x对树依赖检查比7.x都严格,需要在命令后增加–legacy-peer-deps以规避此报错,在安装其他依赖时如果报错类似也可如此解决,当然也可以将npm降级到6.x甚至更低在NPM v7中,现在默认安装peerDependencies。在很多情况下,这会导致版本冲突,从而中断安装过程。–legacy-peer-deps标志是在v7中引入的,目的是绕过peerDependency自动安装;它告诉原创 2022-05-16 16:53:26 · 2574 阅读 · 0 评论 -
学vue前你需要知道的:vue生态圈
文章目录前言Vue.jsVueAngularReactVuexVue RouterDevtoolsvue-cliimgView UI(iView)前言我说的是2022年的vue生态,没准过一年两年的vue又搞出新的花样了,建议大家与时俱进,多关注官网,世面上的vue文章本来就少,vue更新的又快,so很多文章淘汰的也快了,如果你是2022年入手vue的,建议找最新的教程或者直接官网(搞的我现在都不敢看教程了,也不知道讲的那技术用不用,流不流行还,吐了)我记得我第一次搞vue,vue还是最初版本,后来出原创 2022-03-27 20:34:40 · 9742 阅读 · 0 评论 -
vue 部署项目,访问页面空白,找不到js或css文件 (net::ERR_ABORTED 404 (Not Found))
问题在本地部署之后访问完全没有问题部署到阿里云服务器上,再访问页面出现空白页(也不是404),控制台给我打印没有这几个文件原因你的项目没有部署到你写的 publicPath 下,但是你是不知道的,那么publicPath 改为站点域名的根路径下就可以了解决在vue.config.js (vue-cli3以上)是 publicPath 配置的原因配置成publicPath: './'或者publicPath: ''更详细的配置可以查看:https://cli.vuejs.org/原创 2022-03-26 23:06:40 · 6435 阅读 · 0 评论 -
vue项目访问路径#号的问题
是vue项目启动之后,输入http://ip:port,我发现浏览器里面显示的地址栏竟然是http://ip:port/#/,这个”/#/“不知道是什么东西,于是百度查了一下。原因:对于vue开发的单页面应用,我们在切换不同的页面的时候,可以发现html永远只有一个,这也正是称之为单页面的原因。而vue-router默认hash模式--------使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载。因为对于正常的页面来说,更换url一定是会导致页面更换的,而只有更换url中的原创 2022-03-24 22:14:46 · 6040 阅读 · 0 评论 -
Vue3如何关闭eslint:error Expected indentation of 0 spaces but found 4 indent
eslint太坑了!!!!报错 6:1 error Expected indentation of 0 spaces but found 4 indent 7:1 error Expected indentation of 0 spaces but found 4 indent 8:1 error Expected indentation of 0 spaces but found 4原创 2022-03-24 20:31:33 · 2992 阅读 · 2 评论 -
vue 中的 const {XXX } =this 的含义
一个容易忘的知识点,我们看下面例子就清楚了:例子例1:const { xxx } = this.state;上面的写法是es6的写法,其实就相当于:const xxx = this.state.xxx例2: const { ctx,app,service } = this上面的这句话是一个简写,最终的含义相当于const ctx= this.ctxconst app= this.appconst service = this.service ...原创 2022-02-06 14:58:06 · 3385 阅读 · 0 评论 -
解决:‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
解决使用下面的命令安装vue后npm install -g @vue/cli出现找不到 vue-cli-service 命令的情况清理 node_modules 重新安装,试了不管用,最后直接使用下面的命令安装vue-cli-service解决了。npm install -g @vue/cli-service...原创 2022-02-04 21:41:18 · 38471 阅读 · 2 评论 -
vscode中通过快捷键`vh`将vue初始化代码结构自动输出
通过快捷键vh将vue结构快速输出,类似!将html结构快速输出一样如下图示例打上vh摁下tab就能快捷输入html框架设置方法:vscode中左下角-设置-用户代码片段-html.json打开html.json后将下面代码复制在最外层的{}里面即可(如果不生效的话重启vscode) "Print to Vue&html base code": { "prefix": "vh", "body": [ "<!DOCTYPE h原创 2021-08-16 11:04:36 · 3141 阅读 · 0 评论 -
Vue调试工具 vue-devtools 的安装步骤和使用
方法1:翻墙下载Vue.js devtools - 翻墙安装方式 方法二:导入插件包给大家准备了百度网盘链接链接:https://pan.baidu.com/s/1Ss4ZplUsevQiO_yunHhSfg提取码:dl28使用摁F12 选择vue栏即可原创 2021-03-10 12:53:27 · 4949 阅读 · 0 评论 -
Vue列表操作实战——品牌管理系统(v1.0基础版)
展示(视频中有个删除不了的bug,代码已经改正,视频没录未更新)讲解根据条件筛选品牌search 过滤方法中,使用 数组的 filter 方法进行过滤:search(name) { return this.list.filter(x => { return x.name.indexOf(name) != -1; });}全部代码<!DOCTYPE html><html lang="en"><head> <met原创 2021-03-10 12:35:47 · 5214 阅读 · 0 评论 -
Vue指令之事件修饰符
Vue指令事件修饰符事件修饰符.stop 阻止冒泡.prevent 阻止默认事件.capture 添加事件侦听器时使用事件捕获模式.self 只当事件在该元素本身(比如不是子元素)触发时触发回调.once 事件只触发一次事件修饰符使用案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-03-09 20:33:51 · 4892 阅读 · 0 评论 -
Vue指令 v-model实现 双向数据绑定
Vue指令之v-model实现双向数据绑定v-bind 只能实现数据的单向绑定,从 M(Modle) 自动绑定到 V(View), 无法实现数据的双向绑定使用 v-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定注意: v-model 只能运用在 表单元素中双向数据绑定案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta原创 2021-03-09 20:32:12 · 4991 阅读 · 1 评论 -
Vue指令 v-for和key属性
文章目录Vue指令之v-for和key属性1. 迭代数组案例:循环遍历普通数组案例 :循环遍历对象数组2. 迭代对象中的属性案例:遍历对象中属性3. 迭代数字案例:迭代数字输出4.for循环中key属性的使用Vue指令之v-for和key属性1. 迭代数组<ul> <li v-for="(item, i) in list">索引:{{i}} 姓名:{{item.name}} 年龄:{{item.age}} </li></ul>案例:循环遍历普通原创 2021-03-09 20:31:32 · 5547 阅读 · 1 评论 -
Vue指令 v-if 和 v-show
文章目录Vue指令之`v-if`和`v-show``v-if`和`v-show`特点`v-if`和`v-show`使用案例Vue指令之v-if和v-show一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。v-if和v-show特点v-if 的特点:每次都会重新删除或创建元素有较高的切换性能消耗(如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if)v-s原创 2021-03-09 20:30:36 · 4839 阅读 · 1 评论 -
Vue指令学习文档
文章目录Vue指令插值表达式Vue基本指令Vue指令之`v-bind`的三种用法Vue指令使用综合案例Vue指令之`v-on`和`跑马灯效果`跑马灯效果跑马灯完整代码Vue指令之`v-on的缩写`和`事件修饰符`事件修饰符:Vue指令之`v-model`实现`双向数据绑定`双向数据绑定案例Vue指令之`v-for`和`key`属性1. 迭代数组案例:循环遍历普通数组案例 :循环遍历对象数组2. 迭代对象中的属性案例:遍历对象中属性3. 迭代数字案例:迭代数字输出4.for循环中key的使用Vue指令之`v-原创 2021-03-09 17:48:26 · 4084 阅读 · 1 评论 -
Vue中使用样式(class与内联样式)
文章目录在Vue中使用样式使用class样式class样式案例:使用内联样式内联样式案例在Vue中使用样式使用class样式数组<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>数组中使用三元表达式<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>数组中嵌套对象<h1 :class="['red', 'thi原创 2021-03-09 17:34:10 · 4531 阅读 · 1 评论 -
Vue实现简易计算器
文章目录简易计算器案例1. HTML 代码结构2. Vue实例代码:3. 全部代码简易计算器案例1. HTML 代码结构 <div id="app"> <input type="text" v-model="n1"> <select v-model="opt"> <option value="+">+</option> <option value="-">-</option>原创 2021-03-09 17:32:29 · 5291 阅读 · 1 评论