Bagaimana untuk membina vue

Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan pelbagai alatan dan sumber untuk membantu pembangun membina aplikasi satu halaman. Dalam artikel ini, kami akan membincangkan asas membina dan menggunakan Vue.

Pemasangan dan konfigurasi Vue:

1. Sebelum memulakan binaan Vue, anda perlu memasang Node.js pada mesin tempatan anda, yang menyediakan alat baris arahan mudah untuk mengurus pelbagai kebergantungan pembangunan dan tugasan.

2. Pasang Vue.js
   Anda boleh memasang Vue.js pada mesin tempatan anda melalui arahan berikut:

   npm install vue

   Salin selepas log masuk

3. Mengenai Vue-cli
   Vue-cli ialah alat perancah yang disediakan secara rasmi oleh Vue.js untuk membina projek berskala besar Ia menyediakan alat penjanaan perancah konfigurasi sifar yang pantas untuk memudahkan pembangun membina projek Vue dengan cepat. Arahan pemasangan adalah seperti berikut:

   npm install -g @vue/cli

   Salin selepas log masuk

Penggunaan asas Vue:

1. Instance Vue
   Unit pembinaan Vue yang paling asas ialah tika Vue , yang merupakan teras Vue , merangkumi modul logik asas.

Berikut ialah contoh Vue mudah yang terikat pada elemen DOM dengan id apl.

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

2. Arahan
   Arahan Vue ialah atribut khas yang ditentukan dengan awalan v- pada teg HTML yang digunakan untuk mengikat ungkapan kepada elemen HTML yang ditentukan.

Berikut ialah kes mudah menggunakan v-if untuk bertukar kepada perenggan teks yang berbeza:

<div id="app">
  <p v-if="seen">你看到了我！</p>
</div>

3. Komponen
   Dalam Vue, komponen ialah Abstraksi yang boleh dilihat sebagai elemen tersuai.

Berikut ialah komponen mudah untuk memaparkan mesej:

var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

4. Laluan
   Dalam Vue, penghalaan dianggap sebagai komponen yang berasingan, menggunakan Ia membolehkan navigasi antara halaman .

Berikut ialah contoh penghalaan mudah:

Vue.component('message', {
  props: ['text'],
  template: '<div>{{ text }}</div>'
})

var app = new Vue({
  el: '#app',
  data: {
    message: '你好呀！'
  }
})

Ringkasan:

Artikel ini memperkenalkan pembinaan dan penggunaan asas Vue, termasuk pemasangan dan konfigurasi, contoh, Arahan, komponen, dan penghalaan. Vue menyediakan pelbagai fungsi dan alatan yang boleh menyelesaikan tugas pembangunan bahagian hadapan dengan mudah Jika anda belum menggunakan Vue lagi, anda boleh mencubanya.

Atas ialah kandungan terperinci Bagaimana untuk membina vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!