在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。
你可以将一些css样式抽象到指令中，也可以将一些js操作放到指令中去执行。就使用上来说，指令不用像组件一样需要引入和注册，注册后使用非常简洁方便。
对于在项目中常用到的指令，在此做了一个合集介绍。
元素点击范围扩展指令v-expandClick
使用该指令可以隐式的扩展元素的点击范围，由于借用伪元素实现，故不会影响元素在页面上的排列布局。
可传入的参数为：上右下左扩展的范围，单位px，默认向外扩展10px。
文本内容复制指令v-copy
使用该指令可以复制元素的文本内容（指令支持单击复制v-copy、双击复制v-copy.dblclick、点击icon复制v-copy.icon三种模式），不传参数时，默认使用单击复制。
元素全屏指令v-screenfull
全屏指令，点击元素进行全屏/退出全屏的操作。支持元素后面是否插入element-ui的全屏图标el-icon-full-screen。
元素说明指令v-tooltip
为元素添加说明，如同element-ui的el-tooltip（问号icon在鼠标覆盖后，展示说明文字）。
文字超出省略指令v-ellipsis
使用该指令当文字内容超出宽度（默认px）时自动变为省略形式。等同于使用css：
width:px;
whiteSpace:nowrap
overflow:hidden;
textOverflow:ellipsis;
回到顶部指令v-backtop
使用该指令可以让页面或指定元素回到顶部。
可选指定元素，如果不指定则全局页面回到顶部。可选在元素偏移多少px后显示backtop元素；还可以在模板中任何元素上使用新的元素v-backtopproperty。
也可以这样使用，表示为一直显示绑定指令的元素，并且是全局页面回到顶部：
divv-backtop回到顶部/div
空状态指令v-empty
使用该指令可以显示缺省的空状态。可以传入默认图片（可选，默认无图片）、默认文字内容（可选，默认为暂无数据）、以及标示是否显示空状态（必选）。
徽标指令v-badge
使用该指令在元素右上角显示徽标。
支持配置徽标的背景颜色、徽标形状；支持传入徽标上显示的数字。
拖拽指令v-drag
使用该指令可以对元素进行拖拽。
响应缩放指令v-resize
使用该指令可以响应元素宽高改变时执行的方法。
如何使用这些指令？
为了便于管理指令，我们将每个指令都存在于单独的js文件中，你可以像这样将指令import进来后注册指令：
或者你可以直接使用Vue.deirect进行注册。