Vue adalah perpustakaan JavaScript yang kecil dan ringan. Ini memiliki API sederhana dan mudah dipahami yang membuat pengembang lebih mudah dan lebih nyaman saat mengembangkan aplikasi web. Faktanya, apa yang selalu membuat Vue bangga adalah kenyamanan, eksekusi, dan fleksibilitasnya.
Tujuan tutorial ini adalah untuk menggunakan beberapa contoh untuk memberi Anda gambaran tentang beberapa konsep dan fitur dasar. Di tutorial lain, Anda akan mempelajari fitur Vue yang lebih berguna untuk membangun proyek yang dapat diskalakan dengan Vue.
Ikatan data MVVM
Inti dari MVVM adalah untuk menghubungkan tampilan dan model melalui pengikatan data, sehingga perubahan data secara otomatis dipetakan untuk melihat pembaruan. Vue.js meminjam mekanisme instruksi Angular dalam desain API pengikat data: Pengguna dapat mengimplementasikan pengikatan data melalui atribut HTML dengan awalan khusus, atau menggunakan interpolasi templat brace keriting umum, atau menggunakan pengikatan dua arah pada elemen formulir:
<!-Directive-> <span v-text = "msg"> </span> <!-interpolation-> <span> {{msg}} </span> <!-binding dua arah-> <input v-model = "msg">Interpolasi pada dasarnya adalah instruksi, hanya untuk memfasilitasi penulisan templat. Selama kompilasi template, Vue.js akan membuat objek arahan untuk setiap simpul DOM yang membutuhkan pembaruan dinamis. Setiap kali data yang diamati oleh objek instruksi berubah, itu akan melakukan operasi DOM yang sesuai pada simpul target terikat. Ikatan data berbasis instruksi memungkinkan operasi DOM spesifik untuk dienkapsulasi secara wajar dalam definisi instruksi. Kode bisnis hanya perlu melibatkan templat dan operasi pada status data, yang sangat meningkatkan efisiensi pengembangan dan pemeliharaan aplikasi.
Tidak seperti Angular, Vue.js 'API tidak memiliki konsep rumit seperti modul, pengontrol, ruang lingkup, pabrik, layanan, dll., Dan semuanya didasarkan pada "viewmodel instance":
<!-Template-> <Div id = "app"> {{msg}} </div> // objek asli adalah data var data = {msg: 'halo!'} // Buat instance viewModel var vm = vue baru ({// Pilih elemen target el: '#app',/Berikan data awal: data})Hasil Rendering:
<Div id = "app"> halo! </div>
Saat rendering, Vue.js juga telah menyelesaikan pengikatan data yang dinamis: Jika nilai data.msg diubah, DOM akan diperbarui secara otomatis. Bukankah itu sangat sederhana dan mudah dimengerti? Selain itu, Vue.js juga telah sangat menyederhanakan API arahan dan filter khusus. Jika Anda memiliki pengalaman pengembangan sudut, Anda akan memulai dengan sangat cepat.
Implementasi Pengamatan Data
Prinsip implementasi pengamatan data VUE.JS pada dasarnya berbeda dari sudut sudut. Pembaca yang tahu Angular mungkin tahu bahwa pengamatan data Angular menggunakan mekanisme pemeriksaan kotor. Setiap instruksi akan memiliki objek yang sesuai yang digunakan untuk mengamati data, yang disebut pengamat; Akan ada banyak pengamat dalam ruang lingkup. Setiap kali antarmuka perlu diperbarui, Angular akan beralih melalui semua pengamat dalam ruang lingkup saat ini, mengevaluasinya satu per satu, dan kemudian membandingkannya dengan nilai -nilai lama yang disimpan sebelumnya. Jika hasil evaluasi berubah, pembaruan yang sesuai akan dipicu. Proses ini disebut siklus pencernaan. Ada dua masalah dengan pemeriksaan kotor:
Perubahan data apa pun berarti bahwa setiap pengamat dalam ruang lingkup saat ini perlu dievaluasi kembali, jadi ketika jumlah pengamat sangat besar, kinerja aplikasi pasti akan terpengaruh dan sulit untuk dioptimalkan.
Ketika data berubah, kerangka kerja tidak dapat secara aktif mendeteksi terjadinya perubahan. Perlu memicu siklus pencernaan secara manual untuk memicu pembaruan DOM yang sesuai. Angular menghindari masalah ini dengan secara otomatis memicu bagian siklus pencernaan dalam fungsi penangan acara DOM, tetapi masih ada banyak situasi yang mengharuskan pengguna memicu secara manual.
Vue.js menggunakan mekanisme pengamatan berdasarkan pengumpulan ketergantungan. Pada prinsipnya, itu sama dengan Knockout Kerangka MVVM lama. Prinsip -prinsip dasar pengumpulan ketergantungan adalah:
Mengubah data asli menjadi "objek yang dapat diamati". Objek yang dapat diamati dapat dinilai atau ditetapkan.
Selama proses evaluasi pengamat, setiap objek yang dapat diamati yang diambil akan mendaftarkan pengamat saat ini sebagai pelanggannya dan menjadi ketergantungan pengamat saat ini.
Ketika objek yang dapat diamati ditugaskan, ia memberi tahu semua pelanggan untuk mengevaluasi kembali dan memicu pembaruan yang sesuai.
Keuntungan mengandalkan pengumpulan adalah bahwa ia dapat secara akurat dan proaktif melacak perubahan data, dan tidak ada dua masalah dengan pemeriksaan kotor yang disebutkan di atas. Namun, implementasi pengumpulan ketergantungan tradisional, seperti KO, biasanya memerlukan pembungkus data asli untuk membuat objek yang dapat diamati. Mereka perlu menggunakan panggilan fungsi saat mengambil nilai dan menetapkan nilai. Metode penulisan rumit dan tidak cukup intuitif saat melakukan operasi data; Pada saat yang sama, dukungan untuk benda -benda dengan struktur bersarang yang kompleks tidak ideal.
Vue.js menggunakan objek ES5. Metode Defineproperty untuk secara langsung mengubah sifat -sifat objek data asli menjadi getters dan setter, menerapkan pengumpulan ketergantungan dan memicu dalam dua fungsi ini, dan dengan sempurna mendukung struktur objek bersarang. Untuk array, perubahan array didengarkan dengan metode yang dapat berubah yang membungkus array, seperti dorongan. Ini membuat hampir tidak mungkin untuk mengoperasikan data Vue.js dan mengoperasikan objek asli [Catatan: Saat menambahkan/menghapus atribut, atau memodifikasi elemen spesifik pada array, fungsi tertentu perlu dipanggil, seperti OBJ. $ Add (kunci, nilai) untuk memicu pembaruan. Ini dibatasi oleh fitur bahasa ES5. ], logika operasi data lebih jelas dan lebih halus, dan integrasi dengan solusi sinkronisasi data pihak ketiga juga lebih nyaman.
Sistem Komponen
Dalam aplikasi skala besar, untuk pembagian kerja, penggunaan kembali dan pemeliharaan, kami pasti perlu mengabstraksi aplikasi ke dalam beberapa modul yang relatif independen. Dalam model pengembangan yang lebih tradisional, kami hanya akan membuat bagian dari komponen ketika mempertimbangkan multiplexing; Namun pada kenyataannya, UI seperti aplikasi dapat dianggap sepenuhnya terdiri dari pohon komponen:
Oleh karena itu, komponen digunakan sebagai konsep inti dalam desain Vue.Js. Dapat dikatakan bahwa setiap aplikasi Vue.js dikembangkan di sekitar komponen.
Mendaftarkan komponen vue.js sangat sederhana:
Vue.component ('my-component', {// template template: '<div> {{msg}} {{privatemsg}} </div>', // terima props parameter: {msg: string <br>}, // data pribadi, Anda perlu kembali dalam fungsi untuk menghindari walaup }}})Setelah pendaftaran, Anda dapat menghubungi komponen anak di template komponen induk sebagai elemen khusus:
<my-komponen msg = "hello"> </my-komponen>
Hasil Rendering:
<div> hello component! </div>
Komponen Vue.js dapat dipahami sebagai kelas ViewModel dengan perilaku yang telah ditentukan. Komponen dapat ditentukan sebelumnya, tetapi yang paling penting adalah sebagai berikut:
Format komponen file tunggal berdasarkan alat build
Perpustakaan inti Vue.js hanya menyediakan API dasar dan tidak memiliki terlalu banyak kendala tentang cara mengatur struktur file aplikasi. Namun, saat membangun aplikasi besar, disarankan untuk menggunakan kombinasi Webpack + Vue-Loader untuk membuat pengembangan komponen lebih efisien.
Webpack adalah alat pembangunan modul front-end open source yang dikembangkan oleh Tobias Koppers. Fungsi dasarnya adalah mengemas beberapa file JavaScript yang ditulis dalam format modul ke dalam satu file, dan mendukung format CommonJ dan AMD. Tetapi yang membuatnya unik adalah menyediakan Loader API yang kuat untuk mendefinisikan logika preprocessing untuk format file yang berbeda, memungkinkan kami menggunakan CSS, templat, dan bahkan format file khusus sebagai modul JavaScript. Webpack juga dapat mengimplementasikan sejumlah besar fungsi canggih berdasarkan loader, seperti pengemasan chunking otomatis dan pemuatan permintaan, posisi otomatis referensi sumber daya gambar, keputusan base64 inline berdasarkan ukuran gambar, penggantian modul yang panas selama pengembangan, dll. Dapat dikatakan sebagai salah satu solusi paling kompetitif di bidang konstruksi depan saat ini.
Saya mengembangkan plugin Vue-Loader berdasarkan Webpack Loader API, sehingga kami dapat menulis komponen VUE dalam format file tunggal seperti itu (*.vue):
<tyle> .my-component h2 {color: red;} </tyle> <emplate> <div> <h2> halo dari {{msg}} </h2> <scomponent lainnya> </defonent lainnya componen = comport outon- componen (template>//ikuti modul commonJS var OtherComponent = complate = complate =/complate. module.exports = {data: function () {return {msg: 'vue-loader'}}, komponen: {'komponen lain': OtherComponent}} </script>Pada saat yang sama, Anda juga dapat menggunakan preprosesor lain di file *.vue, cukup instal Webpack Loader yang sesuai:
<style lang = "stylus">. Komponen saya h2 warna merah </style> <template lang = "jade"> div.my-komponen h2 halo dari {{{msg}} </lemplate> <script lang = "babel"> // menggunakan Babel untuk mengkompilasi ES2015 export {Data {) {DATA 'DATA () {) {Babel "> // Babel dari Babel {) {Babel"> }}} </script>Format komponen semacam itu mengintegrasikan tiga elemen templat komponen, gaya, dan logika ke dalam file yang sama, yang nyaman untuk pengembangan, penggunaan kembali, dan pemeliharaan. Selain itu, Vue.js sendiri mendukung pemuatan komponen yang tidak sinkron, dan dikombinasikan dengan fungsi pengemasan chunking Webpack, ia dapat dengan mudah menerapkan pemuatan komponen yang tidak sinkron sesuai permintaan.
Fitur lainnya
Vue.js memiliki beberapa fitur lain yang layak disebut:
Buat instance vue menggunakan vue baru ()
Kami dapat menginisialisasi halaman HTML terlebih dahulu, dan kemudian kami perlu memperkenalkan file JS Vue. Ada banyak cara untuk memperkenalkannya. Kami dapat memperkenalkan Vue's CDN dalam skrip, atau mengunduh vue's min.js di situs web resmi, atau menginstal ketergantungan VUE menggunakan NPM. Untuk kenyamanan, artikel ini diperkenalkan menggunakan CDN.
<! Doctype html> <html> <head> <title> Pelajari dari awal </iteme> </head> <body> <script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </script </body> </html> </html>
Saat Anda berkembang, pastikan Anda menggunakan versi yang tidak terkompresi, karena versi yang tidak terkompresi akan memberikan peringatan terperinci yang berguna dan akan menghemat banyak waktu pada penulisan kode Anda.
Kami pertama -tama menulis div di dalam tubuh, membuat instance vue, dan kemudian mengikat instance dan div.
Saat Anda membuat instance VUE baru, gunakan konstruktor VUE () dan tunjukkan titik mount Anda dalam instance Anda. Titik mount ini adalah batas instance Vue yang ingin Anda bagi. Titik pemasangan dan batas instance sesuai satu per satu. Anda hanya dapat menangani transaksi dalam batas instance di titik pemasangan, tetapi bukan transaksi di luar batas instance pada titik pemasangan Anda.
Parameter untuk mengatur titik pemasangan dalam instance VUE adalah "EL", dan nilai EL dapat ditentukan oleh elemen DOM.
<! Doctype html> <html> <head> <title> Pelajari dari awal </itement> </head> <body> <Div id = "vueInstance"> Ini adalah batas instance dari titik pemasangan instance </div> <script srcrc = "http://cdn.jsdelivr.net/vue/vue/1.1.1.3 instance vue baru dan atur titik mount var v = vue baru ({el: '#vueInstance'}); </script> </body> </html>Seperti yang dapat Anda lihat di atas, Vue baru () membuat instance baru dan kemudian menentukan elemen DOM sebagai titik pemasangan dari instance. Saat mendefinisikan titik pemasangan, kami menggunakan ID pemilih CSS untuk mendefinisikannya. Nama instantiated juga dapat didefinisikan dengan sendirinya untuk panggilan nanti.
Menggunakan V-model untuk pengikatan data dua arah
Kami dapat menggunakan V-model untuk mengikat kotak input input, sehingga kami dapat menggunakan secara dinamis untuk mendapatkan nilai objek data. Anda dapat menganggap V-model sebagai properti tertentu, seperti atribut elemen HTML. Ikatan data dua arah di sini dapat digunakan pada banyak elemen formulir, seperti input, textarea, dan pilih.
Vue menggunakan perintah V-Model untuk mengikat data, dan data ini adalah data yang kami harap akan diperbarui melalui operasi input pengguna.
Misalnya, dalam contoh kami di bawah ini, kami ingin mengikat nama data pada tag input, dan kami perlu mengimplementasikan deklarasi dalam objek data dalam instance VUE.
<Div id = "vueInstance"> Masukkan nama Anda: <input type = "text" v-Model = "name"> </div>
<skrip src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </ptript> // Setelah baris ini akan dihilangkan <script> var v = vue baru ({el: '#vueInstance', data: {name: '_appian'}}}} {{{{el: 'Tidak peduli berapa kali pengguna masuk, nama ini akan diperbarui secara otomatis. Juga, jika nilai nama diubah, nilai di tempat lain di mana nama dipetakan juga akan dimodifikasi.
Alasan modifikasi sinkron dari kotak input ini dan pemetaan adalah untuk menggunakan instruksi model-V untuk memungkinkan data terikat melalui aliran data yang mendasarinya dan kemudian dimodifikasi secara langsung. Ini adalah konsep pengikatan data dua arah.
Untuk membuktikan konsep ini, kita dapat menggunakan $ data untuk mencetak pemetaan data untuk dilihat.
<div id = "vueInstance"> Masukkan nama Anda: <input type = "text" v-model = "name"> <p> {{$ data | json}} </p> //#1 <p> {{name}} </p> //#2 </div> <script> var v = new vue ({el: '#vueInstance', data: {name: '_appian'}}); </cript>Ini 1:
$ data adalah objek data yang diamati oleh instance VUE. Tipe penting adalah objek, sehingga dapat dikonversi ke JSON. Dapat diganti dengan objek baru. Instance Proxy Properti Objek Data -nya.
{{}}, interpolasi dengan dua kawat gigi keriting. Nilai yang dimasukkan di sini adalah nilai yang berubah secara real time dengan $ data.
| JSON, hanya cara yang lebih intuitif untuk menampilkan data. Ini juga dapat dianggap sebagai filter, seperti efek json.stringify ().
Butir 2:
{{name}} berarti memasukkan variabel data secara langsung dalam ekspresi interpolasi dan dua kawat gigi keriting untuk secara langsung memetakan nilai nama.
Vue sangat mudah untuk melakukan pengikatan data dua arah. Ini hanya membutuhkan instruksi model-V, tanpa menggunakan JS atau JQ untuk mengontrol data. Saya yakin Anda dapat memperjelas logika dari contoh di atas.
Gunakan V-on untuk mengikat acara
Vue menggunakan instruksi V-On untuk mendengarkan acara dan distribusi acara. Anda dapat membuat metode untuk mengikat acara mendengarkan di vue instance, dan Anda dapat membuat metode untuk mengirimkan acara klik.
Dalam contoh berikut, kami akan membuat metode Say, yang terikat pada tombol. Efek mengklik adalah untuk memunculkan kotak selamat datang dengan nama pengguna. Untuk menetapkan metode ini ke tombol, kita perlu menggunakan V-On: Klik untuk mengikat acara.
<Div id = "vueInstance"> Masukkan nama Anda: <input type = "text" v-model = "name"> <tombol v-on: klik = "katakan"> Selamat datang untuk mengklik </button> //#1 <tombol @klik = "katakan"> Selamat datang untuk mengklik </tombol> //#2 </div>
<script> var v = vue baru ({el: '#vueInstance', data: {name: '_Appian'}, Metode: {katakan: function () {alert ('Welcome' + this.name);}}}); </skrip>Tentu saja, Anda tidak hanya dapat mengikat acara klik klik, tetapi Anda juga dapat mengikat acara mouse lainnya, acara input keyboard, dan jenis acara JS lainnya. Misalnya, V-On: Mouseover, V-On: Keydown, V-On: Kirim, V-On: KeyPress, V-On: Keyup.13, dll., Atau beberapa acara khusus lainnya.
Selama proses pengembangan, Anda dapat sering menggunakan ikatan acara. Agak merepotkan untuk menulis V-on, jadi dalam contoh di atas, ada dua cara untuk menulis, #2 adalah singkatan dari #1. Menggunakan @ bukan V-On, saya tidak akan banyak bicara di sini.
Gunakan V-IF atau V-Show untuk membuat penilaian bersyarat
Jika kami ingin pengguna melihat jendela pop-up selamat datang setelah masuk, dan jika kami tidak masuk, kami akan memberikannya antarmuka login. Vue akan memberi kami instruksi V-IF dan V-Show untuk mengontrol konten tampilan di bawah keadaan login yang berbeda.
Menggunakan contoh sebelumnya, kita dapat menggunakan nilai LoginStatus untuk mengontrol apakah akan masuk. Jika itu benar, kotak input dan tombol akan ditampilkan sehingga dapat melihat jendela pop-up selamat datang. Namun, jika salah (yaitu, tidak masuk), Anda hanya dapat melihat kotak input dan tombol pengiriman untuk memasukkan nomor akun, kata sandi (tidak ada otentikasi untuk saat ini, hanya status login yang akan diubah).
<Div id = "vueInstance"> // Ketika LoginStatus false <bagian v-if = "! LoginStatus"> Loginperson: <input type = "text"> LoginPassword: <input type = "password"> <button @click = "switchloginstatus"> Login </button> </bagian> </div>
<script> var v = vue baru ({el: '#vueInstance', data: {name: '_appian', loginStatus: false}, metode: {{say: function () {alert ('welcome' + this.name);}, switchLoginStatus: function () {this.loginstatus;Eksekusi ini adalah contoh V. Pointing ini adalah pertanyaan yang perlu dipahami oleh diri sendiri, jadi saya tidak akan membicarakannya di sini.
Dalam contoh di atas, selama V-IF diganti dengan v-show, efek yang sama dapat diperoleh. Baik V-IF dan V-Show mendukung V-Else, tetapi elemen saudara kandung sebelumnya dari tag yang mengikat perintah V-Else harus memiliki V-IF atau V-Show.
Dalam contoh di atas, cukup mengklik tombol "Login" atau "Login Out" akan memicu metode Switchloginstatus. Selama metode ini dipicu, status LoginStatus akan berubah (beralih dalam benar dan salah), dengan demikian mengubah perubahan kondisi kondisi penilaian V-IF dalam HTML. Berdasarkan status Boolean saat ini dari LoginStatus, bagian yang ditampilkan adalah bagian di berbagai negara.
Apa perbedaan antara V-Show dan V-IF?
Saat beralih blok V-IF, VUE memiliki proses kompilasi/uninstallasi lokal, karena templat dalam V-IF juga dapat mencakup pengikatan data atau subkomponen. V-IF adalah rendering bersyarat nyata karena memastikan bahwa blok bersyarat menghancurkan dan membangun kembali pendengar dan subkomponen acara dalam blok bersyarat selama sakelar.
V -IF juga malas: jika kondisinya salah selama rendering awal, tidak ada yang dilakukan - kompilasi lokal dimulai ketika kondisinya menjadi benar untuk pertama kalinya (kompilasi akan di -cache).
Sebaliknya, V -Show jauh lebih sederhana - elemen selalu dikompilasi dan dilestarikan, hanya beralih berdasarkan CSS.
Secara umum, V-if memiliki konsumsi switching yang lebih tinggi dan V-Show memiliki konsumsi render awal yang lebih tinggi. Oleh karena itu, lebih baik untuk beralih V-show sering, dan lebih baik mengubah V-jika jika kondisinya tidak terlalu tinggi saat runtime.
Perbedaan ini mungkin tidak penting untuk pengembangan Anda saat ini, tetapi Anda masih perlu memperhatikan dan memperhatikan, karena ketika pengembangan proyek Anda menjadi lebih besar, ini akan menjadi penting.
Gunakan V-For ke Daftar Output
Jika Anda seorang pengusaha yang menjalankan platform e-commerce, Anda harus memiliki banyak halaman yang perlu membuat output dari daftar produk. Arahan V-FOR memungkinkan pengulangan objek array kami, diucapkan sebagai "melingkarkan setiap elemen dalam arrayobj" di jalan "elemen di arrayobj".
Dalam contoh berikut, kami akan menggunakan instruksi V-FOR untuk mengulang daftar produk. Setiap produk akan berada di LI, di mana nama, harga, dan jenis produk dari produk tersebut adalah output.
<div id = "vueInstance"> <ul> <li v -for = "el in products"> {{el.name}} - ￥ {{el. Harga}} - {{el. Kategori}} </li> </ul> </div> <script> var V = new Vue({ el : '#vueInstance', data : { products : [ {name: 'microphone', price: 25, category: 'electronics'}, {name: 'laptop case', price: 15, category: 'accessories'}, {name: 'screen cleaner', price: 17, category: 'accessories'}, {name: 'laptop charger', price: 70, Kategori: 'Elektronik'}, {Name: 'Mouse', Harga: 40, Kategori: 'Elektronik'}, {Name: 'Earphone', Harga: 20, Kategori: 'Elektronik'}, {Name: 'Monitor', Harga: 120, Kategori: 'Elektronik'}]}}}}}}}}}}}}}}}}}}}};Tentu saja, objek array dalam data dapat didefinisikan tanpa definisi di atas. Kami dapat mengimpornya dari database atau menggunakan permintaan AJAX untuk mendapatkannya. Ini hanya untuk demonstrasi v-for.
Terkadang kita mungkin perlu mendapatkan subskrip yang sesuai dari produk dalam objek array. Kita bisa mendapatkannya dengan $ index.
//#1 <li v -for = "el in product"> {{$ index}} - {{el.name}} - ￥ {{el. Harga}} - {{el. Kategori}} </li> //#2 <li v -for = "(index, el) di produk"> {{index}} - {{el.name}} - ￥ {{el. Harga}} - {{el. Kategori}} </li>Properti yang dihitung
Dalam skenario aplikasi menghitung atribut, itu akan digunakan ketika ada nilai variabel yang perlu dihitung oleh variabel lain.
Misalnya, jika pengguna memasukkan angka x di kotak input, itu akan secara otomatis mengembalikan ke pengguna square x² dari nomor tersebut. Anda perlu mengikat data kotak input, dan kemudian ketika data dimodifikasi, itu akan segera menghitung kuadratnya.
<Div id = "vueInstance"> masukkan angka: <input type = "text" v-model = "value"> <p> hasil perhitungan: {{square}} </p> </div> <script> var v = vue baru ({el: '#vueInstance', data: {value: 1}, dihitung: {square: function () {return this.value * this.value;}}}); </skrip>Hitung nilai definisi atribut dengan mendefinisikan serangkaian fungsi, seperti ketika kita mendefinisikan objek metode sebelumnya. Misalnya, metode kuadrat digunakan untuk menghitung variabel "kuadrat", dan nilai pengembalian dari metodenya adalah produk dari dua ini. Nilai.
Selanjutnya, kita dapat menggunakan Computed untuk membuat contoh yang lebih rumit. Sistem akan secara acak mengambil nomor dalam 1 ~ 10. Pengguna dapat secara acak memasukkan angka dalam 1 ~ 10 di kotak input. Jika input pengguna terjadi untuk mencocokkan nomor acak sistem, game akan berhasil, jika tidak, ia akan gagal.
<Div id = "vueInstance"> Masukkan nomor dalam 1 ~ 10: <input type = "text" v-model = "value"> <p> Hasil perhitungan: {{{resultmsg}} </p> </div> <script> var v = vue baru ({el: '#vueInstance', data: {value: null, randnum: 5 // nomor acak pertama adalah 5}, metode: {getRandnum: function (min, max) {return math.floor (math.random () * (maks - min + 1)) {min. == This.randnum) {this.randnum = this.getrandnum (1, 10);nota bene
Sejauh ini, Anda telah dapat menguasai penggunaan dasar Vue, salah satu kerangka kerja paling sederhana dan paling indah di dunia. Konstruksinya memiliki ide -ide desain lengkap dan menjadi semakin populer. Kerangka kerja ini kecil dan cukup ringan untuk memberi Anda pengalaman pengguna yang lebih halus dalam pengembangan Anda dan secara efektif meningkatkan efisiensi pengembangan. Saya telah memberikan serangkaian contoh di atas, apakah Anda sudah menguasai mereka semua?