Custom instructions are divided into global instructions and local instructions. Global directives are valid within any VUE component, and local directives are valid only within the component where the directive is registered.
Global and local instructions are written almost identically. Global directives are registered in main.js using vue. directive and local directives are written in the component’s directives option.
Here’s how to use the instructions.
Directives are often used to encapsulate common functions involving the DOM, such as auto-focus of forms, drop-down shrinkage of lists, and so on.
The hook function of the instruction
The directive object has five hook functions: BIND, INSERTED, Update, componentUpdated, and unbind. These parameters are optional.
-
Bind: Called only once, the first time a directive is bound to an element. This is where you can perform one-time initialization Settings.
-
Inserted: Called when the bound element is inserted into a parent (the parent is guaranteed to exist, but not necessarily inserted into the document).
-
Update: called when the component’s VNode is updated, but may occur before its child VNodes are updated. The value of the instruction may or may not have changed. However, you can ignore unnecessary template updates by comparing the values before and after the update (see below for detailed hook function parameters).
-
ComponentUpdated: Invoked when the VNode of the component where the directive resides and its child VNodes are all updated.
-
Unbind: Called only once, when an instruction is unbound from an element
Hook function parameters
el: the element bound by the directive that can be used to manipulate the DOM directly.binding: an object containing the following properties:name: Indicates the command namev-Prefix.value: The binding value of the directive, for example:v-my-directive="1 + 1", the binding value is2.oldValue: The value preceding the instruction binding, only inupdate和componentUpdatedHooks are available. Available regardless of whether the value changes.expression: Command expression in the form of a string. For example,v-my-directive="1 + 1"Where, the expression is"1 + 1".arg: Optional parameter passed to the instruction. For example,v-my-directive:fooWhere, the parameter is"foo".modifiers: an object that contains modifiers. Such as:v-my-directive.foo.bar, the modifier object is{ foo: true, bar: true }.
vnode: virtual node generated by Vue compilation. Walk [dataset] (Cn.vuejs.org/v2/api/ > VNo…API to learn more.oldVnode: Indicates the last virtual nodeupdate和componentUpdatedHooks are available.
3. Simple case
<! 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>directive </title> </head> <body> <div id="app"> <h2 V-text =' MSG '></h2> <h2 v-upper-text='msg'></h2> <h2 v-lower-case="msg"></h2> </div> </body> <script src=".. /js/vue.js"></script> <script> /* Requirements: customize two instructions 1. Function similar to V-text, but converted to all uppercase: V-uppper-text 2. Function similar to v-text, but converted to all lowercase :v-lower-text */ //1. Directive ('upper-text', function (el, binding) {//el is a real DOM, Numerical el binding is coming. The innerText = binding. The value. The toUpperCase (); }) new Vue({ el: "#app", data() { return { msg: "helloWorld", } }, directives: { 'lower-case': function (el, binding) { el.innerText = binding.value.toLowerCase() } } }) </script> </html>Copy the code