Model VueJS MVVM berbanding HTML Tulen-tutorial js-php.cn

Model VueJS MVVM berbanding HTML Tulen

王林

Lepaskan： 2024-08-21 10:33:36

asal

1164 orang telah melayarinya

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];
        }
      });
  });
});

Salin selepas log masuk

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: [],
  }),
});

Salin selepas log masuk

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!