django中使用vue.js的要点总结
有接口如下：
http: 127.0.0.1:8000/info cheme
返回json数据：
[
{
"name": "（山上双人标准间）黄山经典二日游（魅力黄山，日出云海，人间仙境，春暖花开）",
"day": 2,
"night": 1,
...[2019/7/8]
详解django模板与vue.js冲突问题详解django模板与vue.js冲突问题
问题：
django模板与vue.js的变量都是使用“{{”和“}}”包裹起来的，在渲染django模板时会先替代掉所有的“{{”和“}}”及被包裹在其中的内容，使得vue.js没有使用”{{“、”}}”来绑定变量。
处理方法：
方法1：修改vue.js的默认的绑定符号
...[2019/7/8]
Vue.js递归组件实现组织架构树和选人功能案例分析Vue.js递归组件实现组织架构树和选人功能案例分析
大家好！先上图看看本次案例的整体效果。
**浪奔，浪流，万里涛涛江水永不休。如果在jq时代来实这个功能简直有些噩梦了，但是自从前端思想发展到现在的以MVVM为主流的大背景下，来实现一个这样繁杂的功能简直不能容易太多。下面就手把手带您一步步拨开这个案例的层层迷雾。**
实现步骤如下...[2019/7/4]
解决vue打包后vendor.js文件过大问题
第一步、cdn引入各种包
index.html中cdn的方式引入vue、vuex、axios、element-ui、vue-router等包，如下图：
第二步、在使用vue等包的地方，注释掉import引入
在所有使用vue的地方注释掉引入的vue等包，但是Vue.use(axi...[2019/7/4]
Vue.js实现大文件分片md5断点续传
背景
根据部门的业务需求，需要在网络状态不良的情况下上传很大的文件（1G+）。其中会遇到的问题：1，文件过大，超出服务端的请求大小限制；2，请求时间过长，请求超时；3，传输中断，必须重新上传导致前功尽弃。解决方案实现思路，拿到文件，保存文件唯一性标识，切割文件、分片上传、文件MD5验证、断点续传...[2019/7/2]
vue实现分页栏效果
本文实例为大家分享了vue实现分页栏效果的具体代码，供大家参考，具体内容如下
当我们在获取后台数据时，特别是获取大量的列表数据时，页面内能展示的数据不能过多，不然让用户看起来很疲惫，体验度不高。这个时候就需要分页栏来实现指定的数据显示在页面上，然后用户点击指定页面或者点击上一页、下一页再或者输...[2019/6/28]
Vue分页器实现原理详解
本文为大家讲解了Vue分页器实现原理，供大家参考，具体内容如下
网上搜的分页器大多是jQuery实现的，而且也不太完善，于是自己写了个分页器组件，以后再用也不慌，直接复制过去就ok，下面说说具体实现的代码和原理吧。
新闻组件template：
<template>
...[2019/6/28]
vue分页器组件编写方法详解
使用vue编写的分页器组件，支持输入页码跳转，效果如图：
1、点击前五页：
2、点击中间部分页面
3、点击第一页，上一页按钮失效，点击最后一页，下一页按钮失效
组件调用：
html调用 参数:pageSize(总页数);pageNo(当前页)
&l...[2019/6/28]
详解Jest结合Vue-test-utils使用的初步实践
介绍
Vue-test-utils是Vue的官方的单元测试框架，它提供了一系列非常方便的工具，使我们更加轻松的为Vue构建的应用来编写单元测试。主流的 JavaScript 测试运行器有很多，但 Vue Test Utils 都能够支持。它是测试运行器无关的。
Jest，是由Faceb...[2019/6/28]
Vue组件实现触底判断
本文实例为大家分享了Vue组件实现触底判断的具体代码，供大家参考，具体内容如下
非常简陋的代码，以后有空回来完善
子组件代码：
<template>
<div cla ="scroll"></div>
</template>...[2019/6/26]
Vue实现日历小插件
本文实例为大家分享了Vue实现日历小插件的具体代码，供大家参考，具体内容如下
先看下效果图吧， 如下
源码可见于我的github
实现关键点：
1.组件的复用以及父子组件传值
很明显每年每个月的月历样式（数据不一样）是一致的，那么自然而然思路就是把每个月作为一个公用组件进...[2019/6/26]
vue实现记事本功能
本文实例为大家分享了vue实现记事本功能的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/h...[2019/6/26]
vue实现简单的日历效果vue实现简单的日历效果
最近在项目中遇到了一个需求，在vue中创建一个组件，这个组件显示的是当前的日期，以及在当前的日需要处理的事项，处理的事项的信息会以后端的接口的形式返回。
需求确认后，搭建了一下，在这里记录了一下，现在是简单的实现了这个需求，但是肯定的是后期需要进行修改。
vue就不多说了，在vue中使用的...[2019/6/26]
深入理解Vue组件3大核心概念
摘要： 搞懂Vue组件！
作者：浪里行舟
原文：详解vue组件三大核心概念
前言
本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们可以帮助你快速了解一个组件的所有功能。
本文的代...[2019/6/21]
Vue.js中的extend绑定节点并显示的方法Vue.js中的extend绑定节点并显示的方法
在使用Vue.js时，可以使用Vue.extend()方法创建一个子类，传入参数包含了一个对象。其中，在extend中的data和vue实例化对象中的data写法不一样。下面利用实例说明，操作如下：
第一步，创建一个静态页面并引入vue.js文件，并在主体元素标签中插入一个div，设置i...[2019/6/21]
利用vue-i18n实现多语言切换效果的方法
前言
有些项目我们需要支持多种语言切换，满足国际化需求。 vue-i18n是一个vue插件，主要作用就是让项目支持国际化多语言，使用方便快捷，能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。
安装vue-i18n
我们使用npm安装vue-i18n...[2019/6/19]
简单学习5种处理Vue.js异常的方法
错误大全
为了测试各种异常处理技巧，我故意触发三种类型的错误。
第一种：引用一个不能存在的变量：
<div id="app" v-cloak>
Hello, {{name}}
</div>
上述代码运行后不会抛出错误，但是在控制台会有[V...[2019/6/18]
详解element-ui设置下拉选择切换必填和非必填
➢ 需求
默认都是必选
下拉选择的时候
选择必填，活动名称为必填，需要校验和显示*
选择非必填，活动名称不做校验，隐藏*
➢ 初始校验规则
经测试，网上其他的方式都没有实现需求，动态切换rules中的required没有作用
因为按照以...[2019/6/17]
详解vue微信网页授权最终解决方案
vue微信网页授权，基于vue-cli3.0+webpack 4+vant ui + sa + rem适配方案+axios，开发的微信授权方案。项目地址：vue-wechat-auth
参考了[vue-wechat-login]，思路有些不同，本文基于进入所有页面都必须先授权的操作。
与之...[2019/6/17]
最简单的vue消息提示全局组件的方法
简介
实现功能
自定义文本
自定义类型(默认，消息，成功，警告，危险)
自定义过渡时间
使用vue-cli3.0生成项目
toast全局组件编写
rc/toast/toast.vue
<template>
<...[2019/6/17]
vue store之状态管理模式的详细介绍
状态管理
一、状态管理（vuex）简介
uex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools extension，提供了诸如零配置的time...[2019/6/14]
详解vuex之store源码简单解析
关于vuex的基础部分学习于https: www.jb51.net/article/163008.htm
使用Vuex的时候，通常会实例化Store类，然后传入一个对象，包括我们定义好的actions、getters、mutations、state等。store的构造函数：
exp...[2019/6/14]
vue路由插件之vue-route
vue路由插件，vuer Router,使vue官方的路由管理其，和vue高度耦合
1.vue-Router的使用
import Vue from ''vue''
import Router from ''vue-router'' 引入路由组件
Vue.use(R...[2019/6/14]
vue/vue-cli+express手把教你搭建SSR
最近简单的研究了一下SSR，对SSR已经有了一个简单的认知，主要应用于单页面应用，Nuxt是SSR很不错的框架。也有过调研，简单的用了一下，感觉还是很不错。但是还是想知道若不依赖于框架又应该如果处理SSR,研究一下做个笔记。
什么是SSR
把Vue组件渲染为服务器端的HTML字符串，将...[2019/6/13]
vuejs中拖动改变元素宽度实现宽度自适应大小
需求效果：
原理：拖动效果的实现基本都是dom操作来实现的，通过拖动分隔线，计算分隔线与浏览器边框的距离(left)，来实现拖动之后的不同宽度的计算；当拖动分隔线1时，计算元素框left和mid；当拖动分隔线2时，计算元素框mid和right；同时设置元素框最小值以防止元素框拖没了（其实...[2019/6/13]
Vue + Elementui实现多标签页共存的方法Vue + Elementui实现多标签页共存的方法
这个主题，早在一年前就已经创建，也写了一些内容，碍于在应用上体验始终不够完美，一直只存着草稿。
经过多个平台实践，多次迭代，一些功能加了又减了，最后还是回归了最精简的版本，已适用于大部分的场景，若有需要，可自行扩展。
关键逻辑
使用 keep-alive 来缓存各标签页
...[2019/6/13]
基于Vue实现平滑过渡的拖拽排序功能基于Vue实现平滑过渡的拖拽排序功能
最近重读Vue官方文档，在 列表的排序过渡 这一小节，文档提到，<transition-group> 组件有一个特殊的地方，不仅可以实现进入和离开动画，还可以改变定位，官网示例如下：
例子中实现的效果看起来还是非常不错的，这个效果使我想起来另外一个使用场景，之前我...[2019/6/13]
vue项目中将element-ui table表格写成组件的实现代码vue项目中将element-ui table表格写成组件的实现代码
表格中我们经常需要动态加载数据， 如果有多个页面都需要用到表格， 那我希望可以有个组件， 只传数据过去显示， 不用每个页面都去写这么一段内容：
<el-table :data="tableData" border size="mini" fit highlight-current...[2019/6/12]
vue路由懒加载及组件懒加载vue路由懒加载及组件懒加载
一、为什么要使用路由懒加载
为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。
二、定义
懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。
三、使用
常用的懒加载方式有两种：即使用vue异步组件 和 ES中...[2019/6/12]
vue2 中二级路由高亮问题及配置方法vue2 中二级路由高亮问题及配置方法
实现效果图
1、项目中的图标使用的是element-ui框架中的图标，如果需要引入可以看我写的上一篇文章。
2、首先配置路由
我初始化项目的时候初始化了路由，所以打开router/index.js文件进行修改配置
router/index.js
i...[2019/6/11]
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
面向百度开发
html
<van-uploader :after-read="onRead" accept="image/*">
<img src="./icon_input_add.png" />
</van-uploader>...[2019/6/10]
Vue响应式原理Observer、Dep、Watcher理解
开篇
最近在学习Vue的源码，看了网上一些大神的博客，看起来感觉还是蛮吃力的。自己记录一下学习的理解，希望能够达到简单易懂，不看源码也能理解的效果😆
Object.defineProperty
相信很多同学或多或少都了解Vue的响应式原理是通过Object.de...[2019/6/6]
vue中的过滤器实例代码详解
过滤器
1.过滤器规则
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：
双花括号插值{{}}和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
...[2019/6/6]
vue中v-show和v-if的异同及v-show用法
一、官方解释：
1.v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2.v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
3.相比之下，v-show 就简单...[2019/6/6]
详解vue父子组件关于模态框状态的绑定方案
日常开发中经常遇到的一个场景，父组件有很多操作，需要弹窗，例如：
<template>
<div cla ="page-xxx">
点击打开新增弹窗
<button>新增</button>
点击打开...[2019/6/6]
Vue实现微信支付功能遇到的坑Vue实现微信支付功能遇到的坑
微信支付功能相比较支付宝支付，有点点繁琐，整理记录下来，以便日后所需
项目用VUE+EL搭建而成，支付用EL的radio来做的
<el-radio v-model="radio" label="weixin" >
<i cla ="iconfont ico...[2019/6/5]
详解vue-cli3多页应用改造
需求
一个平台P，包含产品a、b、c、d、e。各产品UI样式风格统一，且会用到公共配置（HOST、是否添加埋点js）、组件（头部导航、表格、搜索框）、方法（请求拦截、生成UUID）。
现状：由于历史遗留原因，各产品为独立SPA、各自维护，配置、组件也都自成一体，只是大概样式上保持了一致，但...[2019/6/4]
Vue基础学习之项目整合及优化
前言
使用 webpack 构建过 Vue 项目的同学应该知道 alias 的作用，我们可以使用它将复杂的文件路径定义成一个变量来访问。在不使用 alias 的项目中，我们引入文件的时候通常会去计算被引入文件对于引入它的文件的相对路径，比如像这样
import HelloWorld...[2019/6/3]
Vue CLI3基础学习之pages构建多页应用Vue CLI3基础学习之pages构建多页应用
前言
首先我们可以把多页应用理解为由多个单页构成的应用，而何谓多个单页呢？其实你可以把一个单页看成是一个 html 文件，那么多个单页便是多个 html 文件，多页应用便是由多个 html 组成的应用，如下图所示
既然多页应用拥有多个 html ，那么同样其应该拥有多个独立的入口...[2019/6/3]
细说Vue组件的服务器端渲染的过程细说Vue组件的服务器端渲染的过程
声明：需要读者对 NodeJs、Vue 服务器端渲染有一定的了解
现在，前后端分离与客户端渲染已经成为前端开发的主流模式，绝大部分的前端应用都适合用这种方式来开发，又特别是 React、Vue 等组件技术的发展，更是使这种方式深入人心。
但有一些应用，客户端渲染就会遇到一些问题了：
...[2019/5/31]
Element-ui中元素滚动时el-option超出元素区域
复现场景, 看图
分析原因
为简单起见, 把选项区域描述为popperEl
popperEl的z-index 比较大, 会覆盖在其他元素上面
popperEl默认是插入body元素的(可以将popper-append-to-body设为false后不插入到body)
...[2019/5/31]
详解Vue项目引入CreateJS的方法（亲测可用）
1 前 言
1.1 CreateJS介绍
CreateJS是基于HTML5开发的一套模块化的库和工具。
基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。
A suite of modular libraries and tools which...[2019/5/31]
Vue Router history模式的配置方法及其原理
vue-router分为 hash和 history模式，前者为其默认模式，url的表现形式为 http: yoursite.com#home，比较难看。后者的url表现形式为 http: yoursite.com/home，比较美观。
但如果要使用 history模式，我们需要在后端进行额外...[2019/5/31]
新手简单了解vue
前言
作为一个刚入行不久的菜鸟不知从什么时候开始就有了写一个自己的专栏的想法，刚好今天没事就给自己挖一个坑，分享一下我对vue的见解和一些领悟，整个专栏应该会包括vue，vue-cli，vue-router，vuex，nuxt和一些webpack的简单入门，当然实战项目也一定会放出来，更新频率...[2019/5/30]
详解vue-cli3开发Chrome插件实践
之前找了不少如何开发谷歌插件的文章，结果发现都是些很基础的内容，并没有写到如何快速编译打包插件。我就在想为什么不能通过webpack来打包插件呢？如果通过webpack编译的话，就能使开发过程变得更舒服，使文件结构趋向模块化，并且打包的时候直接编译压缩代码。后来发现了 vue-cli-plugin...[2019/5/29]
vue-cli3中vue.config.js配置教程详解
前言
vue-cli3推崇零配置，其图形化项目管理也很高大上。
但是vue-cli3推崇零配置的话，导致了跟之前vue-cli2的配置方式都不一样了。
别名设置，sourcemap控制，输入文件位置和输出文件位置和输出的方式，压缩js控制，打包webapck日志分析，externals...[2019/5/29]
vue input输入框关键字筛选检索列表数据展示
想必大家在项目开发中难免会用到关键字筛选的功能，正好这次项目有需求要做这一块，就整理一下vue的input输入框输入关键字检索数据列表的代码。下面直接上代码：
html：
<!-- 筛选demo -->
<template>
<div>
...[2019/5/29]
vue+Element实现搜索关键字高亮功能vue+Element实现搜索关键字高亮功能
最近做了一个日志搜索的需求，要在页面上实现海量日志的关键字搜索。为了搜索更清晰，我最终实现了多条件搜索，且搜索结果的记录中的关键字全部高亮。
一、实现思路
1 实时监控表格，实现关键字的定位；
2 点击搜索按钮以后，实现记录中关键字的样式变化（即高亮）。
二、实现过程
1 搜索...[2019/5/29]
Vue实现表格批量审核功能实例代码
本文实例为大家分享了Vue实现表格批量审核功能的具体代码，供大家参考，具体内容如下
1 前端部分
效果如下图所示：
1.1 html部分
<el-form-item>
<el-button type="succe " icon="el-...[2019/5/29]
vue+element实现表格新增、编辑、删除功能
需要做一个需求：新增一个xml文件时，添加数量不确定、属性相同的xml标签，想了想可以用表格做啊，属性相同，使用统一的表头，下面的属性值只是进行增删改不就行了，就类似于mysql给表里填数据一样。
可是目前似乎还没有表格的直接增删改一行的操作，那要怎么实现呢？于是，通过上网以及自己的思考，终于...[2019/5/29]
经验首页