思路 实现该组件有两个思路，一个使用v-model进行双向绑定，一个是使用prop的.sync修饰符、父子组件通信。 1.v-model形式 v-model的实现需要在自定义组件中自定义一个inputvalue值，因为vue中的父子组件传递机制问题，在组件中直接修改props注入的ke...[2019/4/24]

一、前言 数据双向绑定作为 Vue 核心功能之一，其实现原理主要分为两部分： 数据劫持 发布订阅模式 本篇文章主要介绍 Vue 实现数据劫持的思路，下一篇则会介绍发布订阅模式的设计。 二、针对 Object 类型的劫持 对于 Object 类型，主要劫持其属性的...[2019/4/23]

最近项目中由于列表居多且都做了下拉刷新上拉加载，所以就使用了keep-alive组件来缓存页面数据，但是当在其他页面做一些操作改变了列表数据，当来到列表的时候每次都要下拉刷新一下，体验不好，所以就使用到了EventBus，在需要更新的时候就用EventBus来刷新列表。 1.keep-aliv...[2019/4/23]

摘要 我们都知道Vue的响应式是通过Object.defineProperty来进行数据劫持。但是那是针对Object类型可以实现, 如果是数组呢? 通过set/get方式是不行的。 但是Vue作者使用了一个方式来实现Array类型的监测: 拦截器。 核心思想 通过创建...[2019/4/23]

之前的项目一直在使用Element-UI框架，element中的Notification、Me age组件使用时不需要在html写标签，而是使用js调用。那时就很疑惑，为什么element ui使用this.$notify、this.$me age就可以实现这样的功能？ 1、实现消息弹窗组件的...[2019/4/23]

问题背景 在我们的项目中有一个可视化配置的模块，是通过go.js生成canvas来实现的。但是，我们发现这个模块在浏览器中经常会引起该tab页崩溃。开启chrome的任务管理器一看，进入该页面内存和cpu就会暴涨，内存经常会飙到700多M。但是我们的canvas实际的像素只有约500x500，...[2019/4/23]

用过Element ui库的童鞋肯定知道<el-tabs>组件，简单、好用、可以自定义标签页，不知道广大童鞋们在刚开始使用<el-tabs>组件的时候有没有想过它是如何实现的？我咋刚开始使用<el-tabs>组件的时候就有去想过，也想去实现一个超级简单的tabs...[2019/4/23]

导语：随着接触的项目增加，很多项目都是遇到同样的问题，而每次都是使用一贯的手法进行处理。有时候有些方法并不是那么的优雅甚至有些冗余，所以自己也想开始尝试不同的方法去解决同样的问题。 我经常在项目中会遇到按钮重复点击后引起表单的重复点击问题。所以针对这个问题，自己尝试了几种办法分别去解决。直接上...[2019/4/23]

最近要写个弹框，发现element-ui弹框样式还可以，就copy下来改吧改吧。也不分步骤详细介绍了直接上代码。 在组件目录中新建文件夹me age 我把me age目录里的东西给大家贴出来 me age文件夹 src文件夹 index.js imp...[2019/4/23]

vue可以通过watch监听data内数据的变化。通常写法是： data: { a: 100 }, watch: { a(newval, oldVal) { 做点什么。。。 console.log(newval, oldVal) } } vu...[2019/4/23]

在生成vue项目的时候，出现如下错误 ERROR in static/j index.d66d806fcdd72b36147b.js from UglifyJs Unexpected token: punc (() [src/component Hello.vue:26,0][stati...[2019/4/22]

vee-validate 是为 Vue.js 量身打造的表单校验框架，允许您校验输入的内容并显示对应的错误提示信息。它内置了很多常见的校验规则，可以组合使用多种校验规则，大部分场景只需要配置就能实现开箱即用，还支持自定义正则表达式。而且支持 40 多种语言，对本地化、多语言支持非常友好。 ...[2019/4/22]

1.在index.html引入高德地图JSAPI <script src="https: webapi.amap.com/maps?v=1.3&key=xxx">< cript> 2.地图dom <div cla ="map-...[2019/4/19]

TL;DR 给data添加新属性的时候vm.$set(vm.info,''newKey'',''newValue'') data上面属性值是数组的时候，需要用数组的方法操作数组，而不能通过index或者length属性去操作数组，因为监听不到属性操作的动作。 安装和初使用vue vu...[2019/4/19]

项目基础工程文件是使用vue-cli3.0搭建的,这里不过多介绍。开发Vue组件系列之模态框,主要有标题、内容、定时器、按钮文案、按钮事件回调、遮罩层这些可配置项。本次开发得组件是本系列的第一个组件,后期也会有更多系列教程推出。 使用命令行 $ Vue create echi-...[2019/4/19]

项目需求中需要对用户登录时的密码进行加密，在网上查询些许文章后，最终与后端协商使用jsencrypt.js。 jsencrypt.js的github地址： https: github.com/travist/js... 使用yarn安装至Vue项目 yarn add jsencrypt...[2019/4/18]

什么是路由自动注入 路由自动注入概念学习自nuxt,我们不需要在 router.js 中每次手动输入代码引入模块而是自动根据 文件目录格式 生成 router.js 我们把这个功能独立成一个 webpack 插件,并对相关功能进行了完善,而且实现了 vue-router 的所有核心功能 ...[2019/4/18]

这个例子还是比较简单的，独立完成后，能大概知道vue是干嘛的，可以写个todoList的小例子。 开始写例子之前，先对环境的部署做点简单的介绍，其实和Vue官方的差不多。 #如若没有安装过vue-cli,先全局安装一下vue-cli $ cnpm i -g vue-cli #...[2019/4/18]

局组件和局部组件 1.先定义组件   Vue.component(''组件名'', { 组件模板对象 }) 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写 例如: 组件-->mtText  ...[2019/4/18]

1.npm run build生成代码加密 2.在iis添加网站定位到dist文件下 第三步第四步配置是www.baidu.com/home一直重新刷新会出现404问题 3.安装URL重写 https: www.iis.net/downloads... 4.在dist文件下配置...[2019/4/18]

一、 node安装 1）如果不确定自己是否安装了node,可以在命令行工具内执行： node -v （检查一下 版本）； 2）如果 执行结果显示： xx 不是内部命令，说明你还没有安装node , node 安装地址：http: nodejs.cn/download/ 注 ：安装...[2019/4/17]

 在vue使用echarts时，可能会遇到这样的问题，就是直接刷新浏览器，或者数据变化时，echarts不更新?    这是因为Echarts是数据驱动的，这意味着只要我们重新设置数据，那么图表就会随之重新渲染，这是实现本需求的基础。我们再设想一下， ...[2019/4/17]

snapshot介绍 snapshot测试又称快照测试，可以直观地反映出组件UI是否发生了未预见到的变化。snapshot如字面上所示，直观描述出组件的样子。通过对比前后的快照，可以很快找出UI的变化之处。 第一次运行快照测试时会生成一个快照文件。之后每次执行测试的时候，会生成一个快照...[2019/4/17]

首先以分享给朋友为例 1、先看官方文档 wx.onMenuShareAppMe age({ title: '''', 分享标题 desc: '''', 分享描述 link: '''', 分享链接，该链接域名或路径必须与当前页面对应的...[2019/4/17]

起因 微信分享网址时无法分享图片，这个问题需要用j dk去解决。其实开始的时候时可以看到图片的，但后来微信禁止了。所以只能使用j dk去解决。 普通网页开发很简单，但是使用vue或其他前端框架开发spa单页面webapp的时候就会有问题了。只要url发生变化就会报签名错误。其实微信官方上已...[2019/4/17]

 1. 动态属性名：可使用表达式来设置动态属性名或方法名： <!-- 属性name --> <a :[name]="url"> ... </a> <!-- 计算属性 和s --> <img :[ ]="/img/te...[2019/4/16]

Vuex 什么是Vuex？ 官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 个人理解：Vuex是用来管理组件之间通信的一个插件 为什么要用Vuex？ 我们知道组...[2019/4/16]

实际上关键词叫 微信pushState只能分享落地页 更贴切一点 应用场景： vue + vue-router vue-router使用hash模式（history模式没试过） 不使用微信的js-sdk（因为我这个项目是可配置域名的商城，比较特殊，不能使用微信sdk） ...[2019/4/16]

在师兄的推荐下入坑vue.js ，发现不知如何运行GitHub上的开源项目，很尴尬。通过查阅网上教程，成功搭建好项目环境，同时对前段工程化有了朦朦胧胧的认知，因此将环境搭建过程分享给大家。 可以看下我的github：https: github.com/padipata ，里面有我学习、工作写的...[2019/4/16]

Vue作为最近最炙手可热的前端框架，其简单的入门方式和功能强大的API是其优点。而同时因为其API的多样性和丰富性，所以他的很多开发方式就和一切基于组件的React不同，如果没有对Vue的API（有一些甚至文档都没提到）有一个全面的了解，那么在开发和设计一个组件的时候有可能就会绕一个大圈子，所以我...[2019/4/16]

如果没有这个属性的时候vue应用 in-place patch（就地复用）策略。列表里的顺序发生改变的时候比如shuffle（列表打乱）的时候，vue为了提升性能，不会移动dom元素，只是更新相应元素的内容节点。 就地复用的弊端 这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 ...[2019/4/15]

当前大部分UI框架设计的Webpack配置都相对复杂，例如 Element 、 Ant Design Vue 和Muse-UI等Vue组件库。例如Element，为了实现业务层面的两种引入形式（ 完整引入 和 按需引入 ），以及抛出一些可供业务层面通用的 utils 、 i18n 等，Webpac...[2019/4/15]

使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。 父子组件之间的通信 1）props和$emit 父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作 具体代码如下: &nbs...[2019/4/15]

前言 在指令里获取的this并不是vue对象，vnode.context才是vue对象，一般来说，指令最好不要访问vue上的data，以追求解耦，但是可以通过指令传进来的值去访问method或ref之类的。 vue指令 官方文档其实已经解释的蛮清楚了，这里挑几个重点的来讲。 ...[2019/4/15]

 小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽， 全局指令我是写在main.js中 Vue.directive(''drag'', { inserted: function (el) { el.onmousedown=function(...[2019/4/15]

Vuex 的 action 属性内，可以定义异步操作逻辑，以满足某些业务场景要求。在组件内，是通过 $store.dispatch 来触发 action 定义的函数。 我们使用 action，来为计数器异步增 1。 1 Promise 方式 main.js： ...[2019/4/15]

原理 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter etter。Object.defineProperty 是 ES5 中一个无法 shim...[2019/4/11]

前言 vue是现在很火的一个前端MVVM框架，它以数据驱动和组件化的思想构建，与angular和react并称前端三大框架。相比angular和react，vue更加轻巧、高性能、也很容易上手。大家也可以移步vue官网，看一下它的介绍和核心功能介绍。简单粗暴的理解就是：用vue开发的时候，就是...[2019/4/11]

1 安装 首先，通过 npm 安装 vue-router 插件： npm install --save vue-router 安装的插件版本是：vue-router@3.0.2 2 用法 2.1 新建 vue 组件 在 router 目录中，新建...[2019/4/9]

vue+element-ui中的图片获取与上传 工作上接触了一下图片的处理，图片的格式是文件流, 记录如下。 请求图片 请求图片的时候，带上{ responseType: ''blob'' }, 否则图片显示的可能是乱码。 axios .post(url, parmas, { resp...[2019/4/8]

在网上看到一个这样的网站，STRML 它的效果看着十分有趣,如下图所示: 这个网站是用 react.js 来写的，于是，我就想着用 vue.js 也来写一版，开始撸代码。 首先要分析打字的原理实现，假设我们定义一个字符串 str ,它等于一长串注释加 CSS 代码，并且我们看到，...[2019/4/8]

1 动态设置页面标题 页面标题是由 <title></title> 来控制的，因为 SPA 只有一个 HTML，所以当切换到不同的页面时，标题是不会发生变化的。必须通过 JavaScript 来修改 <title></title> 中的内容： ...[2019/4/8]

在项目中遇到了一个性能问题 vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下   2、如果我不想分页，又想在一页显示全部数据呢？...[2019/4/4]

具体代码如下所述： v-bind:title="me age" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v...[2019/4/2]

简单编写一个vue插件，当点击时触发notify插件，dom中出现相应内容并且在相应时间之后清除，我们可以在根组件中设定通知内容和延迟消失时间。 1. 基础知识 我们首先初始化一个vue项目，删除不需要的组件和样式，主要针对src下一些初始化资源，有过vue项目基础的应该很容易理...[2019/4/1]

终端运行命令 npm run build 打包成功的标志与项目的改变，如下图：  点击index.html，通过浏览器运行，出现以下报错，如图： 那么应该如何修改呢？ 具体步骤如下： 1、查看package.js文件的scripts命令 ...[2019/3/29]

1、首先需要按照Vue router支持 npm install vue-router 然后需要在项目中引入： import Vue from ''vue'' import VueRouter from ''vue-router'' Vue.use(VueRouter) ...[2019/3/29]

最近又在vue中捣鼓了下微信公众号api的接入，不得不说这里边水是真的深啊，上次分享了微信授权登录和js-sdk签名的部分，其中很多朋友私信我表示了疑惑，今天我就再次尝试理顺一下这里边的坑吧： 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-S...[2019/3/29]

每回遇到微信分享都是一个坑，目前的商城项目使用Vue开发，采用history的路由模式，配置微信分享又遇到了很多问题，最后终于解决了，现将解决的过程分享一下。 技术要点 Vue，history 常见问题及说明 debug模式下报false 这个没得说，就是调用wx.conf...[2019/3/29]

前端小菜鸟，因为项目要对接微信的j dk，对接就需要签名认证，但是无奈安卓和IOS各有各的坑，本篇文章只讨论签名，和一个分享的坑，希望大家有所收获，能够解决问题，如果解决不到，请麻烦在评论区留言，本文综合了所有的回答，才调试出来坑 需求： 使用微信的功能 原因： 1. 项目基于vue，在...[2019/3/29]