vue日常存档
关注
分享
扫一扫
vue学习跳坑
乐夫天命兮
一名默默无闻欺负键盘的人，坚持做我自己！！！！
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
代码review
代码日常review原创 2022-07-07 14:47:09 · 565 阅读 · 0 评论 -
Visual Studio Code自动生成vue模板
在使用vs开发vue中经常新建vue文件进行模块开发，新建文件结构着实痛苦于是百度配置一下自己的vs编辑器：1.点击vs左下角设置选择用户代码片段2.输入vue回车，将下边代码复制粘贴到vue.json进行保存{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <di...原创 2022-05-02 11:16:03 · 551 阅读 · 0 评论 -
Element中如何对el-select进行失焦校验
想要实现的效果是当选择框失去焦点的时候会显示出校验提示，解决的办法如下：因为使用的是element中的el-select组件，所以可以根据框架中提供的校验方式来进行校验1、首先在el-form上加上rules属性并在data中进行定义：2、在下拉选择框中定义一个失去焦点事件：3、利用表单组件示例中的方法：handleChangeSelect(key, value) { this.$refs.ruleForm[value ? 'clearValidate' : 'validateField.原创 2022-03-29 09:55:36 · 5649 阅读 · 0 评论 -
vue项目webpack打包css顺序异常导致警告问题解决 couldn‘t fulfill desired order of chunk group(s)
看到这个报错真的是一头雾水后来发现是ExtractTextWebpackPlugin插件编译提示的预警：解决问题先看的懂预警提示信息：明白了这句话后就知道了是组件顺序加载出现问题：提示后边的“，”号代表正确的有几个不正确的有几个；然后全局搜索引用组件顺序，调整后执行提示消失。...原创 2022-03-23 14:22:49 · 3269 阅读 · 0 评论 -
基于ElementUI input 实现IPinput
实现效果代码：<template> <div :class="['ip-input-container', 'input240', disabled && 'is-disabled']" @paste="handlePaste" > <span v-for="(item, index) in list" :key="index" class="item"> <el-input :ref原创 2022-03-10 10:10:10 · 1425 阅读 · 0 评论 -
review过程汇总
在开发中，我们本身就使用es6+语法，一定要把自己的代码用到极致，多想、多看，提高自身的编码能力。es6+语法一定要熟，W3C标准多看 vue-组件名一定要以大写开头！！！一个方法中定义的变量当使用一次时，就不要定义变量了，直接返回不更好 forEacrh, map, filter, some这些方法，当只有一层判断或是数据处理时，可不用写return，如下:arr.map(el => xxxx)能用js-内置方法，一定不要自创方法，除非你非常自信 if 慎用，多想想是不是可以用更优的方.原创 2022-02-28 11:33:57 · 514 阅读 · 0 评论 -
Duplicated key ‘isFetch‘ vue/no-dupe-keys
最晕的报错出现了：：脑子不知道在干嘛？然后就暗自自黑记录一下这个愚蠢的行为。。。。。原创 2021-11-23 11:17:39 · 6907 阅读 · 4 评论 -
[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
那么问题来了这个报错是什么意思呢？？？还是老方法，先暴力翻译一下报错语句的意思：key值是必须唯一的，如果重复就会报错可以把key值改为index或者id，就可以避免这个情况（这里key最好用id，才能达到key值唯一，就地复用的原则，大大节省了dom的渲染）...原创 2021-10-19 10:34:05 · 674 阅读 · 0 评论 -
消息框左右滚动
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl原创 2021-07-14 10:19:41 · 232 阅读 · 0 评论 -
error Unexpected trailing comma comma-dangle
Error Unexpected trailing comma. comma-dangle 错误Eslint代码检测report数据。原因是数据后多个逗号。原创 2021-06-23 10:12:55 · 5111 阅读 · 0 评论 -
批量异步更新策略及 nextTick 原理
为什么要异步更新Vue.js 是如何在我们修改 data 中的数据后修改视图了。简单回顾一下，这里面其实就是一个“setter -> Dep -> Watcher -> patch -> 视图”的过程。假设我们有如下这么一种情况。<template> <div> <div>{{number}}</div> <div @click="handleClick">click</div> &原创 2020-09-19 09:22:46 · 652 阅读 · 4 评论 -
Vue.js 运行机制全局概览
全局概览这一节笔者将为大家介绍一下 Vue.js 内部的整个流程，希望能让大家对全局有一个整体的印象，然后我们再来逐个模块进行讲解。从来没有了解过 Vue.js 实现的同学可能会对一些内容感到疑惑，这是很正常的，这一节的目的主要是为了让大家对整个流程有一个大概的认识，算是一个概览预备的过程，当把整本小册认真读完以后，再来阅读这一节，相信会有收获的。首先我们来看一下笔者画的内部流程图。大家第一次看到这个图一定是一头雾水的，没有关系，我们来逐个讲一下这些模块的作用以及调用关系。相信讲完之后大家对Vue.原创 2020-09-19 09:15:19 · 697 阅读 · 0 评论 -
vue的template 模板是怎样通过 Compile 编译的
Compilecompile 编译可以分成 parse、optimize 与 generate 三个阶段，最终需要得到 render function。这部分内容不算 Vue.js 的响应式核心，只是用来编译的，笔者认为在精力有限的情况下不需要追究其全部的实现细节，能够把握如何解析的大致流程即可。由于解析过程比较复杂，直接上代码可能会导致不了解这部分内容的同学一头雾水。所以笔者准备提供一个 template 的示例，通过这个示例的变化来看解析的过程。但是解析的过程及结果都是将最重要的部分抽离出来展示，原创 2020-09-19 09:12:48 · 928 阅读 · 0 评论 -
vue封装一个序列帧组件
在项目中实现一个简单的几秒动画，图片较小的话可以采用雪碧图的图片形式，结合css3的动画实现雪碧图形式大概实现思路如下：animation: lightning 3s steps(25) infinite;animation-direction:alternate; @keyframes lightning { 0%{ background-position-y: 0; } 100%{ background-position-y: -150原创 2020-07-09 16:43:01 · 2363 阅读 · 0 评论 -
构建实战篇 4：项目整合与优化
构建实战篇 4：项目整合与优化前几小节，我们讲述了 Vue 项目构建的整体流程，从无到有的实现了单页和多页应用的功能配置，但在实现的过程中不乏一些可以整合的功能点及可行性的优化方案，就像大楼造完需要进行最后的项目验收改进一样，有待我们进一步的去完善。使用 alias 简化路径使用 webpack 构建过 Vue 项目的同学应该知道 alias 的作用，我们可以使用它将复杂的文件路径定义成一个变量来访问。在不使用 alias 的项目中，我们引入文件的时候通常会去计算被引入文件对于引入它的文件的相对路径，原创 2020-05-08 22:42:09 · 379 阅读 · 0 评论 -
构建实战篇 3：多页路由与模板解析
构建实战篇 3：多页路由与模板解析上篇文章中我们成功打包并输出了多页文件，而构建一个多页应用能够让我们进一步了解项目配置的可拓展性，可以对学习 Vue 和 webpack 起到强化训练的效果，本文将在此基础上主要针对多页路由及模板的配置进行系列的介绍。路由配置1. 跳转在配置路由前，首先我们要明确一点就是，多页应用中的每个单页都是相互隔离的，即如果你想从 page1 下的路由跳到 page2 下的路由，你无法使用 vue-router 中的方法进行跳转，需要使用原生方法：location.href原创 2020-05-08 22:41:31 · 308 阅读 · 0 评论 -
构建实战篇 2：使用 pages 构建多页应用
构建实战篇 2：使用 pages 构建多页应用经过对单页应用配置的了解，相信大家应该对如何构建一个 Vue 单页应用项目已经有所收获和体会，在大部分实际场景中，我们都可以构建单页应用来进行项目的开发和迭代，然而对于项目复杂度过高或者页面模块之间差异化较大的项目，我们可以选择构建多页应用来实现。那么什么是多页应用，如何构建一个多页应用便是本文所要阐述的内容。概念首先我们可以把多页应用理解为由多个单页构成的应用，而何谓多个单页呢？其实你可以把一个单页看成是一个 html 文件，那么多个单页便是多个 ht原创 2020-05-08 22:40:32 · 1810 阅读 · 0 评论 -
构建实战篇 1：单页应用的基本配置
构建实战篇 1：单页应用的基本配置前几篇文章我们介绍了 Vue 项目构建及运行的前期工作，包括 webpack 的配置、环境变量的使用等，在了解并掌握了这些前期准备工作后，那么接下来我们可以走进 Vue 项目的内部，一探其内部配置的基本构成。配置1. 路由配置由于 Vue 这类型的框架都是以一个或多个单页构成，在单页内部跳转并不会重新渲染 HTML 文件，其路由可以由前端进行控制，因此我们需要在项目内部编写相应的路由文件，Vue 会解析这些文件中的配置并进行对应的跳转渲染。我们来看一下 CLI原创 2020-05-08 22:38:04 · 292 阅读 · 0 评论 -
构建基础篇 3：env 文件与环境设置
构建基础篇 3：env 文件与环境设置在实际项目的开发中，我们一般会经历项目的开发阶段、测试阶段和最终上线阶段，每一个阶段对于项目代码的要求可能都不尽相同，那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果，使用不同的功能呢？这里就需要引入环境的概念。一般一个项目都会有以下 3 种环境：开发环境（开发阶段，本地开发版本，一般会使用一些调试工具或额外的辅助功能）测试环境（测试阶段，上线前版本，除了一些 bug 的修复，基本不会和上线版本有很大差别）生产环境（上线阶段，正式对外发布的版原创 2020-05-08 22:35:25 · 1497 阅读 · 0 评论 -
构建基础篇 2：webpack 在 CLI 3 中的应用
构建基础篇 2：webpack 在 CLI 3 中的应用webpack 作为目前最流行的项目打包工具，被广泛使用于项目的构建和开发过程中，其实说它是打包工具有点大材小用了，我个人认为它是一个集前端自动化、模块化、组件化于一体的可拓展系统，你可以根据自己的需要来进行一系列的配置和安装，最终实现你需要的功能并进行打包输出。而在 Vue 的项目中，webpack 同样充当着举足轻重的作用，比如打包压缩、异步加载、模块化管理等等。如果你了解 webpack 那么相信本文会让你更了解其在 Vue 中的使用，如果你原创 2020-05-08 22:33:52 · 547 阅读 · 0 评论 -
构建基础篇 1：你需要了解的包管理工具与配置项
构建基础篇 1：你需要了解的包管理工具与配置项任何一个项目的构建离不开工具和统一的管理标准，在项目开发和维护过程中，我们需要了解安装包的相应工具和配置文件，以此来有效的进行项目的迭代和版本的更新，为项目提供基本的运行环境。本文将详细介绍构建 Vue.js 项目相关的依赖包安装工具和相应的配置文件，为大家提供参考。介绍相信大家对于包管理工具的使用一定不会陌生，毕竟它已经成为前端项目中必不可少的一部分，为了照顾部分零基础用户，这里我们做一个简单的介绍。1. npm 与 package.jsonnpm原创 2020-05-08 22:33:06 · 345 阅读 · 0 评论 -
开篇：Vue CLI 3 项目构建基础
开篇：Vue CLI 3 项目构建基础大家好，当你点进这个标题，开始阅读本章的时候，说明你对 Vue.js 是充满好奇心和求知欲的。我之前写过一篇文章，这样评价 Vue.js，称它是“简单却不失优雅，小巧而不乏大匠”的作品，正如其官网介绍的“易用，灵活和高效”那样。其实框架是 Vue.js 的本质，而真正了解它的人则会把它当成一件作品来欣赏。Vue.js 作为一门轻量级、易上手的前端框架，从入门难度和学习曲线上相对其他框架来说算是占据优势的，越来越多的人开始投入 Vue.js 的怀抱，走进 Vue.js原创 2020-05-08 22:29:27 · 182 阅读 · 0 评论 -
[Vue warn]: Duplicate keys detected: ''. This may cause an update error.
开发遇到这样的报错：首先想到是不是v-for循环中key值得问题，错误原因：我们在使用v-for的时候，都要必须加上一个唯一的key值，但是这里写了两个for循环，尽管都加上了key值,然而又将key的值写成一样的了。所以就导致了警告。...原创 2019-10-31 18:15:10 · 30518 阅读 · 2 评论 -
vue实现一个数字滚动效果
<template> <div class="num-block"> <div class="num-block_show"> <div class="num-block_numbers" :class="{'ellipsis': !isNum(item)}" v-for="(item, key) in nu...原创 2019-08-08 11:33:34 · 9292 阅读 · 0 评论 -
[Vue warn]: Error in v-on handler: "TypeError: handler.apply is not a function"
在使用vue.js项目开发中遇到警告，如此下图所示：出错部位代码如下： <el-button :icon="showfilter == true?'h-icon-filter':'h-icon-filter_f'" type="iconButton" title="高级查询" class="class-show" @click="showfilter" ></e...原创 2019-07-29 17:38:25 · 107554 阅读 · 9 评论 -
Prop being mutated: "showDialog"
对于父子组件之间的互相传值，报错如下：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’...原创 2019-06-24 15:23:06 · 18435 阅读 · 1 评论 -
npm install报错Failed at the phantomjs-prebuilt@2.1.16 install script
输入如下代码解决npm install phantomjs-prebuilt@2.1.14 --ignore-scripts原创 2019-05-10 15:23:22 · 7654 阅读 · 0 评论 -
ecahrts饼状图vue封装
效果图如下：新建一个pie.vue文件<template> <div class="common-wrapper"> <div class="common-wrapper" id="pie"></div> </div></template><script>export defa...原创 2019-10-22 17:57:38 · 470 阅读 · 0 评论 -
vue-cli3.0 静态资源项目结构（三）
vue-cli3.0默认项目目录与2.0的相比，更精简:1.移除的配置文件根目录下的，build和config等目录，2.移除了static文件夹，新增了public文件夹，并且index.html移动到public中。3.在src文件夹中新增了views文件夹，用于分类 试图组件 和 公共组件 。4.大部分配置 都集成到 vue.config.js这里,在项目根目录下1.相对路径引入...原创 2019-04-25 16:37:11 · 1844 阅读 · 0 评论 -
v-cli3.0 多页面配置（二）
介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service)，该依赖：a) 可升级；b) 基于 webpack 构建，并带有合理的默认配置；c) 可以通过项目内的配置文...原创 2019-04-25 16:30:17 · 951 阅读 · 0 评论 -
v-cli3.0 搭建vue项目步骤详解（一）
1.Vue CLI介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service)，该依赖：a）可升级；b）基于 webpack 构建，并带有合理的默认配置；c）可以通过项...原创 2019-04-09 09:33:29 · 2606 阅读 · 0 评论 -
gulp-css-wrap工具的使用之----[批量为css文件扩展命名空间]
首先把官方指导API挂上gulp入门指南gulp-css-wrap在研究elementUI在线切换皮肤功能时，看到大佬经验中都用到了gulp-css-wrap（批量为css文件扩展命名空间）工具。这种实现思路：1.将所有皮肤样式都通过主入口import进来2.通过点击样式切换事件来改变body的class名那么问题来了，所有样式都需要增加一个class拓展，手动做？神器来了，gulp...原创 2019-03-22 15:52:03 · 3106 阅读 · 0 评论 -
I18n国际化在vue中的实现
背景前端技术日新月异，技术栈繁多。以前端框架来说有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等构建工具去满足日常的开发工作。同时在日常的工作当中，不同的项目使用的技术栈也会不一样。当需要对部分项目进行国际化改造时，由于技术栈的差异，这时你需要去寻找和当前项目使用的技术栈相匹配的国际化的插件工具。比如:• vue + vue-...原创 2019-03-20 11:23:20 · 398 阅读 · 0 评论 -
Vue监听滚动实现锚点定位(双向)
在项目需求中需要实现一个滚轴联动锚点的功能效果图如下：功能代码demo如下：<template> <div class="container"> <div class="wrapper"> <div class="section" style="height:500px;width:100%" v-f原创 2019-01-31 16:41:36 · 7757 阅读 · 6 评论 -
vue中html转义解决提交表单问题
在项目开发过程中会有textarea文本框输入提交后台，在特殊字符和脚本防注入的处理上，采用html转义的简单方法来解决这个问题。1、用htmlEncode 来转义后提交后台：htmlEncode (str) { // 转义 元素的innerHTML内容即为转义后的字符 let ele = document.createElement('span') ele.appendChi...原创 2019-01-19 10:20:51 · 4990 阅读 · 0 评论 -
使用vue-quill-editor实现富文本编辑器
一、什么是富文本编辑器?简单介绍一下，看过上面的图，您大致对富文本编辑器有个了解了，传统的textArea输入框输入的内容没法做格式上的更改，它的功能跟我们的word一样，可以对其中内容的格式做一些调整，还可以添加图片等等，它在开发中有个专有名词，叫富文本编辑器。1、ueditor国内人用ueditor的比较多，真的很中国化，经常在贴吧或论坛里看到这种风格的富文本编辑器。2、bootst...原创 2019-01-11 11:51:35 · 98349 阅读 · 38 评论 -
VUE生命周期解读
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;原创 2018-11-10 13:48:13 · 370 阅读 · 2 评论 -
Vue Router详解
公司统一技术框架，选型Vue，Vue全家桶也便成为接下来的学习使用技术框架之一了。接下来一起学习Vue Router。 Vue Router介绍Vue Router是vue.js官方的路由管理器。它和vue.js的核心深度集成，让构建单页面应用变得易如反掌。它主要包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、统配符基于Vue.js过度系统的视图过度效...原创 2018-07-27 15:56:37 · 582 阅读 · 0 评论 -
Vue-cli多页配置及多页面之间的跳转问题
vue开发，现在大部分做的都是（SPA）应用，但是，由于，需求不同，我们针对的用户需求变更较为，频繁，如果每次都全量打包更新，给开发的自测，及测试妹子的任务就会多，每次都要重新验证一下才放心。所以，想着能不能搞一个多页的，进行增量升级，所以就有了以下的配置。网上配置很多，也很详细，我也有参考。废话不多说开始吧！如果有说的不对的，请大家指出，我会及时改正。一 目录结构调整修改之后目...原创 2018-07-18 14:24:29 · 27150 阅读 · 10 评论 -
vue-cli + webpack 多页面配置分析
vue-cli + webpack 多页面实例应用 <div class="postBody"> <div id="cnblogs_post_body" class="blogpost-body"><h2>关于vue.js</h2>原创 2018-07-17 10:44:47 · 947 阅读 · 2 评论