weixin_44514665的博客

安装npm install element-plus --save使用main.js文件移入:Element-Ui 组件的按需引入可以阅读Element的官方文档Vue3中文文档

参考:vue的常见问题关于vue的面试当vue中使用 v-for 更新已经渲染过的元素列表时,默认用"就地复用"策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用为了给Vue 一个提示,以便它能跟踪每个节点的身份,进行重用和重新排序现有元素,需要为每项提供一个唯一 key 属性。key 属性主要用于Vue的虚拟算法。在对节点进行diff的过程中,判断新旧nodes是否为相同节点的一

场景： 根据用户配置的事件动态绑定。也就是用户可以动态选择配置 click ，change，blur等事件需要根据用户的配置的事件动态绑定 @click、@change或@bulr实际操作代码如下：<template> <div> <el-input v-for="(item,index) in list" :key="index" v-on:[item.event]="item.eventName"></e

问题：开始没有修改绑定值 searchInfo值的时候，没有问题。当我在以下代码中修改之后就出问题了computed:{ searchInfo:{ get:function () { let object=this.searchObject; this.formItemList.forEach(value=>{ this.$set(object,[value.prop],value.data.

vuedraggable 的属性使用详细介绍vuedraggable 的来源vuedraggable 的来源vuedraggable 插件，实际上是对 sortablejs 的一个整合转换。sortablejs： 是使用纯js 开发的一个功能强大的JavaScript 拖拽库。使用方便没有什么依赖，任何项目都可直接使用。Sortable.js中文网npm安装方式$ npm install sortablejs --saveumd方式<script src="http://ww

axios 默认都是异步请求，在实际的开发中我们有事需要使用同步请求。怎么办呢？使用 es6 新增的 async await 来解决。异步请求的写法：function getList(){ Vue.axios.get(url).then((response) => { console.log(response.data) })}同步请求的写法：async function getList(){ let response = awai

vue中使用axios 结合element-ui 山川组件,上传文件最近接到一个需求,需要做一个上传文件和下载文件的功能,主要使用的场景是用户上传文件,和下载样例文件,上传和下载的请求都需要带上 请求头 token,主要使用:axios,element的上传组件进行自定义上传;主要操作代码如下:上传文件 <el-upload class="upload-demo" ref="uploadFilder" :action="up

实现方法：找到需要转换的页面用innerHTML 转换需要在组件标签上加上ref 属性 像这样 <Child class="testDemo" ref="child"></Child>this.$refs[child].$el.innerHTML// 或者this.$refs.child.$el.innerHTML$el 表示的是 Vue 实例使用的根 DOM 元素。...

场景：后台更换了项目地址，前端就需要更改接口请求地址。在网上看到有很多解决方法。方法一：问题来源可能是出在vue项目中，在router文件夹的index.js文件中，将mode修改为hash模式（ps： 换成hash模式之后路由上或添加 # ）方法二：如果route这里使用的是history，那么需要后端对后台项目进行配置方法三：我出现这个问题，是后台给我的请求地址不对，请求的是...

场景：之前有开发过一个 H5+ APP，其中有设计到商品图片的懒加载，因为在项目中涉及到的图片很多。对图片进行一个懒加载可以提高用户体验。（现今APP内部基本上都会涉及到对图片进行一个懒加载，所以，以此文章记录一下。）描述：在接口返回数据之前以一个自定义一个加载图片占据商品图片位置。项目是结合mui.js + Mint-ui + vue开发的，目前不是很建议大家再用Mint-ui 开发...

场景描述：近日，接到一个需求，改善APP首页的布局，需要在顶部添加一个可滚动的栏目导航，以切换栏目然后切换栏目内容类似于唯品会目前的切换效果。如下图问题描述：在切换顶部栏目的时候，下面内容页的banner图片会出现短暂的白边闪屏。在android中并没有什么问题，在ios中，在左右切换栏目页的时候，顶部的轮播图会有一瞬间的图片闪屏白边。原因分析：思考原因可能是因为我没有对整...

涉及到 vue-awesome-swiper 插件，这个插件适用于 Vue 的轮播组件，支持服务端渲染和单页应用。所以用来开发vue项目，很ok。但是值得注意的是，用这个开发移动端的话，有时候会有一点不流畅问题，关于ios和Android的兼容性问题。使用之前现在项目中安装此插件npm install vue-awesome-swiper --save然后呢，就是在vue项目中引入此插...

场景：在项目中，需要开发一个复制邀请码的功能，也就是点击复制按钮就将邀请码复制到粘贴板，直接粘贴即可。使用到的是vue-clipboard2 插件，简单又好用首先，需要先安装这个插件npm install --save vue-clipboard2然后，在vue 项目中的main.js 中引入import Vue from 'vue'import VueClipb...

VS新建vue文件的自定义模板在使用vscode开发的时候，新建vue文件是不可或缺的，但是VSCode并没有vue文件的初始化模板，这个需要自定义模板。我们可以使用vscode的snippets在新建.vue 文件后轻松获得一套模板。具体步骤打开VSCode -> “文件（mac机选Code）” -> “首选项” -> "用户代码片段”，然后会打开一个弹框。在弹框...

基本的示例表单提交一般是在开发管理系统的时候使用最多。有时候你会需要自定义表单内容以及校验规则。以下是关于Form的属性讲解和一个简单的示例。给定一个表单，包含有四个内容姓名、年龄、邮箱、爱好，其中除了爱好以外都是必填项。在这里我把错误信息统一显示在顶部。 实际开发中错误信息一般是在输入框后面或是下面显示关于表单form的一些属性首先我们来看一下表单form的一些属性id：表单的...

关于旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 n...

第一步 安装npm首先Vue的安装依赖于node.js，要保证你的计算机上已经安装过node.js，如果电脑上有node.js,可以跳过node安装，如果没有就先安装node。1.下载node下载之后默认安装，直到完成安装2.查看是否安装成功，可以查看安装npm 的版本打开控制台 电脑图标键 + R 输入 cmd 然后enter 就可以进入（或者 shift + 右键 ）在nod...

使用背景在vue的项目中需要使用到 某一个路径的图片，但是用相对路径和绝对路径书写起来都会是很长的路径例如：./../../../static/img/my/icon4.png 甚至更长这种情况下，想要我们的路径书写简短一点 就可以使用 ‘@/’ 、 ‘~@/’ 来表示前面部分的路径‘@/’ 也是相对路径 和 ‘./’ 意思差不多，具体表示什么路径需要看具体的@ 如何配置首先需要现...

1.首先： 需要先在自己的项目里卖 安装插件使用淘宝镜像cnpm install vue-wechat-title --save或是：npm install vue-wechat-title --save2.在main.js 里面引用，就可以全局使用了方法一Vue.use(require('vue-wechat-title')方法二：分开写impor...