Vue中全局指令传递参数

最新推荐文章于 2024-06-28 11:34:03 发布
最新推荐文章于 2024-06-28 11:34:03 发布
阅读量998 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45616246/article/details/105396744
版权

请陛下批阅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令传递参数</title>
    <script src="../../vue/vue.js"></script>

</head>
<body>
<div id="app">

    <!--注意: 传递的参数是字符串的时候要用 '' 包起来,否则会当做Vue实例中的变量处理-->
    <input v-color="'blue'" placeholder="这是个有颜色的输入框">
</div>
</body>
<script>

    Vue.directive('color', {
        bind: function (el, binding) {
            // 一般和样式有关的都写在 bind 函数中
            // el.style.color = 'red';
            el.style.color = binding.value;
            /**
             * binding:
             *  - name: "color"         指令名称(不包含前缀)
             *  - rawName: "v-color"    指令名称(包含前缀)
             *  - value: "blue"         传递的参数
             *  - expression: "'blue'"  传递的参数字符串
             */
            console.log(binding);
        },
        inserted: function(el) {
            // 一般行为有关的指令都写在 inserted 函数中
            el.focus(); // 加载页面获取焦点
        }
    });
    var vm = new Vue({
        el: '#app'
    });
</script>
</html>
键盘的打工仔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2中自定义指令传参和不传参的使用
Rised的博客
01-07 1514
以下是效果,因为我这里使用了v-if的让其动态显示就是为了查看bind和unbind的效果，此时ss指令还没有，所已没有效果。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。以下是我的自定义指令的代码，有两个。bind：只调用一次，指令第一次绑定到元素时调用。在这里我只用到了自定义指令中的bind，insert和unbind。这是不带参数的代码，就修改了两处，一处使自定义指令处的代码。这是使用自定义指令的vue文件 注意这里使用了参数。元素消失，指令自然也就不存在了。
VUE组件间参数传递样例
01-17
本示例将深入探讨如何在Vue组件之间传递参数，包括props、事件、Vuex等常见方法，以及一些高级技巧。 1. **Props向下传递** Props允许父组件向子组件传递数据。在子组件中定义prop属性，然后在父组件中通过属性...
vue全局属性的传值（非store传值）
weixin_34113237的博客
07-26 227
全局data中的值传递（main.js文件） // main.js文件定义eventHub值 data: { eventHub: new Vue(), }, // 设置传入全局eventHub中的值，getCardAccount为自定义函数 getCardAccount中的值为 111 this.$root.eventHub.$emit( "getCardAccount",...
vue 中，自定义指令，带参数
最新发布
u012332319的博客
06-28 300
el-input v-else v-model="formData.tradeTotal" :placeholder="申报总价" maxlength="20" v-input-restrict:[2]="tradeTotalChange" ></el-input>// 默认小数点后两位，如果未传递参数则默认为 2。// 手动触发 input 事件，更新 v-model。// 正则表达式：匹配整数或带小数点的数字。// 如果绑定了方法，则调用。// 获取当前输入框的值。// 更新输入框的值。
自定义指令中的钩子函数...
m0_60237095的博客
07-27 2390
一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 我们会在稍后讨论渲染函数时介绍更
vue 指令 v-on 函数传参
Claroja
01-17 1203
<body> <div id="app"> <div>{{num}}</div> <div> <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象$event作为事件函数的第一个参数 --> <button v-on:click='handle1'>点击1</button> <!-- 2、如
Vue自定义函数挂到全局方法
hsany330的专栏
07-01 476
方法一:使用Vue.prototype //在mian.js中写入函数 Vue.prototype.getToken = function (){ ... } //在所有组件里可调用函数 this.getToken(); 方法二:使用exports.install+Vue.prototype // 写好自己需要的fun.js文件 exports.install = function (Vue, options) { Vue.prototype.getToken = funct
Vue中全局变量的定义和使用
10-16
- **使用全局变量**：在B界面中，可以通过Vue的指令如`v-if`和`v-else-if`来根据全局变量的状态做逻辑判断： ```html <div v-if="global.sso_flag === 0"></div> <div v-else-if="global.sso_flag === 1"></div>...
vue自定义指令合集 vue2.0版本
12-17
使用自定义指令时，只需在HTML模板中以`v-`前缀加上指令名，例如`v-my-directive`，并可以传递参数： ```html <div v-my-directive="value"></div> ``` ### 三、自定义指令的生命周期钩子 1. **bind**：指令首次...
Vue 指令实现按钮级别权限管理功能
10-17
在使用方式上，需要在Vue项目的入口文件`main.js`中引入指令文件，并在需要权限控制的按钮上使用`v-per`指令，并传递权限标识符。例如`[admin]">`，意味着只有当用户拥有`admin`权限时，该`div`元素才会被渲染到DOM...
Vue组件全局注册实现警告框的实例详解
08-27
在 Vue 中，props 是组件之间传递数据的一种方式。我们可以在父组件中传递数据到子组件，例如：。同时，我们可以在子组件中使用 $emit 方法来触发事件，例如：this.$emit('close')。 六、 Vue 组件的优点 使用 Vue...
Vue 自定义指令绑定的处理函数中传递参数
dark_cy的博客
06-29 4306
　　现在需要为自定义指令绑定函数，并且需要向函数中传递参数，类似 。　　Vue 的指令预期得到的值是一个 JavaScript 表达式，除了 v-on 和 v-for 这两个特殊指令外，其他的指令会自动计算该表达式的值，将最终的计算结果传递给指令。所以自定义的指令不能用 的形式绑定函数值，因为 作为一个 JavaScript 表达式会被立即执行，最终会将其返回值传递给指令。　　那么当我们想要为自定义指令绑定函数值，又想为其传递参数该怎么办呢?　　利用指令的值预期得到一个 JavaScript 表达式的特
vue3自定义指令
qq_46580571的博客
11-27 360
vue3使用自定义指令
vue自定义指令的使用，送大厂面经一份
2401_83977357的博客
03-30 774
钩子函数一般我们经常用到的是：inserted钩子函数bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
自定义指令方法
qq_43077910的博客
03-22 5929
一、自定义全局指令 Vue中所有指令都以（v-）开头。 使用Vue.directive(‘name’,{})定义全局指令。 参数一：指令的名称，不需要加"v-"前缀；调用时需要加上。 参数二：是一个对象，有相关钩子函数（可选），可在特定阶段执行相关操作。 钩子函数： -bind()，只调用一次，指令在第一次绑定到元素身上时调用。可以定义一个在绑定时执行的初始化动作。 -inserted()，被绑定元素插入到父节点时调用（父节点存在即可调用，不必存在于dom中）。 -update()，所在组件的VNode跟新
vue实现全局数据传输
tianbushengyinuo的博客
08-26 869
vue中的数据传输大致分为三种：父组件向子组件传递数据、子组件向父组件传递数据、和非父子关系的组件之间的数据传递。 在这里所要讲的是没有父子关系的组件之间的数据传递，用传统的ajax实现较为麻烦。所以采用eventBus总线传递数据。 eventBus原理可参考eventBus 一、使用： 1、首先，在static路径下创建个js文件夹，里面创建一个eventBus.js文件 import Vue from 'vue' export const EventBus = new Vue() 2、在需要的两个组
Vue中 实现自定义指令（directive）生命周期及应用场景
muzidigbig的博客
11-30 4267
/ 如果你只需要执行绑定的 bind 和 update 两个事件,vue指令定义也配置了简写方式.})new Vue({router,store,
vue全局参数（env/全局变量）
m0_68177019的博客
12-12 2758
vue全局参数（env/全局变量）
vue中自定义全局指令
07-17
在 Vue 中，我们可以通过自定义全局指令来扩展 Vue 的功能。全局指令可以在整个应用程序中使用，无需在每个组件中单独引入或注册。 要自定义全局指令，可以在 Vue 实例创建之前使用 `Vue.directive` 方法进行注册。下面是一个简单的示例： ```javascript // main.js import Vue from 'vue' // 定义全局指令 Vue.directive('highlight', { bind: function (el, binding, vnode) { el.style.backgroundColor = binding.value } }) new Vue({ // ... }).$mount('#app') ``` 在上面的示例中，我们定义了一个名为 `highlight` 的全局指令。在 `bind` 钩子函数中，我们可以通过 `el` 参数获取到绑定指令的元素，通过 `binding` 参数获取到指令的值。在这个例子中，我们将绑定指令的元素的背景色设置为指令的值（可以通过 `v-highlight="'color'"` 来传递值）。 现在，我们可以在任何组件的模板中使用这个全局指令： ```html <template> <div> <h1 v-highlight="'yellow'">Hello World</h1> <p v-highlight="'lightblue'">This is a custom directive example.</p> </div> </template> ``` 在上面的示例中，我们使用了 `v-highlight` 这个自定义指令，并将不同的背景色作为参数传递给指令。 通过自定义全局指令，我们可以方便地扩展 Vue 的功能，并在整个应用程序中重复使用这些指令。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值