Vue. directive () usage and instance details, vue. directive details

Vue. directive () usage and instance details, vue. directive details

Official Website instance:

Https://cn.vuejs.org/v2/api/#Vue-directive

Https://cn.vuejs.org/v2/guide/custom-directive.html

The instruction definition function provides several hook functions (optional ):

Bind: it is called only once. It is called when the command is bound to an element for the first time. This hook function can be used to define an initialization action that is executed once during binding.
Inserted: called when the bound element is inserted into the parent node (the parent node can be called if it exists and does not exist in the document ).

Update: called when the template of the bound element is updated, regardless of whether the bound value changes. By comparing the BIND values before and after the update, you can ignore unnecessary template updates (for detailed hook function parameters, see below ).

ComponentUpdated: called when the template of the bound element completes an update cycle.

Unbind: only called once. It is called when the command is unbound from the element.

I am a newbie, look at the official website, then BaiduVue.directive()Some are very advanced and some are not perfect. I am posting two simple demos, hoping to help my friends:

1. the demo provided on the official website. Refresh the page input to automatically obtain the focus:

<Div id = "app"> <SPAN style = "WHITE-SPACE: pre "> </SPAN> <input type =" text "v-focus/> </div> <div id =" app "> <input type =" text "v- focus/> </div> // register a global custom command v-focus Vue. directive ('focal ', {// when the bound element is inserted into the DOM. Inserted: function (el, binding) {<SPAN style = "WHITE-SPACE: pre"> </SPAN> // focus element <SPAN style = "WHITE-SPACE: pre "> </SPAN> el. focus () ;}}); new Vue ({el: '# app'}); // register a global custom command v-focusVue.directive ('focal ', {// when the bound element is inserted into the DOM. Inserted: function (el, binding) {// focus element el. focus () ;}}); new Vue ({el: '# app '});

2. A drag demo: 1) The dragged element must be positioned with position to be dragged;

2) After the custom commands are completed, you need to instantiate the Vue and mount the elements;

3) inserted: it is called when the bound element is inserted into the parent node (the parent node can be called if it exists and does not exist in the document ).

<Style type = "text/css">. one ,. two {height: 100px; width: 100px; border: 1px solid #000; position: absolute;-webkit-user-select: none;-ms-user-select: none; -moz-user-select:-moz-none; cursor: pointer ;}. two {left: 200px ;} </style> <div id = "app"> <div class = "one" v-drag> drag one </div> <div class = "two" v-drag> drag two </div> <style type = "text/css">. one ,. two {height: 100px; width: 100px; border: 1px so Lid #000; position: absolute;-webkit-user-select: none;-ms-user-select: none;-moz-user-select:-moz-none; cursor: pointer ;}. two {left: 200px ;} </style> <div id = "app"> <div class = "one" v-drag> drag one </div> <div class = "two" v-drag> drag two </div> [javascript] view plain copy print? Vue. directive ('drag', {inserted: function (el) {el. onmousedown = function (e) {let l = e. clientX-el.offsetLeft; let t = e. clientY-el.offsetTop; document. onmousemove = function (e) {el. style. left = e. clientX-l + 'px '; el. style. top = e. clientY-t + 'px ';}; el. onmouseup = function () {document. onmousemove = null; el. onmouseup = null ;}}}) new Vue ({el: '# app '});

Summary

The above is a small series of Vue. the usage and examples of directive () are explained in detail. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in time!