8个非常实用的Vue自定义指令
在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。
Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。
批量注册指令，新建 directives/index.js 文件
在 main.js 引入并调用
指令定义函数提供了几个钩子函数（可选）：
下面分享几个实用的 Vue 自定义指令
需求：实现一键复制文本内容，用于鼠标右键粘贴。
思路：
使用：给 Dom 加上 v-copy 及复制的文本即可
需求：实现长按，用户需要按下并按住按钮几秒钟，触发相应的事件
思路：
使用：给 Dom 加上 v-longpress 及回调函数即可
背景：在开发中，有些提交保存按钮有时候会在短时间内被点击多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增表单的提交按钮，多次点击就会新增多条重复的数据。
需求：防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。
思路：
使用：给 Dom 加上 v-debounce 及回调函数即可
背景：开发中遇到的表单输入，往往会有对输入内容的限制，比如不能输入表情和特殊字符，只能输入数字或字母等。
我们常规方法是在每一个表单的 on-change 事件上做处理。
这样代码量比较大而且不好维护，所以我们需要自定义一个指令来解决这问题。
需求：根据正则表达式，设计自定义处理表单输入规则的指令，下面以禁止输入表情和特殊字符为例。
使用：将需要校验的输入框加上 v-emoji 即可
背景：在类电商类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验，所以进行图片懒加载优化势在必行。
需求：实现一个图片懒加载指令，只加载浏览器可见区域的图片。
思路：
图片懒加载有两种方式可以实现，一是绑定 srcoll 事件进行监听，二是使用 IntersectionObserver 判断图片是否到了可视区域，但是有浏览器兼容性问题。
下面封装一个懒加载指令兼容两种方法，判断浏览器是否支持 IntersectionObserver API，如果支持就使用 IntersectionObserver 实现懒加载，否则则使用 srcoll 事件监听 + 节流的方法实现。
使用，将组件内 标签的 src 换成 v-LazyLoad
背景：在一些后台管理系统，我们可能需要根据用户角色进行一些操作权限的判断，很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。针对这种情况，我们可以通过全局自定义指令来处理。
需求：自定义一个权限指令，对需要权限判断的 Dom 进行显示隐藏。
思路：
使用：给 v-permission 赋值判断即可
需求：给整个页面添加背景水印
思路：
使用，设置水印文案，颜色，字体大小即可
需求：实现一个拖拽指令，可在页面可视区域任意拖拽元素。
思路：
使用: 在 Dom 上加上 v-draggable 即可
VUE中如何用代码定义View
1、打开VUE，新建项目命名为View。
2、新建目录命名为components。
3、新建vue文件命名为listView。
4、listView.vue文件编辑代码。
5、在index.vue文件编辑代码。
6、最后将设置的代码放到VUE中，这样VUE中就可以用代码定义View。
使用Vue父子组件通信实现todolist的功能示例代码
先上代码
body
div
id="root"
div
input
v-model="inputValue"
/
button
@click="handleClick"submit/button
/div
ul
todolist
v-for="(item,index)
of
list"
:key="index"
:content="item"
:index="index"
@delete="handle"
/todolist
/ul
/div
script
Vue.component("todolist",{
props:
['content','index'],
template:
'li
@click="handleDelete"{{content}}/li',
methods:
{
handleDelete:function(){
this.$emit('delete',this.index)
}
}
})
new
Vue({
el:"#root",
data:
{
inputValue:'',
list:[]
},
methods:
{
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handle:function(index){
this.list.splice(index,1)
}
}
})
/script
/body
创建todolist的基本结构
div
id="root"
div
input
v-model="inputValue"
/
button
@click="handleClick"submit/button
/div
ul
todolist
v-for="(item,index)
of
list"
:key="index"
:content="item"
:index="index"
@delete="handle"
/todolist
/ul
/div
在这里我们创建了一个todolist标签作为父组件，让它在里面循环遍历list作为我们的输出，同时定义了一个delete的监听事件。
接下来在script标签里定义子组件
Vue.component("todolist",{
props:
['content','index'],
template:
'li
@click="handleDelete"{{content}}/li',
methods:
{
handleDelete:function(){
this.$emit('delete',this.index)
}
}
})
定义了一个全局类型的子组件，子组件的props选项能够接收来自父组件数据，props只能单向传递，即只能通过父组件向子组件传递，这里将上面父组件的content和index传递下来。
将li标签作为子组件的模板，添加监听事件handleDelete用与点击li标签进行删除。
在下面定义子组件的handleDelete方法，用this.$emit向父组件实现通信，这里传入了一个delete的event，参数是index，父组件通过@delete监听并接收参数
接下来是Vue实例
new
Vue({
el:"#root",
data:
{
inputValue:'',
list:[]
},
methods:
{
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handle:function(index){
this.list.splice(index,1)
}
}
})
handleClick方法实现每次点击submit按钮时向list里添加值，在每次添加之后将输入框清空。
而handle方法则是点击删除li标签，这里通过接受传入的index参数来判断点击的是哪一个li
这是删除前：
这是删除后：
总结：
通过点击子组件的li实现向外触发一个delete事件，而父组件监听了子组件的delete事件，执行父组件的handle方法，从而删除掉对应index的列表项，todolist中的list对应项也会被删除掉。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
您可能感兴趣的文章:Vue中父子组件通讯之todolist组件功能开发Vue从TodoList中学父子组件通信详解Vue的computed(计算属性)使用实例之TodoListvue实现ToDoList简单实例利用vue写todolist单页应用vue组件编写之todolist组件实例详解vue2的todolist入门小项目的详细解析使用Vue完成一个简单的todolist的方法Vue.js实现简单ToDoList
前期准备（一）vue实现留言板todolist功能