• 技术文章 >web前端 >Vue.js

    vue.js指令是什么

    coldplay.xixicoldplay.xixi2020-11-30 14:46:37原创514

    vue.js指令是许多内置的指令,比如【v-if】和【v-show】,这些丰富的指令能满足我们的绝大部分业务需求,自定义指令有钩子函数,如【bind、inserted、update】。

    本教程操作环境:windows10系统、vue2.9,本文适用于所有品牌的电脑。

    【相关文章推荐:vue.js

    问题一:什么是vue.js中的自定义指令?

    自定义一些指令对底层DOM进行操作

    更多参考

    Vue里面有许多内置的指令,比如v-if和v-show,这些丰富的指令能满足我们的绝大部分业务需求,不过在需要一些特殊功能时,我们仍然希望对DOM进行底层的操作,这时就要用到自定义指令。

    问题二:自定义指令的几个钩子函数

    问题三:钩子函数参数

    除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

    指令钩子函数会被传入以下参数:

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

    2、binding:一个对象,包含以下属性:

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

    问题四:如何在vue-cli中使用自定义指令?

    文件结构:

    .
    ├── src
    │   ├── directives
    │   │    ├── index.js
    │   │    ├── modules
    │   └── main.js
    └── ...

    在modules下新建foucs.js下

    // 聚焦指令
    export default {
      bind (el, binding, vnode) {},
      inserted (el, binding, vnode) {
        el.focus()
      },
      update (el, binding, vnode) {},
      componentUpdated (el, binding, vnode) {},
      unbind (el, binding, vnode) {}
    }

    在src/directives/index.js下

    import focus from './modules/focus'
    export {focus}

    在src/main.js下,使用directives自定义指令

    //引入自定义指令
    import * as directives from './directives'
    //注册指令
    Object.keys(directives).forEach(k => Vue.directive(k, directives[k]));

    在.vue组件中使用

    <input v-focus type="text" />

    相关免费学习推荐:JavaScript(视频)

    以上就是vue.js指令是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vue.js指令
    上一篇:怎么关闭vue.js中的空格报错? 下一篇:vue.prototype如何使用
    线上培训班

    相关文章推荐

    • vue.js指令v-for使用及索引获取• 如何利用Vue.js指令实现全选功能

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网