Ekspresi bind dalam templat sangat nyaman, tetapi sebenarnya hanya digunakan untuk operasi sederhana. Templat adalah untuk menggambarkan struktur tampilan. Menempatkan terlalu banyak logika ke dalam templat dapat membuat template terlalu berat dan sulit dipelihara. Inilah sebabnya mengapa Vue.js membatasi ekspresi yang mengikat pada satu ekspresi. Jika lebih dari satu ekspresi diperlukan, atribut komputasi ** harus digunakan.
Contoh dasar
<Div id = "example"> a = {{a}}, b = {{b}} </div> var vm = vue baru ({el: '#example', data: {a: 1}, dihitung: {// a getter for computed attribute b: function () {// `poin ini ke instance vm mengembalikan this.a + 1}}})Di sini kami mendeklarasikan properti yang dihitung b. Fungsi yang kami sediakan akan digunakan sebagai pengambil untuk properti VM.B.
console.log (vm.b) // -> 2vm.a = 2console.log (vm.b) // -> 3
Anda dapat membuka konsol browser dan memodifikasi VM. Nilai VM.B selalu tergantung pada nilai VM.A.
Anda dapat mengikat properti yang dihitung dalam templat seperti Anda akan mengikat properti normal. Vue tahu bahwa VM.B tergantung pada VM.A, jadi ketika VM.A berubah, binding yang bergantung pada VM.B juga akan diperbarui. Dan yang terbaik adalah kami membuat ketergantungan ini secara deklaratif: getters dari properti yang dihitung bersih dan tidak memiliki efek samping, sehingga mereka juga mudah diuji dan dipahami.
Menghitung properti vs $ watch
Vue.js menyediakan metode $ watch, yang digunakan untuk mengamati perubahan data pada instance vue. $ Watch menggoda ketika beberapa data perlu diubah berdasarkan data lain - terutama jika Anda berasal dari AngularJS. Namun, biasanya lebih baik menggunakan properti yang dihitung daripada panggilan balik $ tonton yang penting. Pertimbangkan contoh berikut:
<Div id = "Demo"> {{fullName}} </div> var vm = new vue ({el: '#demo', data: {firstName: 'foo', lastname: 'bar', fullname: 'foo bar'}) vm. $ 'watch (' firstName ', fullName (vale) {vale') vale. this.LastName}) vm. $ watch ('lastName', function (val) {this.fullname = this.firstName + '' + val})Kode di atas adalah pengulangan imperatif. Perbandingan dengan sifat perhitungan:
var vm = vue baru ({data: {firstName: 'foo', lastName: 'bar'}, dihitung: {fullName: function () {return this.firstName + '' + this.lastName}}})Ini lebih baik, bukan?
Hitung setter
Atribut yang dihitung hanyalah pengambil secara default, tetapi Anda juga dapat memberikan setter saat dibutuhkan:
// ... komputasi: {fullname: {// getter get: function () {return this.firstname + '' + this.lastname}, // setter set: function (newValue) {var name = newValue.split ('') this.firstname = name [0] oDValue.Split ('') this.firstname = name [0] this.lastname.Sekarang ketika menelepon vm.fullname = 'John Doe', setter akan dipanggil, dan vm.firstname dan vm.lastname juga akan diperbarui sesuai.
Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.
Untuk tutorial tentang komponen vue.js, silakan klik topik khusus tutorial pembelajaran komponen vue.js untuk dipelajari.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.