Nota teknikal Vue: Timbunan teknologi Vue (penjelasan gambar dan teks terperinci)

Artikel ini membawakan anda pengetahuan yang berkaitan tentang timbunan teknologi vue, saya harap ia akan membantu anda.

vue Nota 1: Timbunan teknologi Vue

1 >Jika anda mahu kod JavaScript dijalankan pada bahagian pelayan, anda mesti menyediakan persekitaran masa jalan Javascript (persekitaran masa jalan), iaitu node.js.

node.js merangkumkan enjin Chrome V8 Ia adalah platform pembangunan yang membolehkan JavaScript dijalankan pada pelayan Ia menjadikan JavaScript sebagai bahasa skrip setanding dengan bahasa bahagian pelayan seperti PHP, Python. Perl, dan Ruby.

2. npm

alat pengurusan pakej node.js, digunakan untuk menguruskan pakej, pemalam, alatan, arahan, dsb. yang diperlukan di hadapan kami secara seragam projek tamat. Mudah dibangunkan dan diselenggara. npm akan memuat turun pemalam melalui arahan pemasangan npm berdasarkan konfigurasi kebergantungan nama pemalam dan nombor versi yang sepadan dalam fail konfigurasi package.json Selepas memuat turun, ia akan diletakkan secara automatik di bawah direktori node_modules .

3 ES6

Versi baharu Javascript, singkatan kepada ECMAScript6. Menggunakan ES6 kami boleh memudahkan kod JS kami sambil memanfaatkan ciri berkuasa yang disediakan untuk melaksanakan logik JS dengan cepat.

4. Babel

Pemalam yang menukar kod ES6 kepada kod ES5 yang serasi dengan penyemak imbas.

5. Alat pembinaan projek vue-cli

Alat perancah untuk membina persekitaran yang diperlukan untuk pembangunan dan secara automatik menjana struktur direktori projek Vue.

6. Menghala vue-router

Buat aplikasi halaman tunggal kami hanya melakukan penukaran penghalaan, dan halaman yang dipasang dari komponen dipetakan ke dalam laluan. Penghalaan ialah pemalam teras bagi aplikasi tunggal kami

7 vuex pengurusan negeri

pustaka pengurusan negeri, yang boleh difahami sebagai pengesyoran berpusat data global yang kecil. barang seboleh-bolehnya Jangan guna vuex, nanti menyusahkan sikit, mekanisme bas boleh handle sepenuhnya. Ia digunakan untuk mengurus interaksi dan penggunaan semula pelbagai data secara seragam dalam projek kami dan menyimpan objek data yang kami perlukan.

8. http request tool axios

Ajax berkapsul yang boleh dikapsulkan mengikut situasi projek telah melepasi ES6 Promise yang dikapsulkan

9. Pek web alat pembungkusan fail

boleh membungkus dan memampatkan fail projek bahagian hadapan kami ke dalam js, ​​dan boleh dimuatkan melalui vue-loader dan pemuat lain Laksanakan penukaran dan pemuatan sintaks. Terjemah teknologi seperti TypeScript, SCSS, LESS, stylus (CSS preprocessor) yang tidak boleh dihuraikan secara langsung oleh penyemak imbas kepada kod yang boleh dihuraikan terus oleh penyemak imbas.

10. Vue.js

Ia ialah rangka kerja MVVM yang ringan.

Responsif: Halaman bertindak balas kepada perubahan data

Paradigma pengaturcaraan: pengaturcaraan deklaratif (js ialah pengaturcaraan imperatif)

Pengikatan data dua hala (apabila paparan diubah suai, data juga akan Berikan nilai kepada model, dan apabila model ditukar, ia juga akan ditunjukkan dalam paparan).

Instance Vue

Walaupun ia tidak mengikut model MVVM sepenuhnya, reka bentuk Vue juga diilhamkan oleh ia. Oleh itu, nama pembolehubah

(singkatan daripada ViewModel) sering digunakan dalam dokumen untuk mewakili kejadian Vue.

var vm = new Vue({
  // 选项
  el:"#app",  //挂载要管理的元素，【string（CSS 选择器）| Element（HTMLElement 实例）】只在用 new 创建实例时生效。
  data:{     //定义数据，【Object | Function】组件的定义只接受 function
  	message:'hello world',
  },
  methods:{  //方法【{ [key: string]: Function }】，不应该使用箭头函数来定义 method 函数 
   plus: function () {
      this.a++
    }
  }})

Apabila tika Vue dibuat, ia menambahkan semua sifat dalam objek vm pada

sistem reaktif

Vue. Apabila nilai sifat ini berubah, paparan akan "bertindak balas", iaitu sepadan dengan nilai baharu. dataPerlu diambil perhatian bahawa hanya sifat yang sudah wujud dalam apabila tika dibuat adalah

reaktif

. Maksudnya, jika anda menambah sifat baharu, seperti: data, maka perubahan kepada tidak akan mencetuskan sebarang kemas kini paparan. Jika anda tahu anda memerlukan harta kemudian, tetapi ia kosong atau tidak wujud pada mulanya, maka anda hanya perlu menetapkan beberapa nilai awal. Contohnya: vm.b = 'hi'bSatu-satunya pengecualian di sini ialah penggunaan

, yang menghalang pengubahsuaian sifat sedia ada dan bermakna sistem respons tidak lagi boleh

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null}

menjejaki

perubahan. Kaedah Object.freeze() boleh membekukanObject.freeze() objek. Objek beku tidak boleh diubah suai lagi; apabila objek dibekukan, atribut baharu tidak boleh ditambahkan pada objek, atribut sedia ada tidak boleh dipadamkan, dan kebolehbilangan, kebolehkonfigurasian dan kebolehtulisan sifat objek yang sedia ada tidak boleh diubah suai , dan nilai atribut sedia ada tidak boleh diubah suai. Selain itu, prototaip objek tidak boleh diubah suai selepas ia dibekukan. Mengembalikan objek yang sama seperti parameter yang diluluskan. Selepas tika dipasang, elemen el ,data boleh diakses dengan freeze() ,vm.$data.

vm.$elKitaran hayat Vue dan aplikasi di bawah kitaran hayat yang berbeza

Kitaran hayat: proses daripada penciptaan hingga kematian objek.

Kait kitaran hayat: dicipta, dipasang, dikemas kini, dimusnahkan

Di atas ialah vue Kaedah kitaran hayat di laman web rasmi boleh dibahagikan secara kasar kepada empat peringkat: sebelum/selepas penciptaan, sebelum/selepas pemasangan, sebelum/selepas mengemas kini dan sebelum/selepas pemusnahan. Status setiap peringkat diringkaskan seperti berikut:

beforeCreate: Apabila kitaran hayat beforeCreate dilaksanakan, data dalam data dan kaedah belum dimulakan, jadi data dalam data dan kaedah tidak boleh digunakan pada masa ini. Kaedah

dicipta: data dan kaedah telah dimulakan pada masa ini, anda boleh menggunakan kaedah dalam kaedah dan data dalam data

beforeMount: templat Templat telah disusun, tetapi belum dipasang pada halaman Pada masa ini, halaman masih dalam keadaan sebelumnya

dilekapkan. : Pada masa ini, pemulaan instance Vue selesai, DOM dipasang dan anda boleh mengendalikan dom secara terus atau menggunakan pustaka dom pihak ketiga

beforeUpdate: Pada masa ini. data telah dikemas kini, tetapi halaman itu belum disegerakkan lagi

dikemas kini: data dan halaman Semua telah dikemas kini

sebelumDestory: The Vue instance memasuki fasa pemusnahan, tetapi semua data dan kaedah, arahan, penapis, dsb. tersedia

dimusnahkan : Komponen telah dimusnahkan pada masa ini, dan data, kaedah, dsb. tidak tersedia

Mengikut pengenalan di atas, empat kitaran hayat beforeCreate, create, beforeMount, dan mounted akan dilaksanakan apabila halaman dimuatkan buat kali pertama, jadi Kami biasanya memproses permintaan http untuk mendapatkan data atau melakukan pemprosesan tertentu pada data dalam fasa yang dibuat Kami akan mengendalikan dom dalam fasa yang dipasang, seperti menggunakan jquery atau perpustakaan dom pihak ketiga yang lain. Kedua, berdasarkan perbezaan dalam data dan status halaman dalam kitaran berbeza di atas, kami juga boleh melakukan operasi lain yang lebih banyak, jadi status pembangunan setiap kitaran hayat adalah sangat penting, dan mesti difahami supaya kami boleh mempunyai lebih banyak kawalan ke atas Vue .

Pengesyoran berkaitan: tutorial video vue.js

Atas ialah kandungan terperinci Nota teknikal Vue: Timbunan teknologi Vue (penjelasan gambar dan teks terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!