尚硅谷Vue学习——自定义指令：对象式

最新推荐文章于 2024-06-19 15:46:35 发布
最新推荐文章于 2024-06-19 15:46:35 发布
阅读量333 收藏 1
点赞数 1
分类专栏： Vue学习 文章标签： vue.js 学习 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44790505/article/details/123574245
版权

需求：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令——对象式</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        需求：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取其焦点
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎和{{name}}一起学习</h2><hr>
        <h3>n的值是{{n}}</h3>
        <input type="text" v-fbind="n"><br><br>
        <button @click="n++">点我让n+1</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip =  false // 阻止 vue 在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            name:'才疏学浅的小缘同学',
            n:1
        },
        directives:{
            fbind:{
                // 在指令与元素成功绑定时调用
                bind(element,binding){
                    element.value = binding.value
                },
                //指令所在元素被插入页面时调用
                inserted(element,binding){
                    element.focus()
                },
                //指令所在模板被重新解析时调用
                update(element,binding){
                    element.value = binding.value
                }
            }
        }
    })
</script>
</html>

 

才疏学浅的小缘同学
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
尚硅谷《vue》——笔记一
qq_40923177的博客
10-29 1070
学习前端
详解vue中v-bind:style效果的自定义指令
10-15
Vue.js 是一款流行的前端框架，它允许开发者通过声明式的方式处理数据和视图的交互。在Vue中，`v-bind:style` 是一个用于动态绑定CSS样式的指令，它可以接受对象或字符串，方便地根据数据变化更新元素的样式。而...
35.Vue自定义指令函数式
weixin_45843676的博客
02-19 183
35.Vue自定义指令函数式
vue自定义指令（函数式、对象式）
zmzm666的博客
03-10 156
1、函数式 指令函数何时会调用？1、之领域元素成功绑定时 2、指令所在的模板被重新解析时 2、对象式 函数式是对象式的简写，函数式不包含 inserted函数
Vue2.0 Vue自定义指令_对象式
yasinawolaopo的博客
12-13 475
Vue2.0 Vue自定义指令对象式写法,重点就是掌握bind()、inserted()、update()
Vue之自定义指令（对象式）
qq_40844663的博客
03-30 483
<div id="root"> <button @click="n++">点击进行自增</button> <input type="text" v-fbind:value="n"> <!-- 自定义的一个fbind指令名 ，注意必须是小写--> </div> <script src="./vue.js"></script> <scrip
Vue自定义指令directives（函数方式，对象方式）
weixin_46724415的博客
01-05 5051
Vue自定义指令directives（函数方式，对象方式）定义局部指令，定义全局指令，指令执行的时机
尚硅谷前端框架——Vue学习笔记
qq_44810144的博客
03-30 1200
第 1 章：Vue 核心 1.1. Vue 简介 1.1.1. 官网 英文官网: https://vuejs.org/ 中文官网: https://cn.vuejs.org/ 1.1.2. 介绍与描述 动态构建用户界面的渐进式 JavaScript 框架 作者: 尤雨溪 1.1.3. Vue 的特点 遵循 MVVM 模式 编码简洁，体积小，运行效率高，适合移动/PC 端开发3。它本身只关注 UI，也可以引入其它第三方库开发项目。 1.1.4. 与其它 JS 框架的关联 借鉴 Angular 的模板和数据绑定
Vue.js自定义指令学习使用详解
10-16
Vue.js自定义指令是Vue框架中的一个重要特性，它允许开发者扩展Vue的内置指令，创建自己的指令逻辑以满足特定需求。在本文中，我们将深入探讨Vue.js自定义指令的使用方法，以及如何通过不同钩子函数实现特定功能。 ...
详解Vue.directive 自定义指令
10-17
通过自定义指令，开发者可以实现更复杂的交互逻辑，如响应式地改变元素样式、监听事件、动画效果等，极大地增强了 Vue 的灵活性和可扩展性。这使得 Vue 在实际项目中能够更好地适应各种需求，提供了丰富的定制化方案...
详解在Vue中通过自定义指令获取dom元素
12-08
(component)，然后通过 this.$el 去获取，但是在一些很小的项目里，在一些没有使用 webpack 等构建工具的项目中，创建一个组件并不是那么值得，所以 vue 提供了另一种操作DOM元素的方式，就是自定义指令 (directive)...
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
JS面试题第一章
最新发布
2301_79858637的博客
06-19 207
undefined表示的是无的原始值。但是null表示的是无 对象 0。
vue面试题汇总之响应式理解
fyw1789的博客
06-12 442
vue在全局中写了一个用来运行函数的函数,有一个全局变量保存当前运行的是哪个函数,这样在getter的时候只要检查这个全局变量就知道是哪个函数在使用这个变量了,vue还建立了一个对映关系表当setter的时候把对映表中的函数重新运行一遍。vue2使用Object.defineProperty进行数据代理(getter和setter),vue3使用Proxy进行数据代理。会把函数放入异步队列,同一个渲染函数只会存在一个,这样就不会多次渲染造成效率问题。,当需要派发更新的时候不会立即运行函数,而是交给。
Webpack + Vue
2401_85123689的博客
06-15 821
/使用路由routes: [//路由路径，对应一个 url//路由别名 ，vue.js内部使用的名称//组件，对应.vue页面的名字})当用户访问时，就会渲染文件，定义了该路由在 vue.js内部的名称2 创建一个新的Component之前在路由中引入了 component ，接下来，就是创建这个文件 📂页面效果原生 Vue.js的代码存在于 new Vue({……}）中的代码，在Webpack 框架下，都应该放到`export default{……}`代码块中。
vue:对三种获取更新后的dom的方式进行分析
qq_45820271的博客
06-17 690
由于vue的异步更新机制，我们在同步代码中是无法获取到更新后的dom的信息的针对这个问题，我们有三种解决方案获取更新后的dom:3.在微任务中获取因为更新是在同步任务结束后，执行微任务之前，所以上面三种方式可以得到更新后的dom。
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 888
Vue在表单校验中trigger属性指定何时触发校验规则
VUE el-select Select 选择器 选项是对象，显示是一个值name ，但是绑定的对象值是id方案
mqiqe的专栏
06-14 321
在 Vue 中使用 Element UI 的 el-select 组件时，如果希望显示对象的某个属性（如 name），但实际绑定的是对象的另一个属性（如 id），需要使用 value-key 和 label 属性来分别指定这两个属性。在这个示例中，v-model=“selectedId” 用于绑定选择的值，该值将是选中项的 id。当用户选择一个选项时，selectedId 将被更新为选中项的 id，而 el-select 下拉列表中显示的是每个选项的 name 属性。
Vue.js前端框架：自定义指令
05-24
Vue.js的自定义指令可以让我们在模板中直接使用自定义的指令，从而实现一些特殊的功能或交互效果。自定义指令是Vue.js提供的一种扩展机制，它允许我们在编写Vue.js应用程序时自定义DOM元素的行为。 自定义指令主要由两部分组成：指令定义和指令钩子函数。 指令定义是一个包含指令名称、绑定值、修饰符等属性的对象，用来描述指令的属性和行为。指令钩子函数是指在绑定元素插入到DOM中、更新DOM时、解绑元素等特定时刻执行的函数，用来实现指令的具体功能。 下面是一个简单的自定义指令示例，用来实现点击外部区域隐藏弹窗的功能： ```javascript Vue.directive('click-outside', { bind: function(el, binding, vnode) { el.clickOutsideEvent = function(event) { if (!(el == event.target || el.contains(event.target))) { vnode.context[binding.expression](event); } }; document.body.addEventListener('click', el.clickOutsideEvent); }, unbind: function(el) { document.body.removeEventListener('click', el.clickOutsideEvent); } }); ``` 在上面的例子中，我们通过`Vue.directive`方法注册了一个名为`click-outside`的自定义指令，该指令的功能是在点击指定元素外的区域时隐藏元素。 在指令的`bind`钩子函数中，我们绑定了一个事件监听器，用来监听`document.body`的点击事件。在事件处理函数中，我们判断点击的目标是否是指定元素或指定元素的子元素，如果不是，则调用指令绑定的方法，执行隐藏元素的操作。 在指令的`unbind`钩子函数中，我们移除了绑定的事件监听器，以避免内存泄漏。 使用自定义指令时，我们可以在模板中通过`v-指令名`的方式来调用指令，如下所示： ```html <div v-click-outside="hidePopup"></div> ``` 在上面的例子中，我们将`click-outside`指令绑定到一个`<div>`元素上，并指定了一个名为`hidePopup`的方法，用来隐藏弹窗。当用户点击该元素外的区域时，指令会自动触发绑定的方法，从而实现弹窗的隐藏。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

才疏学浅的小缘同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值