Cara menggunakan rangka kerja vue bahagian hadapan

Dengan perkembangan teknologi Internet, teknologi hadapan juga sentiasa membangun dan berinovasi. Vue.js ialah rangka kerja bahagian hadapan yang popular yang menggunakan idea berasaskan data dan berasaskan komponen untuk membantu pembangun bahagian hadapan membina aplikasi satu halaman dengan cepat. Artikel ini akan memperkenalkan konsep asas dan penggunaan rangka kerja Vue.

1. Gambaran keseluruhan rangka kerja Vue

Vue.js ialah pustaka JavaScript ringan yang direka untuk membina antara muka pengguna Ia juga dipanggil rangka kerja MVVM (model pandangan-pandangan model). Pustaka teras Vue.js hanya memfokuskan pada lapisan paparan dan boleh disepadukan dengan mudah dengan perpustakaan pihak ketiga atau projek sedia ada yang lain. Vue.js menyediakan dua ciri teras: pengikatan data responsif dan komponen paparan boleh gubah.

2. Konsep teras rangka kerja Vue

1 Pengikatan data

Vue.js menggunakan idea terdorong data Mengubah suai data pada antara muka akan mempengaruhi data secara langsung model dan sebaliknya. Vue.js melaksanakan pengikatan data dengan menggunakan kaedah Object.defineProperty(). Apabila sekeping data berubah, Vue.js akan mengemas kini kandungan lapisan paparan secara automatik.

2. Sintaks Templat

Templat ialah konsep penting dalam Vue.js Ia adalah bahasa yang digunakan untuk menulis HTML, yang mengandungi sintaks khas Vue.js untuk data Bind dan logik kawalan. . Vue.js menggunakan pengkompil berasaskan AST untuk menyusun templat ke dalam fungsi pemaparan.

3. Pengkomponenan

Vue.js menyediakan sistem komponen yang sangat berkuasa, membolehkan pembangun membahagikan aplikasi yang besar kepada berbilang komponen. Setiap komponen mengandungi kod HTML, CSS dan JavaScriptnya sendiri dan boleh disarangkan dalam komponen lain. Komponen secara berkesan boleh mencapai penggunaan semula kod dan pemisahan logik, menjadikan aplikasi lebih mudah untuk diselenggara dan dibangunkan.

3. Cara menggunakan rangka kerja Vue

1 Pasang Vue.js

Pertama, kita perlu memasang pustaka Vue.js dalam projek. Pemasangan boleh dilengkapkan melalui arahan npm, seperti berikut:

npm install vue

2 Cipta contoh Vue

Instance Vue ialah komponen Vue bebas yang boleh digunakan semula, iaitu objek JavaScript. Kita boleh menggunakan pembina Vue untuk mencipta contoh Vue, seperti yang ditunjukkan di bawah:

var vm = new Vue({
  //选项
})

3 Templat dan sintaks templat

Templat dalam Vue.js menggunakan beberapa sintaks khas, Digunakan untuk mengikat. data dan logik kawalan. Ini termasuk ungkapan interpolasi, arahan, penapis, dsb.

Ungkapan interpolasi

Ungkapan interpolasi digunakan untuk memasukkan data dalam templat Sintaks ialah kurungan kerinting berganda, seperti yang ditunjukkan di bawah:

<p>{{ message }}</p>

di mana mesej ialah Data. dalam contoh Vue. Arahan

Arahan

ialah atribut HTML khas yang digunakan untuk memanipulasi gelagat elemen DOM. Sintaks arahan bermula dengan v- dan menggunakan ungkapan dalam nilai atribut. Contohnya:

<button v-on:click="submit">Submit</button>

Antaranya, arahan v-on digunakan untuk mengikat acara klik, dan serahkan ialah kaedah dalam contoh Vue.

Penapis

Penapis boleh digunakan untuk mengendalikan pemformatan teks dalam templat. Ia menggunakan simbol paip (|) sebagai pembatas dan boleh digunakan dengan ungkapan interpolasi. Contohnya:

<p>{{ message | toUpperCase }}</p>

Antaranya, toUpperCase ialah penapis tersuai yang digunakan untuk menukar teks dalam mesej kepada huruf besar.

4. Komponen dan komposisi

Komponen ialah konsep penting dalam Vue.js, yang mewakili blok kod boleh gubah dalam aplikasi. Komponen Vue boleh mengandungi templat, model data dan beberapa kaedah. Komponen boleh bersarang secara berterusan untuk membentuk aplikasi yang kompleks. Mencipta komponen memerlukan dua langkah:

1) Tentukan komponen

Vue.component('my-component', {
  template: '<p>{{ message }}</p>',
  data: function() {
    return {
      message: 'Hello World!'
    }
  }
})

Antaranya, komponen saya ialah nama komponen, templat dan data tentukan templat dan data bagi komponen masing-masing.

2) Menggunakan komponen

Apabila menggunakan komponen tersuai dalam kod HTML aplikasi anda, anda perlu mendaftarkan komponen dalam contoh Vue. Contohnya:

<div id="app">
  <my-component></my-component>
</div>
var vm = new Vue({
  el: '#app'
})

Kod di atas akan memaparkan templat daripada komponen tersuai dalam aplikasi.

4. Ringkasan

Vue.js ialah rangka kerja bahagian hadapan yang popular yang menggunakan corak MVVM dan idea pembangunan komponen. Ia mempunyai ciri teras seperti pengikatan data responsif, sintaks templat dan sistem komponen yang berkuasa, yang boleh membantu pembangun bahagian hadapan membina aplikasi satu halaman dengan cepat. Artikel ini memperkenalkan konsep asas dan penggunaan rangka kerja Vue, dan berharap dapat membantu kerja pembangunan bahagian hadapan anda.

Atas ialah kandungan terperinci Cara menggunakan rangka kerja vue bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!