学习记录

最近修改公司模版，富文本内可以插入表格，选择了几款，最终确定使用quill+quill-better-table,研究了一下。quill 2.0版本的表格功能比较弱，故所需要quill-better-table插件的协助来完成改需要。quill-better-table官网文档：前言 · Quill官方中文文档 · 看云安装 npm installquill^2.0.0-dev.3 版本需要大于2.0版本 npm install quill-better-table ..

权限分为后端权限和前端权限后端权限 权限的核心在于服务器中数据的变化，后端才是权限的关键，后端权限通过控制某个用户是否能查询数据，是否能够修改数据等操作前端权限 前端权限本质上就是 控制视图层的展示和前端发送的请求。前端权限的意义：降低非法操作的可能性，尽可能排除不必要的请求，提高用户体验 前端权限的控制思路：1. 菜单的控制 （侧边栏 登陆成功后会拿到权限数据，前端根据权限数据，点击对应的菜单。点击菜单才能看到界面 ）2. 界面的控制 （ 如果用户没有登...

https://github.com/jingjing9061/microFont随后

1.将声明的值使用 要使用ref(参数)变为响应式// ref 将原始类型转为响应式 如布尔、字符串、数值类型let num = ref(value:21)console.log(num.value)若声明对象类型 对象自带响应式let user = reactive(target:{name:’s’,//age:12，age: num，//可以将上面变量引入到此 就不用.value值了})使用的数据、方法返回出去才能使用return {...

对于vue项目，我们使用axiso来发送请求，如果传递二进制图片时出现乱码，这个是什么问题？答：axios 默认返回的是 json 文本形式，二进制图片数据被强制转换成了 json 文本形式。解决方案：我们在 axios 里面，responseType 默认返回数据类型是 json，将其改为返回数据类型 blob。export function miniprogramQrcode (params) { return axios.post( env.MI_URL + '/XXXX

参考来源：(https://www.jianshu.com/p/e1b01cdc2def) vueCLI:(https://cli.vuejs.org/zh/config/#pages)多页面，不能共享vuex，状态共享只能传统方式：storage，cookie，URL querystring传值在vue.config.js中添加 pages: { index: { // page 的入口 entry: 'src/pages/index/main.js',

前言组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、$emit/$on、vuex、$parent/$children、$attrs/$listen...

需求： 列表的层级是不定的！常用的情况是，级联选择器，和树形控件。递归组件：指组件在模版中调用自己，开启递归的条件就是组件中设置name选项。组件list递归组件: 父级无论多少数据，都可以完美自适应加载<template> <div class="boxwrapper"> <div class="list-item" v-for="(item,index) in list" :key="index"> <div clas...

方法一<router-link :to="{path: '/跳转的页面路由'}" target="_blank" tag="a">tag="a" 可以省去不写，默认也会解释为a标签"tag" 属 性 ：具有 tag 属性的 router-link 会被渲染成相应的标签方法二const {href} = this.$router.resolve({ name: "fireAlarmLocation",//这里是跳转页面的name ...

问题：添加和编辑页面使用路由跳转的方式切换，但是切换到添加页面后，添加功能所在页面对应的侧边栏不会高亮显示。解决方法：route 的 index.js 中给需要改变高亮的路由（添加和编辑页面）增加guidePath和jumpPath字段，guidePath：就是一个状态变量，这里可以表示当前路由高亮指向不是本身jumpPath：表示高亮指向的路由。在侧边栏el-...

前言Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。示例以这样一个列表为例：<ul><li>1</li><li>2</li></ul>那么它的vnode也就是虚拟 dom 节点大概是这样的。{...

因为是文件流下载，所以在取后台数据的时候，要多传递一个【responseType: ‘blob’】这个参数后端返回的文件流：代码如下： reportTable(val) { this.$axios.service({ method: "post", url: '/test/downloadZip', dat...

说到父子组件的通信，大家一定都不陌生了：父组件通过props向子组件传值，子组件通过emit触发父组件自定义事件。但是这里要说的是父子组件使用v-model实现的通信。相信大家在使用别人的组件库的时候，经常是通过v-model来控制一个组件显示隐藏的效果等，例如弹窗。下面就一步一步解开v-model的神秘面纱。抓~~稳~~喽~~，老司机弯道要踩油门了~~~提到v-model首先想到的就是我们对...

例如商品列表页面前往商品详情页面，需要传一个商品id;<router-link :to="{path: 'detail', query: {id: 1}}">前往detail页面</router-link>复制代码c页面的路径为http://localhost:8080/#/detail?id=1，可以看到传了一个参数id=1，并且就算刷新页面id也还...

v-for里面数据层次太多， 修改过数据变了，页面没有重新渲染，需手动强制刷新。解决方法：运用this.$forceUpdate()强制刷新官网解说如下https://cn.vuejs.org/v2/api/#vm-forceUpdate迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。...

<el-table :data="tableData" style="width: 100%"> <el-table-column v-for="col in cols" :prop="col.prop" :label="col.label" > </el-table-column></el-table><el...

#####对象方法-最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染）:class="{ 'active': isActive }"判断是否绑定一个active:class="{'active':isActive==-1}" 或者:class="{'active':isActive==index}"绑定并判断多个第一种（用逗号隔开）:class="{...

 背景业务需求是这样子的，每当发请求到后端时就触发一个全屏的 loading，多个请求合并为一次 loading。现在项目中用的是 vue 、axios、element等，所以文章主要是讲如果使用 axios 和 element 实现这个功能。分析首先，请求开始的时候开始 loading， 然后在请求返回后结束 loading。重点就是要拦截请求和响应。然后，要解决多个请求合并...

整理webpack有一个compression-webpack-plugin插件，可以打包成gzip格式部署到服务器，了解到了GZIP，其实GZIP有很多点，这里我们只讨论前端范围内GZIP的应用。什么是GZIP ？GZIP是网站压缩加速的一种技术，GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNIX系统的文件压缩。我们在Linux中经常会用到后缀为....

vue.runtime.esm.js?ff9b:587 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the com...

来源关于mapState，官方文档的说法：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键： mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但...

1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符）2，等同于在自组件中：   子组件内部处理click事件然后向外发送click事件：$emit("click".fn)...

 ——————– 如上图所示：需要完成的功能是点击更改头像，获取本地文件库，选择图片后将原始图片替换。这里我就直接用html文件引入vue来简单实现在这功能，代码如下： HTML：&lt;div id="app"&gt; &lt;div class="item_bock head_p"&gt; &lt;div class="head_img"&gt; &l

第二次进入页面，页面路由参数已经改变，但是页面内容不会刷新。问题原因：在组件mounted钩子中调用的刷新页面内容，但测试发现这个钩子没有被调用。后来发现App.vue中使用了&lt;keep-alive&gt;：&lt;template&gt; &lt;div id="app"&gt; &lt;keep-alive&gt; &lt;router-view&gt;...

如果服务端将参数当做 java对象来封装接收则 参数格式为：{data: param} 1 2 3 4 5 var param={name:'jack',age:20} axios           .delete("/ehrReferralObjPro", {data: param})           ...

http-proxy-middleware用于把请求代理转发到其他服务器的中间件。简介例如：我们当前主机为http://localhost:3000/，现在我们有一个需求，如果我们请求/api，我们不希望由3000来处理这个请求，而希望由另一台服务器来处理这个请求怎么办？var express = require('express');var proxy = require('...

来源 场景. webpack2.4.*集成vue-loader@15.2.4报错1vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.分析. 参考官方文档 https://vue-load...

 前言在vue项目中，使用vue-awesome-swiper实现轮播业务。安装的vue-awesome-swiper是最新版本的，基于swiper4的实现。问题在最新的swiper中，swiper绑定的事件中，是通过this指向当前swiper对象的。而在事件回调中，我们需要获取vue页面data中的数据。但是此时的this并不指向vue对象。解决&lt;swiper ...

来源由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西，开发过程中需要改动到build和config里面一些相关的配置，所以刚好趁此机会将所有配置文件看一遍，理一理思路，也便于以后修改配置的时候不会“太折腾”。一、文件结构本文主要分析开发（dev）和构建（build）两个过程涉及到的文件，故下面文件结构仅列出相应的内容。 1 2 3 ...

Vue打包后出现一些map文件的解决办法：问题： 可能很多人在做vue项目打包，打包之后js中，会自动生成一些map文件，那我们怎么把它去掉不要呢？1，运行  cnpm run build  开始打包2，会在项目目录下自动创建dist目录，打包好的文件都在其中解决办法：去src/config/index.js中改一个参数：productionSourceMap:false把...

 bug说明：Mint-ui中loadmore(上拉加载下拉刷新)组件 在 使用fastclick的情况下，在ios设备中滑动会触发点击事件； 解决方法：我是按需引入，去项目中找到loadmore下的index.js，全部引入的要找mint下面mint-ui.common.js路径如下：你的项目名/node_modules\mint-ui\lib\loadmore\in...

请说出vue-cli工程中每个文件夹和文件的用处注意：此问题千万不要只解释一下 src 文件夹下每个文件夹的作用。vue-cli目录结构：vue-cli目录解析：build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。 config ...

在webpack中有时需要使用hash来做静态资源实现增量更新方案之一，文件名的hash值可以有三种hash生成方式，每一种都有不同应用场景，那么三者有何区别呢？hash、chunkhash、contenthashhash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容发生改变的话，那么对应文件hash值也会改变，对应的HTML引用...

 一、路由模式解析　　要讲vue-router的路由模式，首先要了解的一点就是路由是由多个URL组成的，使用不同的URL可以相应的导航到不同的位置。　　如果有进行过服务器开发或者对http协议有所了解就会知道，浏览器中对页面的访问是无状态的，所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和vue-router开发就会明白，在切换页面时是没有重新进行请求的，使用起来就好像页...

&lt;keep-alive&gt;是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。&lt;keep-alive&gt; 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 &lt;transition&gt; 相似，&lt;keep-alive&gt; 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。prop:inc...

:default-active="onRoutes"   绑定符号 ：一定要添加上    &lt;el-menu class="sidebar-el-menu" :default-active="$route.path" :collapse="collapse" background-color="#324157"            text-color="#bfcbd9&quo

view 部分&lt;template&gt; &lt;div id="app"&gt; &lt;table id="cartTable"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;&lt;label&gt;&lt;input cl