Ringkasan pengetahuan asas Vue.js_Others

Pengenalan

vue.js ialah perpustakaan yang digunakan untuk membina antara muka aplikasi web

Secara teknikal, Vue.js memfokuskan pada lapisan ViewModel corak MVVM, yang menghubungkan paparan dan model pengikatan data dalam dua cara. Manipulasi DOM sebenar dan pemformatan output disarikan ke dalam Arahan dan Penapis

Dalam bidang falsafah, cuba jadikan API pengikat data MVVM semudah mungkin. Modulariti dan kebolehkomposisian juga merupakan pertimbangan reka bentuk yang penting. Vue bukanlah rangka kerja yang komprehensif, ia direka bentuk untuk menjadi mudah dan fleksibel. Anda boleh menggunakannya untuk prototaip pantas, atau campur dan padankan dengan perpustakaan lain untuk menentukan tindanan bahagian hadapan anda.

Vue. js API merujuk kepada AngularJS, KnockoutJS Ractive.js Rivets.js. Walaupun terdapat persamaan, saya percaya Vue.js menawarkan nilai yang membolehkan anda menukar beberapa rangka kerja sedia ada

Walaupun anda sudah biasa dengan beberapa istilah ini, anda disyorkan untuk melihat gambaran keseluruhan konsep berikut, kerana konsep anda tentang istilah ini mungkin berbeza dalam Vue.js berikut

Gambaran Keseluruhan Konsep

ViewModel

Objek yang menyegerakkan model dan pandangan Dalam Vue.js, ViewModels ialah pembina bagi Vue yang disegerakan atau subkelasnya

var vm = new Vue({ /* options */ })

Ini ialah objek utama yang anda akan berinteraksi sebagai pembangun apabila menggunakan Vue.js. Untuk butiran lanjut, sila lihat Kelas: Vue.

Lihat

HTML/DOM sebenar yang pengguna lihat

vm.$el // The View

Apabila menggunakan Vue.js, kecuali untuk arahan tersuai anda sendiri, anda hampir tidak akan menyentuh operasi DOM Apabila data dikemas kini, kemas kini paparan akan dicetuskan secara automatik Kemas kini paparan boleh menjadi sangat tepat untuk setiap nod testNode batch dan laksanakan secara tak segerak sekali gus memberikan prestasi yang lebih baik.

Model

Ini ialah objek Javascript yang diubah suai sedikit

vm.$data // The Model

Dalam Vue.js, model hanyalah objek Javascript dan objek data yang ringkas Anda boleh memanipulasi sifatnya dan melihat model, memerhati perubahannya dan mendapatkan pemberitahuan. Vue.js menggunakan pengambil/penetap ES5 untuk menukar atribut dalam objek data, yang membenarkan operasi langsung tanpa semakan kotor.

Objek data akan bermutasi apabila sesuai, jadi mengubah suainya mempunyai kesan yang sama seperti mengubah suai vm.$data melalui rujukan. Ini juga memudahkan berbilang contoh ViewModel untuk memerhati sekeping data yang sama.

Untuk butiran teknikal, sila lihat Pilihan Instalasi: data.

Arahan

Atribut HTML peribadi memberitahu Vue.js untuk melakukan beberapa pemprosesan pada DOM

<div v-text="message"></div>

Elemen div di sini mempunyai arahan teks-v, dan nilainya ialah mesej Ini bermakna memberitahu Vue.js supaya kandungan nod div ini disegerakkan dengan atribut mesej dalam viewMode

. Arahan

boleh merangkumi sebarang operasi DOM. Contohnya, v-attr mengendalikan elemen atribut, v-repeat mengklonkan elemen berdasarkan tatasusunan, dan v-on melampirkan pemantauan acara, yang akan kita bincangkan kemudian

Ikatan Misai

Anda juga boleh menggunakan ikatan gaya misai, dalam teks dan atribut. Mereka menterjemah ke dalam arahan v-attr teks-v. Contohnya:

<div id="person-{{id}}">Hello {{name}}!</div>

Walaupun ia mudah, terdapat beberapa perkara yang perlu anda perhatikan:

Jika anda menetapkan atribut src imej, permintaan HTTP akan dihantar, jadi apabila templat dihuraikan buat kali pertama dan 404 muncul, lebih baik menggunakan v-attr pada masa ini

Internet Explorer akan mengalih keluar atribut gaya dalaman yang tidak sah apabila menghuraikan HTML, jadi jika kita mahu menyokong IE mengikat CSS sebaris saya sentiasa menggunakan gaya v

Di dalam v-html, anda boleh menggunakan tiga kurungan kerinting {{{seperti ini}}} untuk memproses HTML yang tidak dilepaskan, tetapi ini akan mempunyai potensi serangan XSS dan boleh membuka tingkap, jadi disyorkan untuk benar-benar selamat Hanya lakukan ini apabila data lengkap atau bersihkan HTML yang tidak dipercayai melalui penapis saluran paip tersuai

Penapis

Anda boleh menggunakan fungsi untuk memproses data mentah ini sebelum mengemas kini paparan. Mereka menggunakan arahan "talian paip" atau mengikat:

<div>{{message | capitalize}}</div>

Sekarang sebelum kandungan teks div dikemas kini, nilai mesej ini akan diproses oleh fungsi huruf besar. Untuk butiran, sila lihat Penapis dalam Kedalaman.

Komponen

Dalam Vue.js, komponen ialah pembina model paparan ringkas, didaftarkan melalui Vue.component(ID, pembina). Arahan komponen v bagi templat model paparan lain boleh disarangkan melalui ID yang berkaitan. Mekanisme ringkas ini membolehkan model paparan deklaratif digunakan semula dan digubah dengan cara yang serupa dengan komponen web, tanpa memerlukan penyemak imbas terkini atau polifill tugas berat. Dengan memecahkan aplikasi kepada komponen yang lebih kecil, hasilnya adalah asas kod yang sangat dipisahkan dan boleh diselenggara. Untuk butiran lanjut, lihat Mengarang ViewModels.

Contoh Pantas

<div id="demo">
  <h1>{{title | uppercase}}</h1>
  <ul>
    <li
      v-repeat="todos"
      v-on="click: done = !done"
      class="{{done &#63; 'done' : ''}}">
      {{content}}
    </li>
  </ul>
</div>

 
var demo = new Vue({
  el: '#demo',
  data: {
    title: 'todos',
    todos: [
      {
        done: true,
        content: 'Learn JavaScript'
      },
      {
        done: false,
        content: 'Learn vue.js'
      }
    ]
  }
})

Terjemahan kasar, sila nyatakan sebarang ralat