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——自定义组件 & 自定义事件$emit & 插槽slot
局部注册的组件，只能在当前Vue实例中使用，并且在其子组件中不可用。
在 components 选项中定义局部组件。每个组件就是一个小型的Vue实例，它里面除了不能设置el选项，其他选项它都有。
组件名称： 自定义，可以使用驼峰命名方式或者短横线的命名方式，但是需要注意的是如果应用到DOM中，就只能用短横线命名的方式，否则就会报错。注意组件的名称不要跟原生html元素重名。
template选项： 定义组件的模板。模板中必须包含一个根标签。
props选项： 定义组件标签上的属性。驼峰命名法的 prop 名（postTitle）需要使用其等价的短横线分隔命名法（post-title）命名。注意：props是只读的，不能修改（ 解决办法： 在data中对props接收到的数据进行中转）。
data： 定义组件的数据。注意：Vue实例的data选项可以是一个对象，也可以是一个方法，由该方法返回一个对象。 但是在组件中，data选项必须是一个方法，由该方法返回一个对象。因为组件可能会使用很多次，如果data选项是对象的话，会导致多个组件使用了同一份数据。
全局注册的组件可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。
使用 Vue.component 来创建全局组件。Vue.component的第一个参数就是组件名。
$emit()用于触发自定义事件。注意：事件名称中不能采用大写字母。
效果：
效果：
slot 用于在组件的内部定义插槽，组件标签之间的所有html内容，会在插槽所在位置呈现。
效果：
2019-07-10 在vue UI组件事件中 基于已有参数 灵活自定义传参
比如on-success如果这个是UI组件的一个事件：
@on-success=”handleSuccess”
那么我们在handleSuccess这个函数里是这样接收的：
那么我们可以这样：
修改成 @on-success=”handleSuccess($event, 自定义参数1，自定义参数2)”
修改成 @on-success=”(组件回调参数1,组件回调参数2)= handleSuccess(组件回调参数1,组件回调参数2,自定义参数1，自定义参数2)”
Vue的组件,过滤器，自定义指令以及v-if
div class="app"
h1 v-show="false"我爱你/h1
v-if是直接将dom删除了，在dom文档中已经找不到对应的dom，变成了注释
h1 v-if="false"我爱你/h1
如果频繁使用 就使用v-show 可以节约性能开销
如果短暂使用，例如页面一开始加载的时候进行判断显示 优先使用v-if
实际开发中，使用v-if比较多
li v-for="(item,index) in arr"{{item}}/li
/div
script src="./node_modules/vue/dist/vue.js"/script
script
new Vue({
el: '.app',
data: {
msg: 123,
list: [1, 2, 3]
},
computed: {
arr: function () {
return this.list.filter(r = r 1)
}
},
methods: {
}
})
/script
div class="app"
child1/child1
divchild-a//div
divchild-b//div
template id="childB"
div
h1我是程序员/h1
h1我是程序员/h1
/div
/template
/div
script src="./node_modules/vue/dist/vue.min.js"/script
script
Vue.component('child1',{
template:`h1我是child1/h1`
})
Vue.component('childA',{
template:`h1我是childA/h1`
})
Vue.component('childB',{
template:'#childB'
})
new Vue({
el:'.app'
})
/script
div class="app" v-cloak
h1{{'我爱张sir'|str('金牌厨师')}}/h1
h1{{'hello'|he}}/h1
/div
script src="./node_modules/vue/dist/vue.js"/script
script
Vue.filter('fn',function(v,s){
console.log(v);
return v/* .substring(0,v.indexOf(':')) */+s
})
new Vue({
el:'.app',
/* 局部过滤器 */
filters:{
str(v,s){
return v+s
},
he(v){
return v.split('').reverse().join('')
}
}
})
当页面刷新的时候data中的数据还没有渲染出来，页面中就会显示原本写的插值语法，这时候就需要消除这个bug
在绑定的实例化对象的元素上上添加v-cloak 并在style样式中添加（只要前面加上v-都可以实现，随意命名，通常使用clock）
display: none;
}
div class="app"
input type="text" v-bg
input type="text" v-focus="{background:'yellow'}"
div style="width: 100px;height: 100px;" v-bg/div
p v-sty="{background:'pink',color:'yellow'}"我是程序员/p
/div
script src="./node_modules/vue/dist/vue.js"/script
script
Vue.directive('bg', function (el) {
/* 回调的第一个参数就是元素本身 */
console.log(el);
el.style.background = 'red'
})
/* 全局自定义指令 写全方式 */
Vue.directive('focus', {
/* 当绑定元素插入到DOM中 */
inserted: function (el, bind) {
el.focus();
console.log(bind);
el.style.background = bind.value.background
}
})
new Vue({
el: '.app',
/* 局部的自定义指令 要加s */
directives: {
sty: {
inserted (el, bind) {
el.style.background = bind.value.background;
el.style.color = bind.value.color
}
}
}
})
vue自定义指令回掉如何实现
Vue自定义指令回调如何实现？Vue自定义指令想要回调的话，还是很简单的，只要把他的回复义给打开，完事点撤回就可，可能把自定义指令给撤回来，但是如果还是自动撤不回来的话，你就需要把你的设备关，你以后关机以后重启完事再把自定义的指令给撤回就可以了