search
HomeWeb Front-endFront-end Q&AWhen can I use custom instructions in Vue?
When can I use custom instructions in Vue?Dec 24, 2021 pm 05:15 PM
vueCustom instructions

The logic of using custom instructions is the same as the logic of using event modifiers. When there is logic related to operating DOM/BOM in methods, it needs to be abstracted into a custom instruction so that it can be easily Business logic is decoupled from related DOM operations and makes it easier to unit test.

When can I use custom instructions in Vue?

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

1. How to create a custom directive

#Create a directive globally through Vue.directive, the first parameter of Vue.directive The name of the directive is defined. The following code creates a directive named resize.

Vue.directive("resize", {

});

After registering this directive globally, it means that this directive can be used in any component. You can use the directive directly in the template of a single-file component, or you can use the directive in JSX. . By convention, the instruction name is prefixed with "v-", which is used to indicate that it is a prefix.

When can I use custom instructions in Vue?

2. When to use custom instructions

Regarding when to use custom instructions, the logic is the same as that of using event modifiers.

The use of event modifiers is largely to make our code appear data-driven and easy to test. The logic of the DOM is delegated separately and agreed to some specific modifiers. . (Notes related to event modifiers: https://www.cnblogs.com/xiaoxuStudy/p/13233379.html#oneone)

In fact, the same logic applies to custom instructions. When there is logic related to operating DOM/BOM in our methods, we should consider whether it can be abstracted into a custom instruction to decouple the business logic from related DOM operations and make it easier to be unit tested.

3. Hook function

Vue strictly follows the design pattern here The opening and closing principle allows developers to operate components at different times through agreed hook functions. (Vue official website hook function related: https://cn.vuejs.org/v2/guide/custom-directive.html#Hook function)

1. Hook function

Vue.directive("resize", {
  //只调用一次,指令第一次绑定元素时调用
  //在这里可以进行一次性的初始化设置
  bind: function(el, binding, value){},
  //被绑定元素插入父节点时调用
  //(仅保证父节点存在,但不一定已被插入文档中)
  inserted: function(el, binding, vnode){},
  //所在组件的 Vnode 更新时调用
  //但是可能发生在其子 VNode 更新之前
  //指令的值可能发生了变化,也可能没有
  //但是可以通过比较更新前后的值来忽略不必要的模板更新
  update: function(el, binding, vnode, oldVnode){},
  //指令所在的 VNode 及其子 VNode 全部更新后调用
  componentUpdated: function(el, binding, vnode, oldVnode){},
  //只调用一次,指令与元素解绑时调用
  unbind: function(el, binding, vnode){},
});

Hook function example

Let’s first look at the first pair of hook functions, bind and unbind functions. As the names suggest, these two hook functions It is called when the element declared by this directive is bound and unbound, and it should be remembered that both bind and unbind will only be called once.

When can I use custom instructions in Vue?

Next, look at the hook function inserted. Normally, inserted is called after bind.

The difference between bind and inserted is: the parameter el.parentNode in bind is null, and the parent node of the current node can be accessed through el.parentNode in inserted. When there is information that needs to be stored on the parent node and the parent node needs to be accessed, inserted is used more frequently than bind .

When can I use custom instructions in Vue?

Let’s look at the last set of hook functions update and componentUpdate. This pair of hook functions will be called before and after the vnode is updated. .

Compared with other hook functions, update and componentUpdate pass in one more parameter, oldVnode. oldVnode represents the previous Virtual DOM node information, and vnode represents the current Virtual DOM node information. You can determine whether the template needs to be updated by comparing the difference between oldVnode and vnode to reduce unnecessary template updates and thereby improve component performance to a certain extent.

 When can I use custom instructions in Vue?

2. 钩子函数参数

function(
  // 指令所绑定的元素,可以用来直接操作 DOM
  el,
  // binding 一个对象,包含以下属性
  {
    // 指令名,不包括 -v 前缀
    name,
    // 指令的绑定值,例如:v-my-directive="1+1"中,绑定值为 2
    value,
    // 指令绑定的前一个值
    // 仅在 update 和 componentUpdated 钩子中可用
    oldValue,
    //字符串形式的指令表达式
    //例如 v-my-directive="1+1" 中,表达式为 "1+1"
    expression,
    //例如指令的参数,可选。
    //例如 v-my-directive:foo 中,参数为 "foo"
    arg,
    //一个包含修饰符的对象
    //例如:v-my-directive.foo.bar 中,
    //修饰符对象为 {foo: true, bar: true}
    modifiers
  },
  //Vue 编译生成的虚拟节点
  vnode,
  //上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用
  oldVnode
)

钩子函数参数

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

When can I use custom instructions in Vue?

【相关推荐:《vue.js教程》】

The above is the detailed content of When can I use custom instructions in Vue?. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Vue常见面试题汇总(附答案解析)Vue常见面试题汇总(附答案解析)Apr 08, 2021 pm 07:54 PM

本篇文章给大家分享一些Vue面试题(附答案解析)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

vue中props可以传递函数吗vue中props可以传递函数吗Jun 16, 2022 am 10:39 AM

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?React和Vue项目的解决方法浅析如何覆盖组件库样式?React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),