精华内容
下载资源
问答
  • vue自定义指令
    2022-02-22 14:43:15

    ​前言

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。 v-xxx

    html+css的复用的主要形式是组件

    对普通 DOM 元素进行底层操作,这时候就会用到自定义指令

       问题:自定义指令(v-check、v-focus)的方法有哪些?

                  它有哪些钩子函数?还有哪些钩子函数参数?

    全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives

    ​ 钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)

    ​ 钩子函数参数:el、binding

    vue自定义指令的注册

    目标: 获取标签, 扩展额外的功能 

    全局注册

    在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用v-fofo指令

    // 全局指令 - 到处"直接"使用
    Vue.directive("gfocus", {
      inserted(el) {
        el.focus() // 触发标签的事件方法
      }
    })
    

    局部注册

    注意:   inserted方法 - 指令所在标签, 被插入到网页上触发(一次)

               update方法 - 指令对应数据/标签更新时, 此方法执行

    <template>
      <div>
          <!-- <input type="text" v-gfocus> -->
          <input type="text" v-focus>
          
      </div>
    </template>
    
    <script>
    // 目标: 创建 "自定义指令", 让输入框自动聚焦
    // 1. 创建自定义指令
    // 全局 / 局部
    // 2. 在标签上使用自定义指令  v-指令名
    // 注意:
    // inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
    // update方法 - 指令对应数据/标签更新时, 此方法执行
    export default {
        data(){
            return {
            }
        },
        directives: {
            focus: {
                inserted(el){
                    el.focus()
                }
            }
        }
    }
    </script>
    
    <style>
    
    </style>
    

    自定义指令-传值

     目标: 使用自定义指令, 传入一个值

    需求: 定义color指令-传入一个颜色, 给标签设置文字颜色

    main.js定义处修改一下

    // 目标: 自定义指令传值
    Vue.directive('color', {
      inserted(el, binding) {
        el.style.color = binding.value
      },
      update(el, binding) {
        el.style.color = binding.value
      }
    })
    

    .vue处更改一下

    <p v-color="colorStr" @click="changeColor">修改文字颜色</p>
    
    <script>
      data() {
        return {
          theColor: "red",
        };
      },
      methods: {
        changeColor() {
          this.theColor = 'blue';
        },
      },
    </script>
    

    总结: v-xxx, 自定义指令, 获取原生DOM, 自定义操作

    更多相关内容
  • 本文实例讲述了vue自定义指令实现方法。分享给大家供大家参考,具体如下: vue中的指令就是v-on v-bind v-show等等,那么自定义指令是什么呢? 自己定义的指令就是自定义指令。 语法: Vue.directive(id, definition...
  • 主要介绍了基于vue自定义指令实现按钮级权限控制,本文给大家介绍的非常详细,感兴趣的朋友跟随脚本之家小编一起学习吧
  • 主要介绍了使用Vue自定义指令实现Select组件,如果哪位朋友对vue自定义指令不是多了解的话,此篇文章会对你有所帮助的,需要的朋友可以参考下
  • vue自定义指令是一个比较容易引起内存泄漏的地方,原因就在于指令通常给元素绑定了事件,但是如果忘记了解绑,就会产生内存泄漏的问题。 看下面代码: directives: { scroll: { inserted (el, cb) { // 不是...
  • 下面给大家分享vue自定义指令拖拽功能代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例方法</title> <meta name=...
  • vue自定义指令

    2022-05-04 21:39:11
    除此之外vue 还允许开发者自定义指令。 2. 自定义指令的分类 vue 中的自定义指令分为两类,分别是: 私有自定义指令 全局自定义指令 3. 私有自定义指令 在每个vue 组件中,可以在directives 节点下声明...

    1. 什么是自定义指令

    vue 官方提供v-textv-forv-modelv-if 等常用的指令。除此之vue 还允许开发者自定指令。

    2. 自定义指令的分类

    vue 中的自定义指令分为两别是:

    私有 自定义指令
    全局 自定义指令

     

    3. 私有自定义指令

    在每vue 组件中,可以directives 节点下声明私有自义指例代码如下:

    4. 使用自定义指令

    在使用自定义指令时需要v- 前缀。示例代码如下:

    5. 为自定义指动态绑定参数值

    template 结构中使用自定义指,可等号=为当定参

    6. 通过 binding 获取指令的参数值

    在声明自定义指令时可以参中第二,来收指的参数值:

    7. update 函数

    bind 函数只调用 1 :当指令第一次绑定元素 DOM 更新bind 函数不会被触发 update 函 数会在每次 DOM 更新时被调用。示代码如下:

    8. 函数简写

    如果 bind update 函数中逻辑完全相,则定义

    9. 全局自定义指令

    全局共享的自定义指Vue.directive()进行明,码如下:

     

     10. vue自定义指令的代码示例

      // 私有自定义指令的节点
      directives: {
        // 定义名为 color 的指令,指向一个配置对象
        /* color: {
          // 当指令第一次被绑定到元素上的时候,会立即触发 bind 函数
          // 形参中的 el 表示当前指令所绑定到的那个 DOM 对象
          bind(el, binding) {
            console.log('触发了 v-color 的 bind 函数')
            el.style.color = binding.value
          },
          // 在 DOM 更新的时候,会触发 update 函数
          update(el, binding) {
            console.log('触发了 v-color 的 update 函数')
            el.style.color = binding.value
          }
        } */
        color(el, binding) {
          el.style.color = binding.value
        }
      }

     11. Main.js文件中 Vue.config.productionTip 意义

     提示开发模式和发布(生产)模式,本行代码无意义

    Vue.config.productionTip = false

    值为 True 或 False 表示能否看到如下的提示

     

    等于true(或默认不写)的显示(如上图),会提示处在的模式

     

     等于False的显示(如上图),没有提示处于什么模式

    总结: 

    能够掌 keep-alive 的基本使用

    <keep-alive> 标签、 include 属性

    能够掌插槽的基本用

    <slot> 标签、具名插槽、 后备

    能够知道如自定义指令

    私有自定义指 directives: { }
    全局自定义指 Vue.directive()

     

    展开全文
  • Vue自定义指令

    千次阅读 2022-02-15 09:54:31
    我们了解的vue指令有: v-model,v-show,v-for等,除了这些指令,我们也可以实现自己的自定义指令。在vue中代码的抽取和复用主要是通过组件,如果我们想要对DOM元素进行底层操作,可以通过自定义组件来完成。 二、...

    一、前言
    我们了解的vue指令有: v-model,v-show,v-for等,除了这些指令,我们也可以实现自己的自定义指令。在vue中代码的抽取和复用主要是通过组件,如果我们想要对DOM元素进行底层操作,可以通过自定义组件来完成。
    二、自定义指令的分类
    自定义局部指令:在options api选项中的directives中设置。
    自定义全局指令:在app的directive方法。
    三、input框聚焦案例
    我们需要实现的功能是:input选择框当我们打开页面是,就实现自动聚焦的功能。我们存在三种实现方法。
    一、普通实现
    在这里插入图片描述
    通过ref拿到input标签,然后使用生命周期函数的回调,执行input标签的focus的操作
    二、自定义局部组件实现
    在这里插入图片描述
    options api中存在directives选项,然后在其中设置指令。
    三、自定义全局组件实现
    在这里插入图片描述
    app中存在directive,可以在上面设置全局指令。
    四、指令的生命周期
    created:在绑定元素的attribute或者事件监听器之前被使用
    beforeMount:当指令第一次绑定元素,并且挂载父组件之前被使用。
    mounted:在绑定元素的组件被挂载后调用。
    beforeUpdate:在指令绑定的组件更新其Vnode之前被调用
    updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用
    beforeUnmount:在卸载绑定元素的父组件之前调用
    unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次。
    五、生命周期的参数
    在这里插入图片描述
    el:表示当前的元素
    bindings:可以从中取出一些参数的内容
    vnode:可以获取当前的vnode节点。
    preVnode:可以获取之前的vnode节点。
    六、自定义指令的练习
    我们一般从服务器端获取一些时间戳,但是我们一般在页面展示时,采用的是时间的其他格式,在vue2中我们一般使用过滤器(过滤器需要注意的是:在vue3中已经删除)或者使用计算属性或者methods方法,此时我们还可以使用自定义指令来完成。
    在这里插入图片描述
    七、错误指出
    在这里插入图片描述
    如上图所示,此时将字符串绑定到bindings中,如果不绑定,如果多次使用format-time自定义指令,全局变量formateString就会被最后一次使用的更改。

    展开全文
  • 指令 (Directives) 是带有 v- 前缀的特殊特性。这篇文章主要介绍了Vue 自定义指令实现一键 Copy的功能,需要的朋友可以参考下
  • Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-element-admin作为模板,该项目地址:Github | Vue-element-admin 。 在Vue-element-admin模板项目的src/permission.js文件中,给出了路由守卫、加载动态...
  • Vue自定义指令的用法

    简介:除了核心功能默认内置指令(v-model和v-show),Vue也允许注册自定义指令。在Vue2中,代码复用和抽象的主要形式是组件,然而,有的情况下,你仍需要对普通DOM元素进行底层操作,这时候就需要用到自定义指令。

    一、全局自定义指令

    ① 在main.js文件里定义自定义指令Vue.directive,第一个参数自定义指令名,第二个是钩子函数。

    ② 在页面标签上写自定义指令即可

    一、自定义指令钩子函数详解。

    ⑴ bind:第一次绑定到元素时调用

    ⑵ unbind:解绑时调用,也只调用一次

    ⑶ insert:绑定元素插入父节点时调用

    ⑷ update:所在节点及子节点所有虚拟dom更新时调用

    二、钩子函数的参数

    一   el : 指令所绑定的元素,可以用来直接操作DOM。

    二、binding : 一个对象,包含以下 键值对

    ⑴ name:指令名,不包括 v- 前缀。

    ⑵ value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2

    ⑶ oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

    ⑷ expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"

    ⑸ arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"

    ⑹ modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }

    三、vnode   Vue编译生产的虚拟节点

    四、oldVnode : 是一个虚拟节点,仅在 update 和componentUpdated钩子中可用。

    二、局部自定义指令。

    ① 在js里定义   directive:{'自定义指令名':{钩子函数:function(el,binding,vnode){    逻辑处理  }}}

    展开全文
  • 一、Vue自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令。有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令自定义指令分为全局自定义指令和局部的自定义指令 全局...
  • 主要给大家介绍了关于vue自定义指令限制输入框输入值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 下面给大家介绍vue自定义指令directive,具体内容如下所示:   官网截图实例 vue除了一些核心的内部定义的指令(v-model,v-if,v-for,v-show)外,vue也允许用户注册自己的一些功能性的指令,有时候你实在是要对Dom...
  • 通过局部自定义指令实现了一个拖动的指令 html: <div xss=removed v-drag={set:set}></div> script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives:{ // 拖动的自定义指令 drag(el,binding...
  • 今天小编就为大家分享一篇vue自定义指令实现仅支持输入数字和浮点型的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue 使用自定义指令实现表单校验的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue自定义指令介绍及原理

    千次阅读 2022-04-02 16:10:38
    Vue自定义指令 Vue指令: 在使用Vue框架进行前端开发时,我们经常会使用一些特殊指令来快速实现一些效果或功能。 常见指令如:v-bind、v-if (v-else)、v-show、v-html等等都是一些比较常用的指令 由于本文主要介绍...
  • 一. 速识概念:   在我们使用 Vue 的过程中,遇到了很多方便我们操作的vue内置指令,以 v-xxx 表示。比如有 v-module,v-for...下面我将以最简单的例子带你认识vue自定义指令。 二.全局注册指令:   比如,我们想要
  • vue自定义指令(详解)

    千次阅读 2022-02-17 14:00:16
    vue自定义指令,核心就是需要自己亲手去操作DOM 而vue中的内置指令例如v-model只不过是vue帮你动了dom上的display属性, 所以自定义指令,就是自己亲手对原生操作dom进行了一次封装 局部指令 需求一:定义一个v-...
  • vue自定义指令使用

    2022-02-14 07:39:43
    一、Vue自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令。有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令自定义指令分为全局自定义指令和局部的自定义指令 全局...
  • Vue自定义指令原来这么简单

    千次阅读 多人点赞 2022-02-15 09:48:35
    看完这篇轻松掌握Vue自定义指令,助你面试solo面试官,项目中帮你处理更多难解情况,学习Vue指令原来这么简单

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,971
精华内容 16,388
关键字:

vue自定义指令

友情链接: ANSYS ICEM CFD TUTORIAL.zip