[Atur dan kongsi] Beberapa arahan Vue untuk membantu anda meningkatkan kecekapan!

Artikel ini terus membantu anda mempelajari Vue, dan mengatur serta berkongsi beberapa arahan Vue untuk membantu anda meningkatkan kecekapan. Saya harap ia akan membantu semua orang.

Ramai pelajar yang menggunakan Vue cenderung untuk mengabaikan arahan dengan mudah kerana di sini kami menganggap ramai pelajar yang masih pemula belum mula berhubung dengan Vue, sebelum ini memperkenalkan v-clos Mula-mula kita tulis demo kecil menggunakan v-model yang terkenal

v-model

Saya percaya semua orang sudah biasa dengan v-model To Secara ringkasnya, ia adalah Pengikatan data dua hala

digunakan untuk membuat kawalan borang dan komponen Pertama, kami membina persekitaran Vue yang kecil dan memperkenalkan Vue.js ke dalam halaman html

Inilah sedikit buah berangan untuk anda:

  <div>
    <input><br>
    这里是文本框输入的值——{{message}}
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好，几何心凉!&#39;,
    },
  })</script>

Hasil menjalankan contoh yang sangat mudah sudah tidak diragukan lagi! [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Di bawah ini kita dapat melihat hubungan dua hala dengan lebih jelas

1 Dengan menukar data dalam model dalam konsol

kita dapati bahawa kita menukar nilai bagi mesej dalam model , nilai dalam Lihat berubah dengan sewajarnya

2 Kami menyemak perubahan dalam model dengan menukar nilai dalam Lihat dalam kotak teks

<.>Kami mendapati bahawa apabila kami menukar nilai dalam Lihat melalui kotak teks, nilai dalam Model kami juga berubah dengan sewajarnya.

Ringkasan Melalui contoh di atas, adakah anda telah mendapat pemahaman yang lebih dekat tentang pengikatan dua hala Vue, kerana kami hanya boleh menggunakan elemen borang untuk melaksanakan Lihat data Sudah tentu, kami yang lain elemen bentuk juga boleh ditukar, jadi kami tidak akan menyenaraikannya satu demi satu

pengubah suai model v

1. .lazy Kita dapat melihat dalam animasi di atas bahawa kotak teks yang diikat oleh v-model akan dikemas kini kepada data Model selagi nilai kotak teks berubah Dalam banyak kes, kita mungkin melaksanakan fungsi tertentu ini mempengaruhi prestasi kami, jadi kami menggunakan
pengubah suai.lazy yang akan membantu kami menyegerakkan nilai kotak teks ke Model

Mari lihat kesan

  <div>
   <h3>我是测试——{{message}}</h3>
<input>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;&#39;,
    },
  })</script>

2.

.number Mari kita ambil kotak teks sebagai contoh Banyak kali kita memerlukan beberapa nilai untuk pengguna isi Dan nilai ini mungkin nombor yang boleh kita gunakan untuk pengiraan Pada masa ini, ramai pelajar memikirkan banyak cara, seperti penukaran, input dan penilaian, dll. Tetapi sebenarnya, terdapat pengubah dalam model v yang. boleh membantu kami memenuhi keperluan ini
Mari kita lihat melalui berangan kecil Pertama, kita ingin memasukkan nilai dalam setiap dua kotak teks dan kita boleh merumuskannya

.

Anda boleh lihat hasilnya

Kita boleh lihat hasilnya bukan seperti yang kita mahukan sebagai penyambungan bukannya penjumlahan, jadi mari kita tambahkan pengubah suai .number dan cuba

Mari kita lihat hasilnya sekali lagi

  <div>
   <h3>我是求和——{{num1+num2}}</h3>
<input><input>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;&#39;,
      num1: &#39;&#39;,
      num2: &#39;&#39;,

    },
  })</script>

3.

.trim Perbandingan relatif ini sepatutnya biasa kepada semua orang, ia adalah untuk membuang ruang, tetapi ia hanya akan mengalih keluar ruang di kedua-dua hujung kotak teks, bukan yang tengah <.>
Lihat kesannya

  <div>
   <h3>我是测试——{{message}}</h3>
<input>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;&#39;,

    },
  })</script>

Petua:

Malah, v- model yang terikat pada kotak teks di sini hanyalah gula sintaksis Atribut nilai dan peristiwa input digunakan untuk melengkapkan pengikatan dua hala , apabila nilai kotak teks berubah, kami mencetuskan peristiwa input untuk menukar nilai yang kami ikat. dan pada masa yang sama, nilai kotak teks kami juga dikaitkan dengan mesej

v-jubah Apakah sebenarnya v- cloak do? Mula-mula, mari kita lihat kod berikut

Kemudian kita dapati apabila halaman itu dipaparkan, detik berikut akan muncul

  <div>
   <h3>我是测试——{{message}}</h3>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好几何心凉&#39;,
    },
  })</script>

Dalam sekelip mata, segera

Fenomena ini berlaku semasa proses pembangunan sebenar kami, terutamanya apabila status rangkaian kami tidak begitu baik atau antara muka bahagian belakang bertindak balas dengan perlahan, jadi kami menggunakan v-cloak kami

Malah, prinsipnya ialah paparan:tiada semua orang harus memahaminya, iaitu apabila pembolehubah terikat dalam data kita mempunyai nilai, elemen Dom disembunyikan, jadi masalah di atas tidak akan berlaku >

(Mempelajari perkongsian video:

tutorial pengenalan vuejs

, Video pengaturcaraan asas)

Atas ialah kandungan terperinci [Atur dan kongsi] Beberapa arahan Vue untuk membantu anda meningkatkan kecekapan!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!