Vue自定义指令介绍

【自定义指令灵魂三问】

是什么：是程序员在vue中自己定义的指令，用在标签上

为什么：为了获取标签，扩展额外的功能（vue自带的指令不能满足我们的需求时用）

怎么用：全局使用 和 局部使用

1.全局自定义指令

代码位置：main.js文件中

语法结构：

Vue.directive("指令名",{"inserted" (el){//对el进行的操作}
})

2.局部自定义指令

代码位置：任意组件中使用，与data同级

语法结构：

directives:{"自定义指令名字":{inserted(el){//对el进行操作}}
}

案例：

提问：如何在页面加载的时候自动让组件聚焦

没学自定义指令前：

mounted(){document.querySelector('#ipt').focus()
}

学了自定义指令后：

<template><div><input v-focus type="text" /></div>
</template>
<script>
export default {directives:{  //局部自定义指令，用于当前组件focus:{inserted(el){  //inserted是一个钩子函数console.log(el) //el是当前指令绑定的元素对象el.focus()}}}
}
</script>

全局自定义指令与局部自定义指令差不多，最大的区别就是在main.js中定义后，可以全局调用

小结：

1. 自定义指令是我们自己写的一个指令，可以写在当前组件或写在入口文件中（或者另外封装到组件中）

2. 自定义指令一般是当原有指令满足不了自己的需求时使用

3. 自定义指令的时候会创建一个钩子函数 inserted

Vue自定义指令介绍相关推荐

Vue自定义指令介绍及原理
Vue自定义指令 Vue指令: 在使用Vue框架进行前端开发时,我们经常会使用一些特殊指令来快速实现一些效果或功能. 常见指令如:v-bind.v-if (v-else).v-show.v-html等 ...
超实用：Vue 自定义指令合集
大家好,我是漫步前面我已经分享过一篇"分享8个非常实用的Vue自定义指令"文章,里面教了大家如何使用自定义指令,以及几个使用的指令,下面这篇文章也是类似内容,希望你会喜欢.记得查 ...
Vue自定义指令及实现图片懒加载指令
一. 速识概念: 在我们使用 Vue 的过程中,遇到了很多方便我们操作的vue内置指令,以 v-xxx 表示.比如有 v-module,v-for,v-if,v-show 等等,每个指令都能实现一 ...
vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
vuejs 指令封装 button 加载效果_这些Vue自定义指令，让你的项目开发爽到爆
受 AngularJS 的启发,Vue 内置了一些非常有用的指令(比如v-html 和 v-once等),每个指令都有自身的用途.完整的指令列表可以在这里查看. 这还没完,更棒的是可以开发自定义指令. ...
vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
pyqt5 treeview鼠标右键菜单事件_【动手实践】使用 Vue 自定义指令实现右键菜单...
本文来自于神奇的程序员前言浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就 ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
html标签outclick,vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: 一般在需要 DOM 操作时我们都需要使用自定义指令的方式去实现,当然一些特殊的事件监听也可以使用指令,例 ...

Vue自定义指令介绍

Vue自定义指令介绍相关推荐

最新文章

热门文章