What are the three elements of the vue directive?

The three elements of the vue directive are responsiveness, template engine and rendering. Responsiveness means that when data is updated or added, the page will respond and the corresponding data will be re-rendered; the template engine is essentially a string, used as the identifier of the instance; rendering refers to the process of converting the template into other codes.

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What are the three elements of the vue command

The three elements in veu

• ##Responsiveness: How does vue monitor each attribute change of data?

• Template engine: How are vue templates parsed and how are instructions processed?

• Rendering: How is vue's template rendered into html? And the rendering process

How vue is implemented as responsive

Object.defineProperty

1) What is responsiveness

Object.defineProperty(obj, prop, descriptor)

• obj: required. Target Object

• #prop: Required. The name of the attribute to be defined or modified

• descriptor: required. Characteristics owned by the target attribute

var obj = {
  name: 'zhangsan',
  age: 25
}
 
console.log(obj.name); // 获取属性的时候，如何监听
obj.age = 26; // 赋值属性的时候，如何监听

var obj = {}
 
var name = 'zhangsan'
 
Object.defineProperty(obj, "name", {
  get: function () {
    console.log('get');
    return name;
  },
  set: function (newVal) {
    console.log('set');
    name = newVal;
  }
});
 
console.log(obj.name); // 可以监听到
obj.name = 'lisi'; // 可以监听到

3) Simulation

var mv = {}
 
var data = {
  price: 100,
  name: 'zhangsan'
}
 
var key, value;
for (key in data) {
 
  // 命中闭包。新建一个函数，保证 key 的独立的作用域
  (function (key) {
Object.defineProperty(mv, key, {
  get: function () {
    console.log('get');
    return data[key];
  },
  set: function (newVal) {
    console.log('set');
    data[key] = newVal
  }
})
  })(key);
}

1) What is a template

 <div id="app">
    <div>
      <input v-model="title">
      <button v-on:click="add">submit</button>
    </div>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>

vue.js Tutorial"]

The above is the detailed content of What are the three elements of the vue directive?. For more information, please follow other related articles on the PHP Chinese website!