Rumah  >  Artikel  >  hujung hadapan web  >  [Atur dan kongsi] Beberapa arahan Vue untuk membantu anda meningkatkan kecekapan!

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

青灯夜游
青灯夜游ke hadapan
2023-03-15 20:22:311382semak imbas

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.

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

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

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

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]

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

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

1 Dengan menukar data dalam model dalam konsol

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

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

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

<.>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>

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

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

.

[Atur dan kongsi] Beberapa arahan Vue untuk membantu anda meningkatkan kecekapan!Anda boleh lihat hasilnya


[Atur dan kongsi] Beberapa arahan Vue untuk membantu anda meningkatkan kecekapan!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>

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

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>


[Atur dan kongsi] Beberapa arahan Vue untuk membantu anda meningkatkan kecekapan!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[Atur dan kongsi] Beberapa arahan Vue untuk membantu anda meningkatkan kecekapan!

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

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 >

1[Atur dan kongsi] Beberapa arahan Vue untuk membantu anda meningkatkan kecekapan! (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!

Kenyataan:
Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam