Cara menulis aplikasi satu halaman responsif menggunakan Vue.js dan JavaScript

Cara menulis aplikasi satu halaman responsif menggunakan Vue.js dan JavaScript

Kata Pengantar:
Dalam beberapa tahun kebelakangan ini, bidang pembangunan bahagian hadapan telah berubah dengan pantas, dan pelbagai rangka kerja telah muncul satu demi satu. Antaranya, Vue.js, sebagai rangka kerja bahagian hadapan yang ringan, telah digemari oleh majoriti pembangun. Vue.js menyediakan cara yang ringkas dan cekap untuk membina aplikasi web dengan menggunakan corak MVVM.

Artikel ini akan memperkenalkan cara menggunakan Vue.js dan JavaScript untuk menulis aplikasi satu halaman responsif dan menyediakan kod sampel yang sepadan. Kami akan menerangkan dari aspek berikut: mencipta contoh Vue, pengikatan dan kereaktifan data, pembangunan komponen dan pemprosesan acara.

1 Buat contoh Vue
Sebelum menulis aplikasi satu halaman menggunakan Vue.js, kita perlu mencipta tika Vue terlebih dahulu. Contoh Vue ialah teras Vue.js dan digunakan untuk mengurus keadaan dan logik interaksi keseluruhan aplikasi.

Langkah-langkah untuk mencipta tika Vue adalah seperti berikut:

1. Perkenalkan perpustakaan Vue.js:

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

   Salin selepas log masuk

2. Tambahkan bekas dalam halaman HTML untuk memaparkan kandungan yang diberikan oleh contoh Vue:

Buat tika Vue, Dan lekapkannya pada bekas yang ditentukan:

3. <div id="app"></div>

   Salin selepas log masuk

   Kod di atas mencipta tika Vue bernama apl dan lekapkannya pada bekas dengan apl id. Data bernama mesej ditakrifkan dalam atribut data bagi contoh Vue, dengan nilai awal 'Hello Vue!'.

2. Pengikatan dan responsif data

Berikut ialah contoh pengikatan data menggunakan Vue.js:

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

Dalam kod di atas, kami menggunakan sintaks pendakap kerinting berganda untuk mengikat mesej data pada teg p. Apabila tika Vue dibuat, kandungan dalam teg p akan dikemas kini secara automatik dengan nilai mesej.

Selain itu, kami juga menggunakan arahan v-on:click pada label butang untuk menentukan fungsi pemprosesan acara klik changeMessage. Apabila butang diklik, fungsi changeMessage akan dilaksanakan, dengan itu menukar nilai mesej dan mencetuskan kemas kini paparan.

3. Pembangunan berasaskan komponen

Berikut ialah contoh pembangunan komponen menggunakan Vue.js:

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="changeMessage">Change Message</button>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    changeMessage: function() {
      this.message = 'Hello world!'
    }
  }
})
</script>

Dalam kod di atas, kami menggunakan kaedah Vue.component untuk mentakrifkan komponen bernama my-component dan mentakrifkan komponen dalam struktur HTML dan kandungan. Seterusnya, tambahkan komponen pada aplikasi dalam contoh Vue untuk memaparkan komponen pada halaman.

4 Pemprosesan acara

Berikut ialah contoh penggunaan Vue.js untuk pemprosesan acara:

<div id="app">
  <my-component></my-component>
</div>
<script>
Vue.component('my-component', {
  template: '<p>Hello from my component!</p>'
});

var app = new Vue({
  el: '#app'
});
</script>

Dalam kod di atas, kami menggunakan arahan v-on:click pada butang untuk mendengar acara klik, dan tentukan kaedah handleClick dalam atribut kaedah bagi contoh Vue . Apabila butang diklik, kaedah handleClick akan dicetuskan dan kotak amaran akan muncul.

Ringkasan:

Atas ialah kandungan terperinci Cara menulis aplikasi satu halaman responsif menggunakan Vue.js dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!