qq_41709082的博客

基于 vue-cropper 库 实现的 图片裁剪组件（含vue2.x/vue3.x/vue3.x+ts 写法）// 代码地址 https://gitee.com/zhong-wenkai/cropper-image-upload.git内含3个文件夹：cropper-image-upload2.x || cropper-image-upload3.x || cropper-image-upload3.x+ts说明：cropper-image-upload2.x 为 vue2.x 版本

带着问题看源码——为何vue中filters访问不了vue实例?前言：我们

实现虚拟滚动表格（无限滚动）背景：项目组中，原来使用的element UI 中的table组件当一页数据量多了之后页面渐显卡顿，不满足要求，所以就决定自己开发一个table组件，当然解决这个问题，不一定要自己开发一个table组件，可以有其他的现成的库直接用，或者可以用分段式（切片）加载的方式来解决这个问题。因为正好年底，时间稍微宽裕些，所以就打算自己开发一个，正好也能了解到整个table组件的实现方式。正文：代码我直接上传到gite上了，要使用或者想了解一下自己开发一个table组件的思路的可以自行p

vue删除Keep-alive缓存keep-alive简单介绍：我们项目中为了用户有更好的体验/页面性能，大多数地方都会使用到keep-alive，这个是vue提供的组件，它会将它的子组件进行数据缓存/行为缓存。大致原理就是当离开当前组件时，组件并不会被销毁，而是保存的了内存中，下次再次访问的时候，不会重新创建新的组件实例，直接从内存中通过特定的key取出缓存的组件实例，进行渲染。问题：**最近我们项目提了一个用户体验的需求，希望同一个页面有些场景有缓存，但是有些场景不希望缓存。**

$attrs 和 $listeners一、概念：$attrs: 包括组件 props 和 emits property 中未包含的所有属性 (例如，class、style、v-on 监听器等) ps: 官网原话其实就可以简单理解为：除了组件内props声名了的所有给组件传的值（class,style除外）这个属性有什么作用呢？当我们需要给多层嵌套父子组件传值，而且杂的时候，可以直接使用它，可以使代码看起来更加简洁。案例如下：// parent.vue<m-child :data-s

element-ui form表单嵌套校验记录一次使用 element-ui form 表单嵌套校验的需求数据结构： formData:{id:1,type:'test数据',input_info:[...]}上述formData 中的 input_info 数组就是我们需要渲染成表单的数据具体使用： <div class="form"> <el-form label-position="right" label-width="145px" ref

实现一个简易的 vue router1.vue-router 有2种模式 hash 与 history 模式，hash模式就是利用锚点的原理实现跳转（通过修改window.location.hash 值），而history 通过修改浏览器访问历史栈来实现（该模式需要后端支持）。2.由于History 需要后端支持，这里就不做实现，这里主要实现一下hash 模式路由。// 这里先引入 vue 库的 cdn <script crossorigin="anonymous" integrity="sh

vue-自定义指令1.简单记录一下 vue-自定义指令的使用方法// html 部分<div id="app"> <h3>vue directive</h3> <div> <p> <input type="text" v-focus v-model="info" /> </p> ...

手动实现vue数据双向绑定1.看了vue 数据双向绑定的源码决定 根据自己的理解 实现一个简单版的 vue双向绑定首先根据用法 new Vue({…}) 可以知道 vue 构造函数接收一个 对象参数class Vue { constructor(options){ }}其次 数据双向绑定的原理 是使用了观察者模式 和 Object.defineProper...

element-ui 自定义弹窗 进入退出动画效果1.在全局样式 文件中加入下述代码即可//弹窗自定义 动画.el-dialog__wrapper { transition-duration: 0.8s; }.dialog-fade-enter-active{ animation: none !important;}.dialog-fade-leave-active {...

自定义element-ui loading 加载动画1.直接在全局样式文件中修改://index.scss 我这里是 index.scss 文件//自定义 加载动画.el-loading-spinner { background-image:url('../assets/loading_images/loading.gif'); // 这个是自己想设置的 gif 加载动...

vue-router 路由生命周期（路由守卫）1.全局&路由 使用beforeEach((to,from,next)=>{…})发生路由 跳转时 立即执行router.beforeEach((to,from,next)=>{ console.log('跳转到',to); console.log('来源',from); console.log('全局前置路...

Vue使用 Echarts1.安装 echarts 插件npm install echarts -save2.在main.js 引入 echartsimport Vue from 'vue'import App from './App'import router from './router'import echarts from 'echarts'Vue.config.pr...

Vue项目中添加 页面 标签页 的 小图标1.找到 build 文件夹中的 webpack.prod.conf.js文件// webpack.prod.conf.js...//找到 这 一配置项new HtmlWebpackPlugin({ ...});添加 favicon 属性2.找到 build 文件夹 内的 webpack.dev.conf.js 文件// webp...

当需要给一个组件的根元素添加事件的时候会出现添加事件不成功的现象解决方法。1.此时可以给事件添加上.native修饰符如下：&lt;mycomponent @click.native="event" /&gt;2.注意如果给普通HTML元素绑定事件的时候也加上.native则会出现绑定不上的现象。...

Vue中ref属性使用的注意事项1.在vue中为HTML标签设置ref属性，主要是为了一些需要进行操作DOM才能完成的功能而设置的。2.ref属性相当于给标签设置了一个ID，可以使用该特殊标识来进行一些DOM的操作，但是使用的时候有如下几个注意事项：ref属性值绑定元素都是唯一的，如果一个ref属性绑定了多个dom节点，那么这个ref属性将会默认绑定到最后设置该ref属性值的DOM节点。...

Vue-router路由1.首先需要先引入vue-router，使用npm直接安装即可下面是使用方法： let componentA={ template:'#Home', data(){ return { msg:'主页', arr:['javaScript','Html','Css','jquery'] } } ...

Vue生命周期先看一张vue官网的生命周期阶段图：1.Vue的生命周期在2.0版本分为了8个阶段，如下：beforeCreate: 组件实例刚刚被创建，但是data属性等还未初始化created: 组件实例创建完成，data属性初试化完成，此时可以访问data内的数据。但是el属性还未初始化。beforeMount: 组件模板编译/挂载前，el初始化完成，DOM还未生成。...

Vue解决浏览器闪烁问题:1.使用v-cloak指令：&lt;h1 v-cloak&gt;{{message}}&lt;/h1&gt;//同时style内需要设置具有 v-cloak属性的元素display为none&lt;style&gt; [v-cloak] { display:none;}&lt;/style&gt;2.使用v-text指令：当只需要渲染文本时(非DO...

Vue实例方法-$set与 $delete1.$set()方法：作用：用于为对象添加新属性，也能触发DOM的更新。使用格式：this.$set(需要添加属性的对象,属性名,属性值)；//与直接为对象新属性赋值 this.obj.属性名=value 的区别：直接为对象新属性赋值，新属性如果再被修改并不会触发DOM的更新。这里的原理其实是因为vue实例内只有挂载前data拥有的数据才会...

ref属性的使用1.在react,Vue中均可以使用ref属性来操作DOM在Vue中的使用：html &lt;p ref='p'&gt;我是测试段落2&lt;/p&gt; &lt;input type="text" ref="input"/&gt; &lt;button @click="foucs"&gt;click me 输入框获得焦点&lt;/

Vue-cli脚手架的搭建1.随着vue.js越来越火爆，更多的项目都用到vue进行开发，在实际的开发项目中如何搭建开发脚手架呢，今天跟大家分享一下：首先需要了解的知识HtmlCssJavascriptNode.js 环境（npm包管理工具）Webpack 自动化构建工具首先需要安装node.js环境：直接在官网下载即可安装完node.js环境之后就可以，使用npm 命令进行插件...

Vue-lazyload插件实现懒加载一. 插件的下载：利用npm下载安装到项目中npm install vue-lazyload --save-dev二.插件的注册，及属性的配置。接下来只需要，在项目的入口文件 main.js 中进行相关的属性配置和注册即可。import VueLazyLoad from 'vue-lazyload'; //项目中引入v...

Vue项目中加载图片时，遇到的坑1.当直接在标签中，使用图片路径，此时可以正常显示。&lt;img src='img_src' /&gt;正常显示2.当img标签的src属性为变量时，且该变量的值是来自vue实例的data属性中，则此时会出现，图片无法显示的问题。如下代码&lt;img v-for='(item,index) in imgArr' :key='index'...

Vue项目中Element UI的使用1.Element UI下载及项目中的配置：(1).安装npm install element-ui --save(2).项目中引入，及配置。在 项目的入口文件 main.js 中import ElementUI from 'element-ui'//特别注意的是样式需要单独引入import 'element-ui/...

Vue项目打包1.通过git 输入如下命令:npm run build运行打包命令：注意 build 并不是固定写法，若想修改，可以自行在package.json文件中修改。运行打包命令成功后，就会生成一个dist文件夹，直接将该文件丢到需要服务器即可上线。注意：打包时，在项目的index.js(入口文件)文件中，axios的默认URL需要改成服务器的地址。2.如果想在自己电脑...

Vue-动画效果1.vue中动画效果可以手写也可以通过插件实现，下面介绍一下两种方式的使用。(1).手写手写，需要自己写好样式v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，...

Vue项目通过本地ip访问1.修改package.json文件：将：“dev”: “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”,替换成：“dev”: “webpack-dev-server --open --hot --host 0.0.0.0 --inline --progress ...

Vue项目中-axios设置默认请求地址和请求头1.导入axiosimport axios from 'axios'2.设置默认请求地址axios.defaults.baseURL='你的请求地址'3.为post请求设置默认请求头axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'...

Vue-中若元素属性需要绑定的值为数字时的处理1.如果直接这样写：&lt;select v-model='value'&gt; &lt;option value='数字'&gt;...&lt;/option&gt;&lt;/select&gt;这时vue并不会把你写入的数字，解析成数字而是解析成字符串，即使是你写到data中一个变量为数字，再使用。都是如此。2.解决：如果属...

ElementUI中Switch控件属性值为Number时报错问题1.使用element-ui中switch控件时，如果为该控件属性值赋值为数字时，这时浏览器会报错，但是还是能正常显示效果，为了解除这个报错，我们可以将该控件属性值为数字的属性改为单向绑定：如下 &lt;el-switch v-model="value" :width='100' &gt; w...

Vue-slot插槽1.当你想从父组件传入DOM节点到子组件中展示时，此时就可以在子组件中定义插槽来进行接收父组件传入的DOM节点，插槽就相当于一个占位符，当父组件并没有传入DOM节点时，此时slot插槽并不会被渲染。传入DOM节点之后便会将传入的DOM节点显示在插槽所在的位置。slot插槽的分类：匿名插槽：//子组件a&amp;lt;template id=&quot;my-a&quot;&amp;gt; &amp;lt...