Cara menggunakan Vue untuk membina sistem asas

Dengan perkembangan pesat teknologi hadapan, Vue.js telah menjadi rangka kerja Javascript yang digunakan secara meluas dalam industri. Ia boleh digunakan untuk membina aplikasi web satu halaman yang kompleks. Artikel ini akan memperkenalkan cara menggunakan Vue untuk membina sistem asas.

1. Bermula

Pertama, kita perlu memasang Vue secara setempat. Anda boleh memuat turun terus pustaka Vue.js rasmi, atau gunakan npm untuk memasangnya seperti berikut:

npm install vue

Perkenalkan pustaka Vue.js ke dalam halaman HTML:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Anda boleh menggunakan Vue CLI ( antara muka baris arahan) untuk membina projek baharu dengan cepat. Di sini kami menggunakan Vue CLI 3 untuk mencipta projek baharu.

npm install -g @vue/cli
vue create my-project

Akan ada satu siri pilihan konfigurasi yang perlu anda isi. Selepas memilih, anda boleh membuat projek Vue baharu.

2. Cipta komponen

Vue menggunakan mod MVVM, iaitu lapisan paparan dan lapisan data dipisahkan. Melalui Vue.js, kami boleh mencipta komponen dengan cepat dan komponen adalah bersamaan dengan bekas data.

Mencipta komponen adalah sangat mudah Anda hanya perlu mendaftarkan komponen dalam contoh Vue dan mengisytiharkan data dan kaedah yang diperlukan. Berikut ialah contoh mudah untuk mencipta komponen:

<div id="app">
  <my-component></my-component>
</div>

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

new Vue({ el: '#app' })

Dalam kod di atas, kami telah mendaftarkan komponen bernama "my-component" dalam contoh Vue melalui kaedah Vue.component. Datanya datang daripada atribut data dalam kaedah message.

Akhir sekali, lekapkan komponen my-component pada elemen HTML yang ditentukan dalam contoh Vue.

3. Komunikasi komponen

Dalam Vue, komunikasi antara komponen adalah keperluan biasa yang berikut menerangkan kaedah komunikasi antara komponen.

3.1 Props

Props ialah cara untuk menghantar data kepada komponen kanak-kanak. Ia membenarkan komponen induk menghantar data kepada komponen anak melalui pengikatan harta.

Dalam templat komponen induk:

<template>
  <child-component :message="messageFromParent"></child-component>
</template>
<script>
export default {
  data() {
    return {
      messageFromParent: 'parent message'
    }
  }
}
</script>

Dalam templat komponen anak:

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>

Dalam kod di atas, kami cipta dalam komponen induk template tag Komponen kanak-kanak bernama "komponen kanak-kanak" dan menghantar rentetan bernama messageFromParent menggunakan atribut :message.

props subkomponen ialah objek yang digunakan untuk menentukan sifat dan jenis yang boleh diterima oleh komponen semasa. Dalam contoh ini, komponen anak hanya menggunakan satu atribut message dan jenisnya ialah String.

3.2 Acara

Acara ialah cara untuk membenarkan komponen kanak-kanak berkomunikasi dengan komponen induk. Ia membolehkan komponen kanak-kanak memberitahu komponen induk bahawa sesuatu telah berlaku melalui peristiwa.

Dalam templat komponen anak:

<template>
  <div @click="onChildClick">click me</div>
</template>
<script>
export default {
  methods: {
    onChildClick() {
      this.$emit('child-click')
    }
  }
}
</script>

Dalam templat komponen induk:

<template>
  <child-component @child-click="onChildClick"></child-component>
</template>
<script>
export default {
  methods: {
    onChildClick() {
      console.log('child clicked')
    }
  }
}
</script>

Dalam kod di atas, @click dalam komponen anak mendengar ke acara Klik dan mengeluarkan acara bernama "child-click" kepada komponen induk melalui kaedah $emit.

<child-component> dalam komponen induk menggunakan @child-click untuk mendengar acara ini dan apabila kaedah "onChildClick" dicetuskan, konsol akan mengeluarkan "child clicked".

4 Penghalaan

Dalam Vue, penghalaan ialah konsep yang penting. Ia membolehkan kami melompat ke halaman yang berbeza berdasarkan URL yang berbeza. Rangka kerja Vue menggunakan Penghala Vue untuk melaksanakan fungsi penghalaan.

Mula-mula anda perlu memasang Vue Router dalam projek:

npm install vue-router --save

Buat komponen penghalaan dalam fail router.js:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

Gunakan Vue.use untuk memasang Penghala Vue kemudian mentakrifkan dua laluan, iaitu halaman utama dan halaman tentang, dan menentukan komponen yang sepadan dengan setiap laluan melalui atribut component.

Akhir sekali, anda perlu memperkenalkan komponen penghalaan ke dalam contoh Vue:

import Vue from 'vue'
import router from './router'
import App from './App.vue'

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

5 Ringkasan

Dalam artikel ini, kami memperkenalkan secara ringkas cara menggunakan Vue untuk. membina sistem Asas. Dari permulaan kepada komunikasi komponen dan penghalaan, kami hanya menyentuh sebahagian kecil daripada Vue. Vue mempunyai banyak ciri dan keupayaan yang berkuasa Saya harap artikel ini boleh membantu untuk pemula.

Atas ialah kandungan terperinci Cara menggunakan Vue untuk membina sistem asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!