In AngularJs, its directive is implemented using directive ( name,factor_function):
( 'myapp' ,[])
.directive (myDirective,function (){
return{
template : '',
restrict: '',
replace: '',
........
}
})
In addition to built-in instructions, components are also allowed to customize instructions.
+ Custom directives provide a mechanism to map changes in data to DOM behavior
+ Register a global custom directive using the directive (id,definition) method
+ Custom directives accept two parameters: Directive ID and definition object
+ You can also register a local custom directive with component directives (this method is equivalent to the AngularJs restrict property A)
1. Hook function
+ The hook function is part of the Windows message processing mechanism
+ By setting the "hook", the application can filter all messages and events at the system level to access messages that are not accessible under normal circumstances.
+ The essence of a hook is a program used to process system messages, and through system calls, it is hung into the system.
+ The hook function of Windows can be considered one of the main features of Windows. Using them, you can capture events that occur in your own or other processes.
+ With "hook", you can give Windows a callback function that handles or filters events, also called the "hook function", which will be called by WINDOWS every time an event you are interested in.
angularjs provides two functions:compile and link, where the compile function is mainly responsible for linking the scope and the DOM; the link function is used to create instructions that can operate the DOM
Notice:compile and link are mutually exclusive. If these two options are set at the same time, the compile return function will be regarded as a link function, while the link option itself will be ignored.
Also provided are several hook functions that are optional and have no constraints between them.
Hook function:Mainly responsible for linking scope and DOM; link functions are used to create instructions that can operate DOM
+ bind — Called only once, when the instruction is bound to an element for the first time. 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 (it can be called if the parent node exists, and it does not need to exist in the document)
update — is called first after bind with the initial value as the parameter, and then is called every time the template where the bound element is located is updated, regardless of whether the bound value changes or not. By comparing the binding values before and after the update, unnecessary template updates can be ignored, and the parameters are new and old.
componentUpdated — Called when the template where the bound element is located has completed an update cycle
unbind — Called only once, when the directive is unbinded from an element
('my-directive', {
bind: function(){
//Preparation for binding //For example, add an event listener, or other complicated operations that only require one time to perform },
inserted: function(){
//...
},
update: function(){
//Execute corresponding update based on the obtained new value //The initial value will also be called once },
componentUpdated: function(){
//...
},
unbind: function(){
//Do cleaning operations //For example, the event listener bound when removing bind }
})
After registering, you can write it like this in the template (remember to add the prefix v-):
<div v-my-directive = 'someValue'></div>
When only the update function is needed, you can pass in the function instead of the definition object:
( 'my-directive',function (value) {
// This function functions update()})
2. Directive instance properties
All hook functions will be assigned to the actual instruction object, and this pointes to this instruction object within the hook.
This object exposes some useful properties:
Parameters of the hook function:
el — The element bound by the directive can be used to directly operate the DOM.
binding— An object containing the following properties:
name — The name of the directive, without prefix
value —The binding value of the directive, for example: v-my-directive=”1 + 1”, the value of value is 2.
oldValue — The previous value bound by the directive, available only in the update and componentUpdated hooks. Available regardless of whether the value changes or not.
expression — The expression of the directive, excluding parameters and filters, and string form of bound values. For example, v-my-directive=”1 + 1”, the value of expression is “1 + 1”
arg — The parameter passed to the instruction. For example, v-my-directive:foo, the value of arg is "foo".
modifiers — an object containing modifiers for directives. For example: , the value of modifier object modifiers is { foo: true, bar: true }.
vm — owns the instruction context ViemModel
vnode — Vue compiles the generated virtual node.
oldVnode:Previous virtual node, available only in update and componentUpdated hooks.
desciiptor — An object containing the parsing results of a directive
Note: We should treat these properties as read-only, and do not modify them. We can also add custom properties to the directive object, but be careful not to overwrite existing internal properties.
A simple example will be explained below. When the page is loaded, the input input box will automatically focus.
The code is as follows:
//Register a global custom directive v-focus// When the binding element is inserted into the DOM// Focus elements <div >
<input v-focus>
/div>
('focus', {
inserted: function (el) {
() }
});
var app = new Vue({
el: '#app'
});
The following will explain an example of using hook function parameters. Set the font color of the element to #fff, set the background color to the parameter red of the incoming instruction, and display the command name instruction binding value, the instruction binding value expression, and the parameters of the incoming instruction.
The code is as follows:
<div v-demo-directive:red="message"></div>
<script>
('demoDirective', {
bind: function(el, binding, vnode){
= '#fff'
=
=
'Instruction name:' + + '<br>' +
'Instruction binding value:' + + '<br>' +
'Instruction binding expression expression:' + + '<br>' +
'Parameter argument of incoming directive - ' + + '<br>'
},
});
var demo = new Vue({
el: '#example',
data: {
message: 'hello!'
}
})
</script>
3. Object literal
+ If the directive requires multiple values, you can pass in a javascript object literal
+ Directives can use any legal javascript expression
<div v-demo-directive="{ color: 'white', text: 'hello!' }"></div>
('demoDirective', function(el, binding, vnode){
();
();
});
var demo = new Vue({
el: '#app'
})
4. Literal commands
+ When the directive uses a literal modifier, its value will be processed as a normal string and passed to the update method
The + update method will be called only once, because normal strings cannot affect data changes
+ If inListerral: true is set when creating a custom instruction, the attribute value will be treated as a string and will be assigned to the expression of the instruction. The literal instruction will not establish data monitoring.
div = 'foo bar baz'></div>
('myEx',function(el, binding, vnode){
()
})
var hah = new Vue({
el: '#isExample'
})
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.