Vue custom commands and vue custom commands

Vue custom commands and vue custom commands

In AngularJs, its commands are implemented using directive (name, factor_function:

angular.module( 'myapp' ,[]).directive (myDirective,function (){    return{      template : '',      restrict: '',      replace: '',      ........    }})

In addition to built-in commands, Vue. js also allows component custom commands.
+ Custom commands provide a mechanism to map data changes to DOM actions.
+ Vue. js registers a global custom command using the directive (id, definition) Method
+ Custom commands take two parameters: command ID and definition object
+ You can also use the directives of the component to register A local custom command (this method is equivalent to setting the restrict attribute of AngularJs to)

1. Hook Functions

+ Hook functions are part of the Windows message processing mechanism.
+ By setting a "hook", the application can filter all messages and events at the system level to access messages that are normally inaccessible.
+ The essence of a hook is a program used to process system messages. It is mounted to the system through system calls.
+ Windows hook functions can be considered as one of the main features of Windows. They allow you to capture events that occur in your own processes or other processes.
+ With "hook-up", you can provide a callback function for Windows to process or filter events. This function is also called a "hook function". When an event you are interested in occurs, WINDOWS will call this function.

Angularjs provides two functions: compile and link. The compiling function links the scope and DOM. The linking function creates instructions that can operate the DOM.

Note: compile and link are mutually exclusive. If both options are set, the compile return function is used as the link function while the link option is ignored.
Vue. js also provides several hook functions that are optional and there is no constraint between them.

Hook Function:It is mainly responsible for linking the scope and DOM. The link function is used to create instructions that can operate the DOM.

+ Bind: Only one call. This function is called when the command is bound to an element for the first time. You can use this hook function 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-after bind, the initial value is used as the parameter for the first call. After that, it is called whenever the template of the bound element is updated, regardless of whether the bound value changes. By comparing the bound values before and after the update, you can ignore unnecessary template updates. The parameters are new and old values.

ComponentUpdated-called when the template containing the bound element completes an update cycle

Unbind-called only once, called when the command is unbound from the element

Vue. directive ('My-ctive Ve', {bind: function () {// prepare for binding. // For example, add an event listener or perform other complex operations only once }, inserted: function (){//...}, update: function () {// execute the corresponding update based on the new value obtained // also call the initial value}, componentUpdated: function (){//...}, unbind: function () {// clear operation // For example, the event listener bound when the bind is removed }})

After registration, you can write in the Vue. js template as follows (remember to add the prefix v -):

<div v-my-directive = 'someValue'></div>

When you only need to update the function, you can pass in the function to replace the definition object:

Vue. directive ('My-ctive Ve', function (value) {// This function applies to update ()})

2. Command instance attributes

All hook functions are assigned to the actual instruction object. In the hook, this points to this instruction object.
This object exposes some useful attributes:
Parameters of the hook function:

El-The element bound to the command, which can be used to directly operate the DOM.

Binding-An object contains the following attributes:
Name-command name, excluding the prefix
Value-command binding value, for example, v-my-directive = "1 + 1", the value of value is 2.
The previous value bound to the oldValue-command is only available in the update and componentUpdated hooks. Whether the value is changed or not.
Expression-command expression, excluding parameters and filters. It is a string of bound values. For example, v-my-directive = "1 + 1", and the expression value is "1 + 1"
Arg-parameters passed to the command. For example, v-my-directive: foo. The arg value is "foo ".
Modifiers-an object that contains the modifier of the command. For example: v-my-directive.foo.bar, the modifier object modifiers value is {foo: true, bar: true }.
Vm-has the command context ViemModel
Virtual node generated by vnode-Vue compilation.

OldVnode:The previous virtual node is only available in the update and componentUpdated hooks.

Desciiptor-An object that contains the parsing results of commands

Note: we should regard these attributes as read-only and do not modify them. We can also add custom attributes to the instruction object, but do not overwrite existing internal attributes.

The following is a simple example. When a page is loaded, the input box is automatically focused.
The Code is as follows:

// Register a global custom command v-focus // when the bound element is inserted into the DOM // The focus element <div id = "app"> <input v-focus>/div> Vue. directive ('core', {inserted: function (el) {el. focus () }}); var app = new Vue ({el: '# app '});

The following example shows how to use the hook function parameters. Set the font color of the element to # fff, set the background color to the red parameter of the incoming command, and bind the command name command to a value, the expression of the value bound to the command. The input command parameters are displayed in.

The Code is as follows:

<Div id = "example" v-demo-directive: red = "message"> </div> <script> Vue. directive ('democtive', {bind: function (el, binding, vnode) {el. style. color = '# fff' el. style. backgroundColor = binding. arg el. innerHTML = 'COMMAND name: '+ binding. name + '<br>' + 'command binding value:' + binding. value + '<br>' + 'command binding expression:' + binding. expression + '<br>' + 'specifies the argument-' + binding parameter of the input command. arg + '<br>'},}); var de Mo = new Vue ({el: '# example', data: {message: 'Hello! '}}) </Script>

3. Object literal volume

+ If the command requires multiple values, you can input a javascript Object literal
+ The command can use any legal javascript expression.

<div id="app" v-demo-directive="{ color: 'white', text: 'hello!' }"></div>Vue.directive('demoDirective', function(el, binding, vnode){    console.log(binding.value.color);    console.log(binding.value.text);  });var demo = new Vue({    el: '#app'  })

4. Literal commands

+ When a command uses a literal modifier, its value is processed by a common string and passed to the update method.
+ The update method is called only once, because normal strings do not affect data changes.
+ If you set inListerral: true when creating a custom command, the feature value is treated as a string and assigned to the expression of the command. The literal command does not set up data monitoring.

div id="isExample" v-myEx.literal = 'foo bar baz'></div>Vue.directive('myEx',function(el, binding, vnode){  console.log(binding.value.literal)})var hah = new Vue({  el: '#isExample'})

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.