如果要演示，直接复制粘贴代码即可。案例二模仿v-show函数（全局自定义命令）效果图。请看下面的效果图。功能其实和v-show没有区别。举这样一个例子，方便更好的理解vue自定义指令。第一步是创建一个新的utils文件夹来存储index.js文件。该文件用于编写全局自定义指令//importvue并使用vue的directive方法注册自定义指令importVuefrom'vue'Vue.directive('showshow',{//指令名称为showshow//bind函数一般用于初始化数据，也可以绑定事件bind(el,binding,vnode){console.log(el,binding.value,vnode);//el参数为的元素当前使用的命令，bind参数为命令绑定的数据，vnode为虚拟domconstflag=binding.value//查找组件中绑定的flagif(flag==false){el.style.display='无'}else{el.style.display='inline-block'}},//inserted函数是调用inserted(el,binding,vnode){},//update和componentUpdated用于更新，但前者更常用，oldVnode参数只用在这两个会有componentUpdated(el,binding,vnode,oldVnode){},update(el,binding,vnode,oldVnode){constflag=binding.valueif(flag==false){el.style.display='none'}else{el.style.display='inline-block'}},//unbindunbind时使用，比如移除第一个bind中绑定的事件functionunbind(el,binding,vnode){}});第二步，在main.js中引入这个用于编写全局自定义指令的文件（意思是使用它）importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom"@/router/index.js"//引入路由表importstorefrom'./store/index'//引入vuex//...//引入即可使用全局自定义指令^_^import'./views/utils/index.js'letvvvue=newVue({render:h=>h(App),router,store//mountup}).$mount('#app')第三步在组件中使用全局自定义命令是道友说的吧？这不是多余的吗？其实不是，因为我没有遇到过具体的场景。以上两个例子主要是学习自定义指令的思想。接下来举个小例子，点击文字一键复制功能。案例3实现v-copy自定义命令的渲染点击复制成功，然后在电脑相应位置执行CtrlV直接粘贴点击的文字。第一步是编写自定义命令代码importVuefrom'vue'Vue.directive('copy',{//指令的名称是v-copy//bind函数初始化bind(el,binding,vnode){},//inserted函数调用inserted(元素插入dom节点时的el,binding,vnode){//el参数为当前使用命令的元素，bind参数为绑定的数据命令，vnode为虚拟dom//将copyFn函数挂在el上，方便使用el.copyFn=()=>{console.log('点击了哪个DOM',el);//创建选中范围varrange=document.createRange();//选择被点击的domrange.selectNode(el);//移除剪贴板如果不加这条语句，则无法在ie和Edge中复制window.getSelection().removeAllRanges();//将el中的文本内容复制到剪贴板window.getSelection().addRange(range);//启用复制粘贴功能letflag=document.execCommand('copy');//支付注意补偿可用性问题标志？alert('复制成功，可以粘贴'):alert('当前浏览器不支持一键复制功能，请手动复制粘贴')}el.addEventListener('click',el.copyFn)},//更新和componentUpdated用于更新，但前者更常用//oldVnode参数只会在这两个hook中可用，更新后会有更新前后的DOMcomponentUpdated(el,binding,vnode,oldVnode){console.log('componentUpdated');},update(el,binding,vnode,oldVnode){console.log('update');},//unbindunbind时使用，比如移除unbind中绑定的第一个bind函数Events(el,binding,vnode){el.removeEventListener('click',el.copyFn)}});/***为了快速上手自定义命令钩子，我们可以这样简单理解**bind和insertedhooks-->类似于createdandmountedhooks*componentUpdatedandupdatehooks-->类似于updatedhooks*类似于unbindhooks-->destroyedhooks**可以复制代码运行后打印出来it，比较详细方便准确理解**/第二步使用