vue中的自定义指令

最新推荐文章于 2020-12-25 17:50:45 发布
最新推荐文章于 2020-12-25 17:50:45 发布
阅读量106 收藏
点赞数
分类专栏： 前端 js vue 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42458965/article/details/108123474
版权
前端 同时被 3 个专栏收录
58 篇文章 1 订阅
订阅专栏
js
36 篇文章 1 订阅
订阅专栏
vue
14 篇文章 1 订阅
订阅专栏

vue中我们常见的指令有很多，v-if,v-model等等
那我们对指令的拓展，还有这自定义指令。它可以是全局的，也可以是局部的

全局的我们可以在入口处main.js中进行定义
在这里插入图片描述
使用
在这里插入图片描述
后台console打印的结果
在这里插入图片描述
对于各种属性的介绍，看官网

声明钩子函数
在这里插入图片描述
声明钩子函数中的参数

在这里插入图片描述
好的，那声明钩子函数的作用可以自己体会，选用。那么我们参考v-model,v-html,v-if。他其实是给我们绑定的dom上增加额外的操作，是我们声明指令的一种拓展

喂维围
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 中自定义指令改变data中的值
04-27
Vue 中自定义指令改变 Data 中的值 在 Vue 中，自定义指令是一种强大的功能，可以让开发者根据需要实现各种自定义的逻辑。在本文中，我们将讨论如何使用自定义指令来改变 Data 中的值。 什么是自定义指令？ 在 ...
vue自定义指令实现方法详解
10-17
Vue自定义指令提供了一种灵活的方式来扩展Vue的默认功能，使得我们可以更精确地控制DOM操作。通过定义不同的钩子函数，我们可以实现各种复杂逻辑，如事件监听、动画效果、DOM操作等。理解并掌握自定义指令的使用，...
vue使用自定义指令实现拖拽
10-16
主要为大家详细介绍了vue使用自定义指令实现拖拽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue自定义弹窗指令的实现代码
10-18
使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识，感兴趣的朋友一起看看吧
webpack中的publicPath配置
weixin_42458965的博客
09-12 9694
https://blog.csdn.net/weixin_30892889/article/details/95862624?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.c
css实现过度动画和平移的效果
weixin_42458965的博客
08-15 4513
在我们的css的属性中有transtion和transform两个属性 那我们的transform属性是对元素进行移动，旋转，缩放，2D/3D的切换等等操作 那我们的transtion就是对元素的过度动画的一个操作 官方网站上的demo例子： <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:blue; transition:width 2s;
vue的provide无法监听变化
weixin_42458965的博客
08-20 3026
vue中的provide可以进行父组件向后代组件进行传值。但是，他没办法监听传输数据的变化。或者说明白点，就是如果我在父组件改变注入的值，它没办法更新。子组件改变传入的值，它也没办法进行更新 上图，vue官方例子说明 但是这个一个可监听的对象，那么其对象的属性是可响应的是啥意思？ 可监听的对象，是vue中data中的数据，并且data中的数据是一个对象，如图。 那监听他的属性，就是监听testA里面的b值 当b的值改变的时候，这个是可以监听到的 看上面，显示的是2b2b2b，而不是初始值bbb了 所
let,const,var类型的简介
weixin_42458965的博客
11-14 2994
let,const,var类型是js中常用的。js这一门语言中，类型使用的是弱类型的语言。**它不需要特殊指定类型，在赋值使用的时候进行赋值，则会自动匹配类型。**并不是像C语言，java中那么严格。 语言的使用过程之中，规定有时候能够更好的约束。俗话说，没有规矩不成方圆。使用弱类型的语言，报错少，但是一旦发生逻辑上的错误，浏览器不会进行报错 。为你之后的开发埋下隐患。 let，有着块级作用域，可...
rem适配pc的弊端
weixin_42458965的博客
08-29 2971
https://imweb.io/topic/5745adf5a94f742c1db63485
var的变量提升
weixin_42458965的博客
08-16 2536
变量提升是var这个关键字的一个特性 但是它提升的只是申明，并不是赋值 例如： console.log(a) let a = 1; 他是会报错的，因为let没有变量提升的特性。console的时候，他没有找到a这个变量。所以他会报错 现在换成var console.log(a) var a= 1 他不会报错，但是会打印出undefined 翻译一下，上面的var,等同于下面这一段 let a ; console.log（a） a = 1 总结，所以说var的变量提升特性，只是声明这一步提前了，赋值这一步
请求头User-Agent有什么用？
weixin_42458965的博客
09-12 2513
User-Agent是一个特殊字符串头，是一种向访问网站提供你所使用的浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识，下面截图是火狐浏览器网络请求的时候控制台的截图
vue中data返回一个函数
weixin_42458965的博客
04-23 2113
function person() { return { name:"a", } }; var obj1 = person(); var obj2 = person(); obj1.name = 'b'; console.log(obj1); console.log(obj2); a=...
为什么不推荐for...in遍历数组
weixin_42458965的博客
09-28 1818
我们一般来说，使用for…in来遍历对象，使用for…of来遍历数组 我们强烈建议不要使用for…in来遍历数组 为什么？？？ 因为for…in遍历的是对象的key或者是数组的下标。当然最重要的原因是，他会到原型链上寻找，遍历其中新增加的属性的key值 for of遍历的是数组元素值, for in 遍历的是数组的索引（即键名） for of遍历的只是数组内的元素， for in 遍历的不只是数组内的元素，还有其新增的原型属性和索引 for of 遍历 Array.prototype.method=func
js函数实现参数默认值和可选参数的方法
weixin_42458965的博客
09-20 1683
// 定义时使用 = 进行赋默认值 function doSome({a,b=2,c}){ console.log(a,b,c); } //调用时使用：进行赋值，传递的是一个对象 doSome({a:5,c:22}) // 5 2 22 //参数列表方式 function doSome(a,b=2,c){ console.log(a,b,c); } doSome(5,22) // 5 2 22 ...
toFixed()返回类型
weixin_42458965的博客
10-28 1682
返回的是字符串 坑！！！
ios滑动区域卡顿和左右滑动，上下留白问题
weixin_42458965的博客
09-12 1413
ios滑动区域的卡顿
浅析vue3.0中的Proxy双向绑定
weixin_42458965的博客
11-04 941
Vue2.0中的双向绑定 使用object.defineProperty()进行双向绑定 缺点： 1无法对数组进行监听，采用的是对数组的方法进行重写（push, pop,shift,unshift等等）。对此进行双向绑定和数据监听的操作 2效率差，这主要是因为对多层数据进行一次性的递归操作，如果数据很多或者是很深层次，这样性能非常的差 3因为局限性，无法对新加/删除的数据进行监听，所以使用在vue2.0中使用$set进行手动添加 所以在vue3.0中使用的proxy代理的方式进行解决 使用proxy和Ref
vue中webpack配置理解
weixin_42458965的博客
08-15 932
webpack： 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 这是官网上的解析，翻译成人话就是： webpack是一个静态资源的打包器 首先，它会找到一个入口entry,从这个文件开始进行递归操作，把所有的依赖关系屡清楚，变成一个网状的结构 之后，在编译
head和option请求方式
weixin_42458965的博客
12-25 929
head和get方式是一样的，但是只是响应中只有响应头，没有返回数据 option方法，是一种“试探连接”（ping操作），并且放回当前url可以请求的方式（get,post等）
在vue中 自定义指令
最新发布
08-16
在Vue中，自定义指令是一种能够扩展已有的HTML元素或者Vue组件的功能的方式。你可以使用自定义指令来直接操作DOM、添加事件监听器、应用动画效果等。 要创建一个自定义指令，你可以使用Vue实例的`directive`方法。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值