VUE自定义指令的配置和传参

最新推荐文章于 2024-05-28 16:45:45 发布
最新推荐文章于 2024-05-28 16:45:45 发布
阅读量1.4k 收藏
点赞数
文章标签： vue vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44822110/article/details/104782945
版权

VUE自定义指令的配置和传参

新增传参封装
binding.value：值为html页面v-pin设置的值
binding.modifiers：值为v-pin.bottom.right的 bottom right值 是写在v-pin用 . 连接的值
binding.arg：值为v-pin:true.bottom.right的 true值 是写在v-pin用 : 连接的值
HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令的配置和传参</title>
    <style>
        .card {
   
            width: 200px;
            background-color: #ccc;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="seg1">
        <div v-pin:true.bottom.right="card1.pinned" class="card">
            <button @click="card1.pinned=!card1.pinned">定住/取消</button>
            Lorem ipsum d
最低0.47元/天 解锁文章
吃瓜的阳大王
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue slot与传参实例代码讲解
11-28
本文将深入讲解Vue中的插槽及其传参功能。 ### 默认插槽（Default Slot） 默认插槽是最基础的插槽类型，用于向子组件注入内容。在父组件中，我们可以直接在子组件标签内放入需要展示的内容，这部分内容将会被替换...
vue2+vue3学习笔记
02-20
也可以自定义指令来满足特定的需求。 minin minin 是一个小型的 Vue 项目，用于快速构建 Vue 应用程序。 todolist 编辑功能 todolist 编辑功能可以使用 `@blur` 获取到焦点时，里面的业务逻辑。 Vue3 的 watch ...
Vue中自定义指令（防止按钮重复提交）
m0_50832030的博客
08-31 923
第一步、新建一个文件，directive.js // 阻止按钮重复提交 import Vue from 'vue' // 阻止按钮重复提交 Vue.directive("button", { bind: function (el, binding, vnode) { // 每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次 function clickHandler(e) { // 这里判断点击的元素是否是本身，是本身，则返回
vue自定义指令传值
weixin_49866713的博客
08-26 294
自定义指令传值
Vue的自定义指令
最新发布
m0_67584973的博客
05-28 888
带你了解Vue的自定义指令以及如何局部注册和全局注册自定义指令。
自定义指令传参
qq_35438359的博客
04-17 661
&lt;div v-pin:xxx.bottom.right="card1.pinned" :class="liked"&gt;111 &lt;button @click="card1.pinned = !card1.pinned"&gt;&lt;/button&gt; &lt;/div&gt;Vue.directive('pin',function (el,binding)
vue3.x的自定义指令动态指令参数
webMinStudent的博客
02-12 3833
1.vue3.x的自定义指令参数 import { createApp } from 'vue'; import App from './App.vue'; app.directive('time', { created() { console.log('created生命周期函数') }, beforeMount:(el) => { // console.log(binding, '什么') el.style.color = '
封装v-loading全局自定义指令
hmxs_hmbb的博客
11-08 4171
v-loading自定义指令封装
自定义指令函数传参
xiaojinglyd的博客
01-27 1404
环境： vue@2.6.6 问题： 绑定函数传参 传参多个多样 参数动态变化 方案： 1. 采用传对象方式(binding.value) <el-button v-mydirective="{ fn: myFn, args: x }" type="text" size="small">测试</el-button> const mydirective = { inserted: function (el, binding) { const args = bindin
VUE点击消息弹窗4种滑动效果，外部动态传参
12-29
在这个场景中，我们看到一个项目利用Vue、JavaScript（简称为js）和jQuery（简称为jq）实现了四种不同的滑动效果，用于创建具有动态参数传递功能的消息弹窗。下面将详细探讨这些知识点： 1. **Vue组件化开发**： ...
vue面试文档，包含技术要点和面试编程
01-02
文档分为 13 章，包括 Vue.js 基础知识、组件化开发、路由管理、状态管理、HTTP 请求、单元测试、插槽、Mixins 和自定义指令、进阶题、Vue 3 新特性、开放性问题、项目经验讨论和 Vue.js 生态系统等。 在技术要点...
vue2+vue3笔记
07-14
十四、内置指令与自定义指令 vue实例与组件实例的关系。 十五、minin、todolist 编辑功能 @blur 获取到焦点时，里面的业务逻辑。 十六、Vue3 的 watch 再看一下。 十七、Vue 的模板语法 v-bind：动态绑定，单向...
vue学习（6）自定义指令详解及常见自定义指令
qq_39404437的博客
07-30 2586
vue学习（6）自定义指令详解及常见自定义指令
Vue自定义指令获取不到参数的原因
woshihedayu的博客
01-28 2432
最近在学习前端的权限管理，需要根据用户的权限对按钮进行显示和隐藏，用到了vue中的自定义指令。 首先，在permission.js中定义如下函数 // 检查是否有权限点 export function hasPermissionPoint(point) { let points = store.getters.roles.points if (points) { return points.some(it => it.toLowerCase() === point.toLowerCas
VUE常用的自定义指令
从0到1的成长的博客
12-15 1348
v-directives 基于 vue 的自定义指令集合，包含 复制粘贴指令 v-copy 长按指令 v-longpress 输入框防抖指令 v-debounce 禁止表情及特殊字符 v-emoji 图片懒加载 v-LazyLoad 权限校验指令 v-premission 实现页面水印 v-waterMarker 拖拽指令 v-draggable v-copy 需求：实现一键复制文本内容，用于鼠标右键粘贴。 思路： 动态创建 textarea 标签，并设置 readOnly 属性及移
Vue.js火速上手第十五章——Vue自定义指令之配置传参及修饰符
tangdaren2的博客
06-22 278
一、自定义v-pin指令 给v-pin添加top.right修饰符 <div v-pin.top.right="card2.pinned" class="card"><a href="#" @click="card2.pinned=!card2.pinned"> 钉住/取消2</a>select *from paymentlog where businessno='DZBV202021020000002121 '; </div> 在main.js
vue全局自定义指令和局部自定义指令
热门推荐
kingov
10-20 1万+
局部自定义指令(只针对组件内的元素) 定义全局自定义指令 自定义指令的钩子函数 自定义指令钩子函数的参数 例子 除了默认设置的核心指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 局部自定义指令(只针对组件内的元素) 父组件app.vue &lt;template&gt; &lt;div id="app"&gt; &lt;tes...
Binding介绍
weixin_30747253的博客
03-08 612
一.Binding的源与路径 在大多数情况下Binding的源是逻辑层的对象，但有时候为了让UI元素产生一些联动效果也会使用Binding在控件间建立关联， 下面的代码是把一个TextBox的Text属性关联在了Slider的Value上 <Window x:Class="MyBinding.WindowBinding" xmlns="http://schemas...
前端应用_Vue_钩子函数的练习之使用binding 取传递的值
上海 彭彭
08-09 1578
前面写 focus 方法， 也说了 必须用 inserted ，因为你bind 只是创建的过程，但是你没有 insert dom页面， 还是没有生成页面效果， 下边我们创建自定义的 的样式 就不需要插入了， 因为他直接可以读取并显示。 总结： 自定义行为 要用inserted ，自定义样式 要用 bind 就行了 我们想创建一个color 样式如下： <input ty...
vue3自定义指令函数传参
07-29
在 Vue 3 中，你可以通过自定义指令函数的参数来传递数据。以下是一个示例： ```javascript // 定义自定义指令 app.directive('my-directive', { mounted(el, binding) { // 从 binding.value 中获取传递的参数 const { arg, value } = binding; // 执行自定义逻辑，使用传递的参数 console.log(`arg: ${arg}`); console.log(`value: ${value}`); } }) // 在模板中使用自定义指令，并传递参数 <template> <div v-my-directive:argName="value"></div> </template> ``` 在上面的示例中，通过 `v-my-directive:argName="value"` 将 `argName` 和 `value` 作为参数传递给自定义指令的 `mounted` 钩子函数。你可以在钩子函数中通过 `binding` 对象的 `arg` 和 `value` 属性来获取这些参数。 请注意，在 Vue 3 中，自定义指令的钩子函数名称已经改变，`bind`、`inserted`、`update` 和 `componentUpdated` 这些钩子函数都统一使用 `mounted` 钩子函数来代替。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值