Apakah tiga elemen arahan vue?

Tiga elemen arahan vue ialah responsif, enjin templat dan pemaparan. Responsif bermakna apabila data dikemas kini atau ditambah, halaman akan bertindak balas dan data yang sepadan akan dipaparkan semula pada asasnya adalah rentetan, digunakan sebagai pengecam contoh merujuk kepada proses menukar templat ke; kod lain.

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Apakah tiga elemen arahan vue?

Tiga elemen dalam veu

• Responsif: Bagaimanakah vue memantau setiap perubahan atribut data ?

• Enjin templat: Bagaimanakah templat vue dihuraikan dan bagaimanakah arahan diproses?

• Rendering: Bagaimanakah templat vue dipaparkan kepada html Dan proses pemaparan

Sejauh mana vue responsif

Object.defineProperty

Simulasi

1) Apakah itu responsif

Selepas mengubah suai atribut data, vue segera memantau

atribut data Diproksikan kepada vm

2) Object.defineProperty

Sintaks:

Object.defineProperty(obj, prop, descriptor)

Penerangan parameter:

• obj: Diperlukan. Objek Sasaran

• prop: Diperlukan. Nama atribut yang akan ditakrifkan atau diubah suai

• deskriptor: diperlukan. Ciri yang dimiliki oleh atribut sasaran

Asas

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

Kami menggunakan kaedah defineProperty untuk melaksanakan operasi di atas: seperti berikut

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'; // 可以监听到

Menggunakan defineProperty kami Anda boleh memantau perubahan data. Ini juga merupakan kaedah teras untuk vue melakukan kerja tindak balas.

3) Simulasi

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);
}

Cara templat vue dihuraikan

Apakah templat itu

fungsi render

fungsi render dan vdom

1) Apakah itu templat

Intipati: rentetan

mempunyai logik, seperti v-jika v- dan lain-lain.

sangat serupa dengan format html, tetapi terdapat perbezaan besar

akhirnya akan ditukar kepada html untuk memaparkan

templat mesti ditukar kepada kod JS akhirnya , kerana:

Terdapat logik (v-jika v-for), yang mesti direalisasikan oleh JS (Turing complete)

Tukar ke halaman rendering html, yang mesti direalisasikan oleh JS

Oleh itu, perkara yang paling penting ialah menukar templat kepada fungsi JS

Contoh asas

 <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>

Di atas ialah templat.

[Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Apakah tiga elemen arahan vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!