Swampis的博客

##一、使用场景​最近开发一个项目，有一个需求，实现弹出框可拖拽可放大缩小。翻阅vue2官方文档和问度娘，发现可以用vue的自定义指令实现，所以把挣个过程记录在这篇文章中，供其它小伙伴参考使用。##二、自定义指令基础知识​当我们在开发过程中需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。自定义指令的钩子函数及其参数，且看官方文档介绍：一个指令定义对象可以提供如下几个钩子函数(均为可选)：bind：只调用...

话不多说直接贴代码，有需要的小伙伴可以拿去直接用。<template> <div class="newmap"> <div class="map" id="map" onselectstart="return false"> <div id="swipeContainer" @mousemove="move"> <div id="swipeDiv">

vue项目中引用其它框架时在某些页面老是崩溃和卡顿，一般Vue项目内存泄露常发生在某些地方我们引用的第三方库自己创建和维护了DOM，所以Vue在页面卸载时虽然这些对象的引用都释放了，但是因为这些对象自身关联了DOM所以内存无法释放，但是我们项目中已经在destroyed 阶段做了内存释放。不要轻易把框架中的对象放在data中监听，因为在data中的变量 ，vue会劫持数据 ，导致迟缓。 vue组件的data选项，只存储和UI关联的数据，没关联的一定不要存储在data选项里面，提出Vue对象作用域。

1.注意es6引入的方式。有可能引入接口错误。2.刚开始考虑是layerswitch插件引入有冲突的问题。

vue的monted函数中，在多个dom中定义完相应map对象后，应当将该组件渲染后，在进行隐藏，以便下次调用渲染完后的map;

使用场景分析，要求提交数据表中修改的某行数据，实时刷新该行数据的状态，该行的某条属性是根据条件渲染的。el-table部分：<el-table-column label="关联状态" width="100"> <template slot-scope="scope"> <el-tag :type="scope.row.status === 'true' ? 'success' : 'info'" ...

<el-table-column label="当前" prop="status"> <template slot-scope="scope"> <span :style="{ color: scope.row.status === 1 ? '#cccccc' : '#ED3F14' }">{{ scope.row.status === 1 ? '男' : '女' }}</span> </template>.

#### 双向数据绑定的方式+发布-订阅者模式（backbone.js） 一般通过pub、sub的方式来实现数据和视图的绑定，但是使用起来比较麻烦+脏值检查(angular.js) angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图。类似于通过定时器轮训检测数据是否发生了改变。+数据劫持 vue.js 则是采用数据劫持结合发布者-订阅者模式的...