Of Stack

Detailed Explanation of vue Instruction and dom Operation

  • 2021-07-26 06:18:43
  • OfStack

"AngularJS extends HTML with new attributes called directives. AngularJS adds functionality to applications with built-in directives. AngularJS allows you to customize directives."

This is the first time I came into contact with the word "instruction". I still remember that at that time, when ng was popular, I was particularly curious about how to add an "ng-app" to an div to solve so many problems.

Later, with the deepening of the front-end work, I used data-attr of jq and learned to use the plug-in of jq. However, this doesn't make me think of it as a "directive". Later, the plug-in needs to add a label to the node to show some kind of "state management." I used class for example: pending, loading-end.

However, it always feels uncomfortable to mix feeling and style in one block. Later, I added a custom tag directly, such as attr-pending, attr-loading-end, and marked whether a certain state was completed through the custom tag on dom.

At this time, it was found that "attr-pending, attr-loading-end" is very similar to "ng-app, ng-html", and it suddenly dawned on me that "instruction" can also be understood as "identification", but the specific logic has nothing to do with it, it is just one As for ng-repeat, ng-click can also understand a program on dom, and a "identification" program mounts a function through it.

Now contact with vue, vue than ng in the development of the code is obviously much less, "instruction" 1 developers do not need to implement. However, if you are developing a set of ui interactive components, you still need it very much.

bind: Called only once, when the instruction binds the element for the first time.

update: The first time is called immediately after bind, and the obtained parameter is the initial value of the binding; In the future, whenever the bound value changes, it will be called to get two parameters: the new value and the old value.

unbind: Called only once when the instruction unbinds the element.

1. Registration of directives

Directives, like Component 1, need to be registered before they can be used. There are also two ways, one is global registration: 


Vue.directive('dirName',function(){
 　　 // Definition instruction 
});

 In addition 1 Species are local registrations: 
new Vue({
 　　 directives:{
  　　  　　  dirName:{

   　　  　　   　　  // Definition instruction 
  　　  　　  }
 　　 }
});

2. You can directly modify DOM in instruction function configuration [support data-driven] input. When the value in # demo is modified, vue in # demo will be synchronized automatically 


<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script> 
</head> 
<body> 
<div> 
  <p> Display vue Instruction ----vue And elements dom Perfect combination of operation "expansion" </p> 
  <p>{{msg}}</p> 
  <input type="text" v-model="msg"> 
</div> 
<div id="demo" v-demo-directive="LightSlateGray : msg"></div> 
 
<script> 
 Vue.directive('demoDirective', { 
  bind: function () { 
   this.el.style.color = '#fff' 
   this.el.style.backgroundColor = this.arg 
  }, 
  update: function (value) { 
   this.el.innerHTML = 
     'name - '  + this.name + '<br>' + 
     'raw - '  + this.raw + '<br>' + 
     'expression - ' + this.expression + '<br>' + 
     'argument - ' + this.arg + '<br>' + 
     'value - '  + value 
  } 
 }); 
 var demo = new Vue({ 
  el: 'body', 
  data: { 
   msg: 'hello!' 
  } 
 }) 
 
</script> 
</body> 
</html>

Official website link: http://v1-cn.vuejs.org/guide/custom-directive.html

Related articles: