การแสดงออกของการผูกในเทมเพลตนั้นสะดวกมาก แต่จริง ๆ แล้วใช้สำหรับการดำเนินการอย่างง่ายเท่านั้น เทมเพลตคือการอธิบายโครงสร้างของมุมมอง การใส่ตรรกะมากเกินไปลงในเทมเพลตสามารถทำให้เทมเพลตหนักเกินไปและยากที่จะรักษา นี่คือเหตุผลที่ vue.js จำกัด การแสดงออกที่มีผลผูกพันกับนิพจน์เดียว หากจำเป็นต้องมีการแสดงออกมากกว่าหนึ่งรายการควรใช้แอตทริบิวต์การคำนวณ **
ตัวอย่างพื้นฐาน
<div id = "ตัวอย่าง"> a = {{a}}, b = {{b}} </div> var vm = new vue ({el: '#example', ข้อมูล: {a: 1}, คำนวณ: {// getter สำหรับแอตทริบิวต์ที่คำนวณได้ B: function () {// `นี่เป็นจุดที่อินสแตนซ์ VM กลับมานี้ที่นี่เราประกาศคุณสมบัติที่คำนวณได้ ฟังก์ชั่นที่เราให้ไว้จะถูกใช้เป็น getter สำหรับคุณสมบัติ vm.b.
console.log (vm.b) // -> 2vm.a = 2console.log (vm.b) // -> 3
คุณสามารถเปิดคอนโซลเบราว์เซอร์และแก้ไข VM มูลค่าของ VM.B ขึ้นอยู่กับมูลค่าของ VM.A
คุณสามารถผูกคุณสมบัติที่คำนวณได้ในเทมเพลตเช่นคุณจะผูกคุณสมบัติปกติ Vue รู้ว่า VM.B ขึ้นอยู่กับ VM.A ดังนั้นเมื่อ VM.A เปลี่ยนแปลงการผูกที่ขึ้นอยู่กับ VM.B จะได้รับการปรับปรุง และสิ่งที่ดีที่สุดคือเราสร้างการพึ่งพาอาศัยกันอย่างชัดเจน: การรับคุณสมบัติของการคำนวณนั้นสะอาดและไม่มีผลข้างเคียงดังนั้นพวกเขาจึงทดสอบและเข้าใจได้ง่าย
การคำนวณคุณสมบัติเทียบกับ $ watch
vue.js จัดเตรียมวิธีการ $ นาฬิกาซึ่งใช้เพื่อสังเกตการเปลี่ยนแปลงข้อมูลในอินสแตนซ์ Vue $ watch เป็นสิ่งล่อใจเมื่อข้อมูลบางอย่างจำเป็นต้องเปลี่ยนแปลงตามข้อมูลอื่น ๆ - โดยเฉพาะอย่างยิ่งถ้าคุณมาจาก AngularJs อย่างไรก็ตามโดยปกติแล้วจะเป็นการดีกว่าที่จะใช้คุณสมบัติที่คำนวณได้แทนการโทรกลับที่จำเป็น $ พิจารณาตัวอย่างต่อไปนี้:
<div id = "demo"> {{fullName}} </div> var vm = new vue ({el: '#demo', ข้อมูล: {firstName: 'foo', นามสกุล: 'bar', fullName: 'foo bar' this.lastName}) vm. $ watch ('LastName', function (val) {this.fullName = this.firstName + '' + val})รหัสข้างต้นเป็นการทำซ้ำของสิ่งจำเป็น เปรียบเทียบกับคุณสมบัติการคำนวณ:
var vm = new vue ({data: {firstName: 'foo', LastName: 'bar'}, คำนวณ: {fullName: function () {return this.firstName + '' this.lastName}}})นี่ดีกว่าใช่มั้ย
คำนวณ Setter
แอตทริบิวต์ที่คำนวณเป็นเพียง getter โดยค่าเริ่มต้น แต่คุณยังสามารถให้ setter เมื่อจำเป็น:
// ... คำนวณ: {fullName: {// getter get: function () {return this.firstname + '' + this.lastname}, // setter set: function (newValue) {var names = newValue.split ('') this.firstname = ชื่อ [0] ชื่อนี้ตอนนี้เมื่อโทร vm.fullname = 'John Doe' ผู้ตั้งค่าจะถูกเรียกและ VM.FirstName และ Vm.lastName จะได้รับการอัปเดตตาม
บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
สำหรับการสอนเกี่ยวกับส่วนประกอบ vue.js โปรดคลิกที่หัวข้อพิเศษ vue.js การสอนการเรียนรู้องค์ประกอบเพื่อเรียนรู้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น