Cara menggunakan vue

Vue.js ialah rangka kerja JavaScript yang popular untuk membina aplikasi web interaktif. Idea terasnya adalah untuk memisahkan pandangan dan keadaan, membolehkan pembangun membuat komponen boleh guna semula dengan mudah. Vue.js boleh dianggap sebagai pesaing kepada React.js dan Angular.js, tetapi lebih mudah untuk dimulakan, mempunyai saiz fail yang lebih kecil dan prestasi yang lebih pantas. Dalam artikel ini, kita akan membincangkan cara menggunakan Vue.js.

1. Pasang Vue.js

Untuk mula menggunakan Vue.js, anda perlu memasangnya. Vue.js boleh dipasang menggunakan npm (Pengurus Pakej Node) atau CDN (Rangkaian Penghantaran Kandungan). Memasang Vue.js menggunakan npm memerlukan menjalankan arahan berikut dalam baris arahan:

npm install vue

Jika anda menggunakan CDN, cuma tambah kod berikut:

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

2. Cipta Kejadian Vue

Setelah Vue.js dipasang, anda boleh mencipta tika Vue. Anda boleh menambah kod berikut dalam fail HTML:

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

Kod di atas akan mencipta contoh Vue dan menambah kandungan teks pada elemen HTML dengan id "aplikasi". Pendakap kerinting berkembar menunjukkan bahawa Vue mengikat pembolehubah "mesej". Kini anda perlu mentakrifkan objek Vue dalam fail JavaScript anda dan mengikatnya pada elemen HTML dengan id "aplikasi".

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

Kod di atas mengikat objek Vue pada elemen HTML dengan id "apl" dan menetapkan pembolehubah "mesej"nya kepada "Hello, Vue!". Sekarang aplikasi Vue anda sudah sedia dan memaparkan "Hello, Vue!"

3. Menggunakan Vue Bindings

Salah satu ciri Vue.js yang paling berkuasa ialah pengikatan dan arahan dua hala. Apabila keadaan aplikasi berubah, ia serta-merta ditunjukkan dalam paparan. Berikut ialah beberapa contoh pengikatan Vue.

Atribut ikat:

<img v-bind:src="imageURL">

Ini akan mengikat URL imej supaya apabila imageURL berubah, atribut src imej juga berubah.

Ikatan acara:

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

Ini akan mengikat acara klik, yang akan mencetuskan kaedah submitBorang apabila butang diklik.

Rendering Bersyarat:

<div v-if="isAuthentiticated">Welcome, user!</div>

Ini akan memberikan mesej alu-aluan apabila pengguna telah disahkan.

4. Pengkomponenan

Salah satu idea teras Vue.js ialah menguraikan paparan kepada komponen boleh guna semula. Komponen ini boleh digunakan dalam pelbagai bahagian aplikasi, dan ia dikemas kini apabila aplikasi dikemas kini. Berikut ialah contoh mencipta komponen Vue:

Vue.component('my-component', {
  props: ['name'],
  template: '<div>Hello, {{ name }}!</div>'
})

Kod di atas akan mencipta komponen Vue dan menambah atribut bernama "nama" dalam HTML. Apabila komponen diberikan, pembolehubah "nama" akan digantikan dengan nilai sifat yang sepadan. Anda boleh menggunakan komponen ini di mana-mana sahaja dalam aplikasi anda, seperti ini:

<my-component name="World"></my-component>

Ini akan menghasilkan mesej "Hello, dunia!".

5. Pengurusan Negeri

Keadaan permohonan ialah konsep yang sangat penting. Vue.js menyediakan perpustakaan Vuex untuk mengurus keadaan aplikasi. Vuex ialah pengurus negeri Vue global. Berikut ialah contoh penggunaan Vuex untuk menyimpan keadaan:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

Kod di atas akan mencipta keadaan yang dipanggil "kira" dan menyediakan kaedah yang dipanggil "kenaikan" supaya keadaan boleh dinaikkan. Kini, dalam komponen Vue, anda boleh membaca atau mengemas kini keadaan ini seperti ini:

computed: {
    count () {
      return this.$store.state.count
    }
  },
methods: {
    increment () {
      this.$store.commit('increment')
    }
  }

Kod di atas menghubungkan komponen Vue ke kedai Vuex dan menyediakan sifat terkira yang dipanggil "kira" dan kaedah A yang dipanggil " kenaikan". Aplikasi Vue anda kini telah melaksanakan pengurusan negeri.

Ringkasan

Vue.js ialah rangka kerja JavaScript fleksibel yang mudah dipelajari dan digunakan. Ia menyediakan satu set ciri yang berkuasa untuk membantu anda membina aplikasi web dinamik. Artikel ini memperkenalkan cara memasang Vue.js, mencipta tika Vue, menggunakan pengikatan Vue, komponenisasi dan pengurusan keadaan. Semoga contoh mudah Vue.js ini membantu anda menerokai lagi keupayaan rangka kerja tersebut.

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