vue
请叫我cqq
在此记录我的学习之路!!!
展开
-
WebSocket 原理
一、 什么是 WebSocketWebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接, 并进行双向数据传输。WebSocket 本质上一种计算机网络应用层的协议,用来弥补 http 协议在持久通信能力上的不足。原创 2022-03-28 18:31:40 · 1494 阅读 · 0 评论 -
vue中动态绑定class和style
自己做个小笔记 动态class对象:<div :class="{ 'is-active': true, 'red': isRed }"></div> 动态class数组:<div :class="['is-active', isRed ? 'red' : '' ]"></div> 动态style对象:<div :style="{ color: textColor, fontSize: '18px' }"></div> 动态sty原创 2021-12-21 09:52:37 · 242 阅读 · 0 评论 -
el-upload上传文件时,不触发onchange方法
el-upload上传文件时,只能上传一个文件,将limit设为1,结果出现第二次点击上传时不触发on-change方法,解决方法:在HTML中: <el-upload action="" ref="uploadFile" style="display: inline-block;" :show-file-list="false" :on-change="ChangeFile"原创 2021-11-19 16:34:03 · 6634 阅读 · 1 评论 -
过滤树形结构中不符合条件的值
// 过滤数据 filterTree(tree, arr = []) { if (!tree.length) return []; // 循环数组,然后过滤数据 for (let index = 0; index < tree.length; index++) { // 如果该条数据isDisplay不为true时,跳出本次循环 if (!tree[index].isDisp..原创 2021-11-01 16:07:28 · 383 阅读 · 0 评论 -
vue自定义指令
vue自定义指令在vue中我们常会使用到一些指令,例如 v-model 实现数据的双向绑定,使用 v-if 进行判断,还有 v-for、v-bind等等,这些都是vue框架自带的指令,简单便捷,具体使用请访问 Vue指令的使用方法。通常情况下我们使用vue自带指令已经足够,但是在某些情况下自定义指令不能够满足我们的需求,我们就可以自定义指令,以 “使input输入框自动获取焦点” 为例,方法如下:1、局部自定义指令<template> <div class="content>转载 2021-10-14 17:25:40 · 153 阅读 · 0 评论 -
vue实用技巧
1. 将一个 prop 限制在一个类型的列表中使用 prop 定义中的validator选项,可以将一个 prop 类型限制在一组特定的值中。exportdefault{name:'Image',props:{src:{type:String,},style:{type:String,validator:s=>['square','rounded'].includes(s)...原创 2021-08-09 17:46:48 · 438 阅读 · 0 评论 -
vue ui报错 Couldn‘t parse bundle asset “C:\Users\cqq\Desktop\vuex\vuex_demo\dist\js\chunk-vendors.js“.
1、 vue ui 运行编译项目时报错: Couldn't parse bundle asset 文件路径\\dist\js\chunk-vendors.js". Analyzer will use module sizes from stats file.2、怎么解决 网上查只有很少的相关文章,什么改版本之类的,具体情况具体分析,分享我遇到的情况。 在我的C:\Users\用户文件夹下的.vuerc里设置:"packageManager":"npm"{...原创 2021-07-17 21:24:25 · 4185 阅读 · 5 评论 -
Vue Router 技巧
1. 响应路由参数变化针对复用组件(只是路由参数发生改变),生命周期函数钩子不会被调用,如何能刷新组件了? watch监听 watch:{'$route'(to,from){//对路由变化作出响应...}} beforeRouteUpdate beforeRouteUpdate(to,from,next){//reacttoroutechanges...//don'tforgettocallnext()}...原创 2021-06-18 16:43:50 · 81 阅读 · 0 评论 -
vscode 自动生成vue模板
新建一个vue页面,需要自己手动创建一个vue的页面,自己写起来十分不方面,如何快捷生成一个vue模板呢1.打开vscode,在文件--》首选项--》用户片段中找到vue.json2.将vue.json中的内容替换成下面的内容{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>", " ", " </div>", "</t原创 2021-04-02 09:43:44 · 496 阅读 · 1 评论 -
vue+element 表单上传进度条
公司项目中用到了若依的框架,但是我们表单提交的时候需要展示提交进度(因为有大文件上传)为了解决这个问题,找了好多的资料,终于找到了最简单的方法在确认提交的方法中// 获取文件上传的进度let config = { onUploadProgress: progressEvent => { let complete = parseInt(progressEvent.loaded / progressEvent.total * 100) this.fi原创 2021-03-17 15:17:10 · 1312 阅读 · 0 评论 -
vue+element 表单提交
工作中我们经常会遇到表单提交,element中默认的文件上传是及时上传,很不方便,所以我们需要让上传的文件与表单的内容一起提交在表单浮层中<!-- 用户导入对话框 --><el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> <el-upload ref="upload" :limit="1" accept="原创 2021-03-17 15:04:23 · 1140 阅读 · 0 评论 -
element日期选择器
1.禁用今天以前的日期不可选html:<el-date-picker v-model="startDate" style="float:left;width:300px;" type="date" format="MM-dd" :picker-options="expireTimeOption" @change="startDateChange" value-format="yyyyMMdd" placeholder="选择开始原创 2021-03-16 09:32:49 · 92 阅读 · 0 评论 -
vue刷新视图
1. 用 Object.assign对象改变:oldObj = Object.assign({},newObj);原理:对象是引用类型,直接改变oldObj的某属性指向地址没变,vue不一定能监控到,所以当我们新建一个对象并赋值给oldObj字段的话,直接改变了它的指向地址。2. 用vue.set对象和数组都能用。this.$set(this,'oldObj',newObj);this.$set(this,'oldArray',newArray);例如要改变data中some:.原创 2021-03-15 17:15:09 · 1172 阅读 · 1 评论 -
element表格设置序号
1.在template中<el-table-column prop="index" label="序号" width="55" align="left"></el-table-column>2.在方法中 // 添加序号this.tableData.map((item, index) => { item.index = this.tableL...原创 2020-04-30 15:15:24 · 1680 阅读 · 0 评论 -
vue A对象赋值给B对象,修改B属性会影响到A问题
页面中有一个需要修改个人信息,但是vue里面的v-model是双向绑定,在我修改的时候,原始的引用该数据的地方也会随之更改,但其实这时候还未提交数据库,如果用户修改一半,点击取消,会存在页面修改过来,但是数据库没更新,刷新之后又恢复原来的值。思路:用一个中间对象过渡一下,所以命名一个新的对象,这个对象和原始的个人信息是一样的内容,只是名字不一样,但是我在赋值之后发现,修改中间对象的属性值,原始对象也会更改,原来是vue的对象赋值,this.A = this.B,没有进行深层赋值,只是把this.A的地址原创 2020-05-14 15:21:55 · 627 阅读 · 0 评论 -
vue项目常用依赖
做一个新的项目,只是靠初始化的vue肯定是不够的,那么我们就要使用到依赖包了,我就总结一下我常用到的依赖一、babel-polyfill 把ES6语法转换成IE浏览器能读取的ES5语法,通常用来兼容IE浏览器,防止出现白屏现象npm install --save-dev babel-polyfill安装好后可以直接在main.js文件中引入import 'babel-polyf...原创 2020-05-08 15:16:05 · 3126 阅读 · 0 评论 -
如何搭建一个vue项目
一、安装node环境 1、下载地址为:https://nodejs.org/en/ 2、检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3、为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ 输入:npm install -g cnpm –registry=https://registry.npm.taobao.or...原创 2020-05-08 13:42:26 · 231 阅读 · 1 评论