python做博客网站,为什么这么多人嫌弃top域名,源码交易平台哪个最好,建设自己公司的网站一、理解自定义指令
在 vue 中提供了一些对于页面和数据更为方便的输出#xff0c;这些操作就叫做指令#xff0c;以 v-xxx 表示#xff0c;比如 html 页面中的属性 div v-xxx /div。自定义指令很大程度提高了开发效率#xff0c;提高了工程化水平#x…一、理解自定义指令
在 vue 中提供了一些对于页面和数据更为方便的输出这些操作就叫做指令以 v-xxx 表示比如 html 页面中的属性 div v-xxx /div。自定义指令很大程度提高了开发效率提高了工程化水平一定要认真学习。
vue3自定义指令
二、vue2 有哪些内置指令
序号指令解释1v-for基于源数据多次渲染元素或模板块。2v-on绑定事件监听器。3v-bind动态的绑定一个或多个attribute或一个组件prop到表达式。4v-model在表单控件或者组件上创建双向数据绑定。5v-slot提供具名插槽或需要接收prop的插槽。6v-pre跳过这个元素和它的子元素的编译过程。7v-cloak这个指令保持在元素上直到关联实例结束编译。8v-once只渲染元素或组件一次随后的渲染会将组件/元素以及下面的子元素当成静态页面不再渲染。9v-text更新元素的textContent10v-html更新元素的display属性11v-if根据条件渲染元素12v-else与v-if 或 v-else-if搭配使用13v-else-if与 v-if 或 v-else 搭配使用前一兄弟元素必须有 v-if 或 v-else-if。
三、vue2 指令修饰符
事件修饰符序号修饰符解释1.stop阻止事件冒泡相当于调用 event.stopPropagation()2.prevent阻止默认事件的触发相当于调用 event.preventDefault()3.capture使用事件捕获模式从外部元素开始触发事件然后再触发内部元素的事件4.self只有当事件在绑定的元素本身触发时才触发事件不会触发内部元素的事件5.once指令只会触发一次然后自动解绑。6.passive指示监听器永远不会调用 event.preventDefault()可以提高性能。7.native监听组件根元素的原生事件而不是组件内部的子元素上的事件。v-model修饰符序号修饰符解释1.trim自动去除输入内容的首尾空格2.number将输入的 value 值转为数字类型3.lazy将 input 事件改为 change 事件减少输入事件的频率按键修饰符序号修饰符解释1.enter监听键盘回车事件其他修饰符序号修饰符解释1.camel用于将绑定的特性名字转回驼峰命名 svg :view-box.camelviewBox/svg 上面的代码等价于 svg viewBox.../svg2.sync.sync修饰符是一个特殊的修饰符用于实现父子组件之间的双向数据绑定。
四、vue2自定义指令钩子
在 Vue 2 中当你创建自定义指令时你可以访问几个钩子函数这些钩子函数允许你在不同的指令生命周期阶段执行代码。序号钩子解释1bind1、当指令第一次绑定到元素上时调用。此时你可以执行一些初始化操作比如设置初始值或添加事件监听器。 2、这个钩子函数接收三个参数el指令所绑定的元素、binding一个对象包含指令的名称、值和其他属性、vnodeVue 编译生成的虚拟节点。2inserted1、当被绑定的元素插入到父节点中时调用。此时元素已经存在于 DOM 中你可以执行依赖于 DOM 的操作。 2、和 bind 钩子一样它也接收 el、binding 和 vnode 三个参数。3update1、当指令的绑定值发生变化时调用并且元素 DOM 也已经更新。 2、接收的参数和 bind 和 inserted 一样。4componentUpdated1、当组件的 VNode 及其子 VNode 更新后调用即组件的 DOM 已经更新。 2、这个钩子对于在更新之后的操作非常有用比如基于新的 DOM 状态重新计算位置或大小。5unbind1、当指令与元素解绑时调用此时可以执行一些清理工作比如移除事件监听器或清理计时器。 2、同样接收 el、binding、vnode 这些参数但 vnode 参数在大多数情况下是 undefined。
五、Nuxt2使用自定义指令方法
5.1、全局自定义指令方法一
5.1.1、创建目录directives
创建文件directives/highlight.js
// eslint-disable-next-line import/no-extraneous-dependencies
import Vue from vueVue.directive(highlight, {// 当被绑定的元素插入到 DOM 中时inserted (el, binding) {// 获取指令的绑定值const color binding.value || yellow;// 应用样式到元素el.style.backgroundColor color;},// 当绑定值更新时update (el, binding) {// 更新元素的背景颜色el.style.backgroundColor binding.value || yellow;}
})5.1.2、nuxt.config.js配置
nuxt.config.js文件中找到plugins
plugins: [{{ src: ../m-front-common/pc/directives/highlight, mode: client },}
]
5.1.3、页面使用
templatedivp v-highlightred这段文字的背景色会被设置为红色。/p/div
/template
script
/script
style langless scoped
/style验证成功 5.2、全局自定义指令方法二
5.2.1、创建目录directives
5.2.2、创建文件directives/highlight.js
export default {name: highlight,install(Vue) {Vue.directive(highlight, {bind (el, binding) {// 获取指令的绑定值const color binding.value || yellow;// 应用样式到元素el.style.backgroundColor color;},// 当绑定值更新时unbind (el, binding) {// 更新元素的背景颜色el.style.backgroundColor binding.value || yellow;}})}
}
5.2.3、创建文件directives/index.js
// eslint-disable-next-line import/no-extraneous-dependencies
import Vue from vue
import highlight from ./highlightVue.use(highlight)
5.2.4、nuxt.config.js配置
nuxt.config.js文件中找到plugins
plugins: [{{ src: ../m-front-common/pc/directives/index},}
]
5.2.5、页面使用
templatedivp v-highlightred这段文字的背景色会被设置为红色。/p/div
/template
script
/script
style langless scoped
/style5.3、局部自定义指令 / 页面自定义指令方法三
templatedivdiv v-colorred文字颜色/div/div
/template
script
export default {directives: {color: {bind: (el, binding) {el.style.color binding.value || blue;}}}
}
/script
style langless scoped
/style验证成功 六、Nuxt2使用自定义指令DEMO
6.1、v-focus
当输入表单时可以使表单第一项自动获取焦点减少一个操作步骤。
export default {name: focus,install(Vue) {Vue.directive(focus, {inserted (el) {el.focus()}})}
}
6.2、v-color
export default {name: color,install(Vue) {Vue.directive(color, {bind (el, binding) {// 获取指令的绑定值const color binding.value || yellow;// 应用样式到元素el.style.color color;},unbind (el, binding) {el.style.color binding.value || yellow;}})}
}
6.3、v-copy
import { Message } from element-uiexport default {name: copy,install(Vue) {Vue.directive(copy, {inserted(el) {el.addEventListener(click, () {const textarea document.createElement(textarea);el.style.cursor pointer;textarea.value el.innerText;document.body.appendChild(textarea);textarea.select();document.execCommand(copy);document.body.removeChild(textarea);Message.success(复制成功)})}})}
}
6.4、highlight
export default {name: highlight,install(Vue) {Vue.directive(highlight, {bind (el, binding) {// 获取指令的绑定值const color binding.value || yellow;// 应用样式到元素el.style.backgroundColor color;},// 当绑定值更新时unbind (el, binding) {// 更新元素的背景颜色el.style.backgroundColor binding.value || yellow;}})}
}
6.5、lazyLoad
export default {name: lazyLoad,install(Vue) {Vue.directive(lazyLoad, {inserted (el) {// 自动监听元素是否进入了设备的可视区域之内const observer new IntersectionObserver(entries {entries.forEach(entry {if (entry.isIntersecting) {const img entry.targetimg.src img.dataset.srcobserver.unobserve(img)}})})observer.observe(el)}})}
} 页面使用验证成功
img v-lazyLoad data-srchttps://www.abc.com.cn/img/6376d08.png styleheight:50px; /
6.6、dialogDrag
// Element-Dialog 弹窗可拖动
export default {name: dialogDrag,install(Vue) {Vue.directive(dialogDrag, {bind(el) {const dialogHeaderEl el.querySelector(.el-dialog__header);const dragDom el.querySelector(.el-dialog);dialogHeaderEl.style.cursor move;// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);const sty dragDom.currentStyle || window.getComputedStyle(dragDom, null);dialogHeaderEl.onmousedown e {// 鼠标按下计算当前元素距离可视区的距离const disX e.clientX - dialogHeaderEl.offsetLeft;const disY e.clientY - dialogHeaderEl.offsetTop;// 获取到的值带px 正则匹配替换let styL;let styT;// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为pxif (sty.left.includes(%)) {styL document.body.clientWidth * (sty.left.replace(/%/g, ) / 100);styT document.body.clientHeight * (sty.top.replace(/%/g, ) / 100);} else {styL sty.left.replace(/\px/g, );styT sty.top.replace(/\px/g, );}// eslint-disable-next-line no-shadowdocument.onmousemove function(e) {// 通过事件委托计算移动的距离const l e.clientX - disX;const t e.clientY - disY;// 移动当前元素dragDom.style.left ${l styL}px;dragDom.style.top ${t styT}px;// 将此时的位置传出去// binding.value({x:e.pageX,y:e.pageY})};document.onmouseup function() {document.onmousemove null;document.onmouseup null;};};}})}
} 七、推荐vue指令插件
7.1、vue-lazyload npm install vue-lazyload 七、欢迎交流指正
