Latihan pembelajaran Vue: cipta kaunter mudah-Soal Jawab bahagian hadapan-php.cn

Latihan pembelajaran Vue: cipta kaunter mudah

PHPz

Lepaskan： 2023-04-13 11:25:08

asal

1138 orang telah melayarinya

Vue ialah rangka kerja JavaScript yang ringan dengan penggunaan tinggi dan fungsi berkuasa dalam pembangunan bahagian hadapan, terutamanya dalam pembangunan aplikasi satu halaman. Keluk pembelajaran Vue agak lancar, mudah untuk dimulakan, dan dokumentasinya sangat terperinci Terdapat juga sejumlah besar tutorial dan kes di Internet untuk rujukan.

Contoh pertama Vue ialah mencipta kaunter ringkas, yang digunakan terutamanya untuk memperkenalkan penggunaan asas Vue. Mari kita lihat bersama-sama.

Mula-mula, perkenalkan fail Vue JS ke dalam halaman HTML:

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

Salin selepas log masuk

Kemudian, tentukan kawasan pembilang dalam HTML dan tambah dua butang, satu untuk menambah Nilai pembilang, nilai digunakan untuk mengurangkan pembilang:

<div id="app">
  <p>计数器的值是：{{ counter }}</p>
  <button v-on:click="add">增加</button>
  <button v-on:click="minus">减少</button>
</div>

Salin selepas log masuk

Di bahagian atas kawasan ini, kami mentakrifkan teg  untuk memaparkan nilai pembilang, yang diikat di sini melalui {{}} sintaks data Vue, iaitu nilai pembolehubah counter. Dalam dua butang, kami mengikat kaedah add dan minus masing-masing, dan menentukan acara klik v-on:click.

Akhir sekali, takrifkan tika Vue dalam JavaScript dan takrifkan counter pembolehubah dan kaedah yang sepadan:

new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    add: function() {
      this.counter++;
    },
    minus: function() {
      this.counter--;
    }
  }
})

Salin selepas log masuk

Di sini, kami mentakrifkan tika Vue dengan el Atribut menentukan kawasan yang akan dikawal oleh Vue, iaitu kawasan DIV id="app" yang ditakrifkan sebelum ini. Pembolehubah data ditakrifkan dalam atribut counter dan nilai awalnya ialah 0. Terdapat dua kaedah yang ditakrifkan dalam atribut methods, satu untuk meningkatkan nilai pembilang dan satu untuk menurunkan nilai pembilang.

Kini, apabila kita membuka halaman HTML, kita dapat melihat bahawa pembilang muncul pada halaman, dengan nilai awal 0. Apabila kita mengklik butang "Tingkatkan", nilai pembilang akan meningkat sebanyak 1 apabila kita mengklik butang "Kurang", nilai pembilang akan berkurangan sebanyak 1; Ini adalah contoh pertama Vue.

Masih jauh lagi perjalanan untuk mempelajari Vue, tetapi melalui contoh kaunter mudah ini, kita boleh memahami secara kasar penggunaan asas Vue. Seterusnya, kami boleh terus mempelajari komponen, arahan, penapis dan penggunaan lanjutan Vue yang lain untuk menjadikan pembangunan bahagian hadapan lebih mudah dan lebih cekap.

Atas ialah kandungan terperinci Latihan pembelajaran Vue: cipta kaunter mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!