Rumah >hujung hadapan web >tutorial js >Model VueJS MVVM berbanding HTML Tulen

Model VueJS MVVM berbanding HTML Tulen

王林asal: 2024-08-21 10:33:361207semak imbas

Artikel asal: http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-Model dan -Pure-HTML5-Comparison/

Perbezaan antara Vue.js dan HTML5 Asli

Terdapat banyak kaedah dan rangka kerja untuk membina sistem bahagian hadapan web, seperti React, AngularJS, Vue.js, dsb. Sangat mungkin untuk membina sistem menggunakan HTML5 dan JavaScript asli, tetapi biasanya menggunakan rangka kerja yang baik boleh melaksanakan sistem dengan corak reka bentuk yang lebih baik dari segi struktur dan keselamatan.

Alat atau seni bina biasanya dicipta kerana pembangun telah menghadapi kesukaran tertentu. Sebagai contoh, jQuery dicipta untuk menggunakan JavaScript pada pelayar yang menyokong piawaian yang berbeza, dan ia merupakan perpustakaan pertama yang mengawal DOM (Document Object Modal) menggunakan pemilih CSS. QuerySelector HTML5 mereplikasi ciri hebat ini untuk memudahkan HTML memanipulasi DOM.

Mengapa anda memerlukan VueJS

Apabila menggunakan JavaScript HTML5 Tulen untuk mengakses DOM untuk mengambil data daripada pepohon HTML, terdapat banyak kerja yang perlu dilakukan, seperti elemen penyasaran, menambah pendengar untuk mengesan interaksi pengguna pada UI atau apabila tindakan sasaran ditangkap Mengembalikan data apabila mendapatkannya sebenarnya sangat intensif sumber.

<html>
  <body>
    <h1>Checkbox with pure HTML5 syntax</h1>
    <label>
      <input type="checkbox" name="group1" value="check1" />
      checkbox 1
    </label>
    <label>
      <input type="checkbox" name="group1" value="check2" />
      checkbox 2
    </label>
  </body>
</html>
<script>
window.onload = ()=>{
  const group1: NodeListOf<HTMLInputElement> | undefined =
      document.querySelectorAll("input[name=group1]");
    if (!group1) return;
    group1.forEach((checkbox) => {
      checkbox.addEventListener("change", (e: Event) => {
        if (!e.target) return;
        const targetValue = (e.target as HTMLInputElement).value.toString();
        const checked = (e.target as HTMLInputElement).checked;
        if (!checked) {
          this.selected = this.selected.filter(
            (select) => select !== targetValue
          );
        } else {
          this.selected = [...this.selected, targetValue];
        }
      });
  });
});

VueJS MVVM 模型與 Pure HTML比較

Berbanding dengan JavaScript HTML5 asli (atau jQuery) yang mengendalikan DOM secara langsung, Vue.js mempunyai model MVVM sendiri yang boleh mengubah suai DOM sambil mendapatkan model data baharu. Dalam erti kata lain, kita boleh menumpukan pada struktur data dan bukannya mereka bentuk model kita sendiri untuk memanipulasi DOM secara langsung.

Kedua-dua pendekatan sesuai untuk situasi yang berbeza, tetapi Vue.js sebenarnya menyediakan laluan yang lebih mudah untuk membina bahagian hadapan web.

Menggunakan Vue.js

<div>      
      <label>
        check 1
        <input type="checkbox" v-model="checkboxList" value="1" />
      </label>
      <label>
        check 2
        <input type="checkbox" v-model="checkboxList" value="2" />
      </label>
</div>
export default Vue.extend({
  data: () => ({
    checkboxList: [],
  }),
});

contoh

https://github.com/kueiapp/vue-typescript-tutorial/blob/main/src/App.vue

Artikel asal: http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-Model dan -Pure-HTML5-Comparison/

Atas ialah kandungan terperinci Model VueJS MVVM berbanding HTML Tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript typescript html5 jquery css html Object JS dom github http https ui

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara Membina Cangkuk Reaksi Yang Mengendalikan Permintaan BerurutanArtikel seterusnya：Cara Membina Cangkuk Reaksi Yang Mengendalikan Permintaan Berurutan

Artikel berkaitan

Lihat lagi