สรุปความรู้พื้นฐานของ vue.js

แนะนำ

vue.js เป็นไลบรารีที่ใช้ในการสร้างเว็บแอปพลิเคชันอินเตอร์เฟส

ในทางเทคนิค Vue.js มุ่งเน้นไปที่เลเยอร์ ViewModel ของโหมด MVVM ซึ่งเชื่อมต่อโมเดลมุมมองและข้อมูลที่มีผลผูกพันในสองวิธี รูปแบบการทำงานของ DOM และเอาต์พุตจริงจะถูกแยกออกเป็นคำแนะนำ (คำสั่ง) และตัวกรอง (ตัวกรอง)

ในสาขาปรัชญาพยายามทำให้ข้อมูล MVVM มีผลผูกพัน API ง่ายที่สุดเท่าที่จะทำได้ โมดูลาร์และความสามารถในการรวบรวมเป็นข้อควรพิจารณาในการออกแบบที่สำคัญเช่นกัน Vue ไม่ใช่กรอบที่ครอบคลุม แต่ถูกออกแบบมาให้เรียบง่ายและยืดหยุ่น คุณสามารถใช้มันเพื่อต้นแบบได้อย่างรวดเร็วหรือผสมและจับคู่กับไลบรารีอื่น ๆ เพื่อกำหนดสแต็กส่วนหน้า

Vue. JS API หมายถึง AngularJs, Knockoutjs ractive.js rivets.js แม้จะมีความคล้ายคลึงกัน แต่ฉันเชื่อว่า vue.js เป็นวิธีที่มีค่าในการรับคุณค่าของคุณในบางกรอบที่มีอยู่ในขณะนี้

แม้ว่าคุณจะคุ้นเคยกับข้อกำหนดเหล่านี้อยู่แล้วขอแนะนำให้คุณผ่านภาพรวมของแนวคิดต่อไปนี้เนื่องจากแนวคิดของข้อกำหนดเหล่านี้อาจแตกต่างกันต่ำกว่า vue.js

ภาพรวมแนวคิด

ViewModel

วัตถุซิงโครไนซ์โมเดลและมุมมอง ใน vue.js, ViewModels เป็นตัวสร้าง Vue หรือคลาสย่อย

 var vm = new vue ({ / * ตัวเลือก * /})

นี่คือวัตถุหลักที่คุณจะโต้ตอบกับในฐานะนักพัฒนาโดยใช้ vue.js สำหรับรายละเอียดเพิ่มเติมดูชั้นเรียน: Vue

ดู

ผู้ใช้ HTML/DOM จริง

 vm. $ el // มุมมอง

เมื่อใช้ vue.js คุณแทบจะไม่ได้สัมผัสการทำงานของ DOM ยกเว้นคำแนะนำที่กำหนดเองของคุณเอง เมื่อข้อมูลได้รับการอัปเดตการอัปเดตมุมมองจะถูกทริกเกอร์โดยอัตโนมัติ การอัปเดตของมุมมองสามารถเข้าถึงได้อย่างถูกต้องไปยังโหนด testNode แต่ละโหนด พวกเขายังมีการแบตช์และดำเนินการแบบอะซิงโครนัสเพื่อให้ประสิทธิภาพที่ดีขึ้น

แบบอย่าง

นี่คือวัตถุจาวาสคริปต์ที่แก้ไขเล็กน้อย

 vm. $ data // รุ่น

ใน vue.js โมเดลเป็นเพียงวัตถุจาวาสคริปต์ที่เรียบง่ายวัตถุข้อมูลคุณสามารถจัดการคุณสมบัติและดูโมเดลดูสังเกตและจากนั้นได้รับการแจ้งเตือนให้เปลี่ยน Vue.js ใช้ Getter/Setter ของ ES5 เพื่อแปลงคุณสมบัติใน Data Object HU ซึ่งช่วยให้สามารถดำเนินการโดยตรงโดยไม่ต้องตรวจสอบสกปรก

วัตถุข้อมูลจะมีการกลายพันธุ์ในเวลาที่เหมาะสมดังนั้นการแก้ไขจึงเหมือนกับการแก้ไข VM $ data โดยอ้างอิง นอกจากนี้ยังช่วยอำนวยความสะดวกในหลายอินสแตนซ์ ViewModel เพื่อสังเกตข้อมูลชิ้นเดียวกัน

สำหรับรายละเอียดทางเทคนิคโปรดดูตัวเลือกอินสแตนซ์: ข้อมูล

คำสั่ง

แอตทริบิวต์ HTML ส่วนตัวบอก Vue.js ให้ทำการประมวลผลเกี่ยวกับ DOM

 <div v-text = "ข้อความ"> </div>

องค์ประกอบ DIV ที่นี่มีคำสั่ง V-text และค่าคือข้อความ หมายถึงการบอก Vue.js เพื่อให้เนื้อหาของโหนด div นี้ซิงโครไนซ์กับแอตทริบิวต์ข้อความใน ViewMode

คำแนะนำสามารถห่อหุ้มการทำงานของ DOM ได้ ตัวอย่างเช่น V-ATTR ทำงานบนองค์ประกอบแอตทริบิวต์การโคลนนิ่ง V-repeat เป็นองค์ประกอบตามอาร์เรย์การฟังเหตุการณ์เพิ่มเติม V-ON เราจะหารือในภายหลัง

การผูกหนวด

คุณยังสามารถใช้การผูกสไตล์หนวดในข้อความและคุณสมบัติ พวกเขาถูกแปลเป็นคำสั่ง V-text V-ATTR ตัวอย่างเช่น:

 <div id = "person-{{id}}"> สวัสดี {{name}}! </div>

แม้ว่าจะสะดวก แต่ก็มีบางสิ่งที่คุณต้องใส่ใจ:

หากตั้งค่าแอตทริบิวต์ SRC รูปภาพจะมีการส่งคำขอ HTTP ดังนั้นเมื่อเทมเพลตกำลังแยกวิเคราะห์เป็นครั้งแรกจะเป็นการดีกว่าที่จะใช้ V-ATTR

เมื่อแยกวิเคราะห์ HTML Internet Explorer จะลบแอตทริบิวต์สไตล์ภายในที่ไม่ถูกต้องดังนั้นหากเราต้องการสนับสนุน IE ที่มีผลผูกพันอินไลน์ CSS ฉันมักจะใช้ V-style

ภายใน V-HTML คุณสามารถใช้เครื่องมือจัดฟันสามตัวเพื่อจัดการ HTML ที่ไม่ได้ถูกบันทึกไว้ แต่สิ่งนี้จะทำให้เกิดการโจมตี XSS ที่มีศักยภาพและสามารถเปิดหน้าต่างได้ ดังนั้นขอแนะนำให้ทำสิ่งนี้เฉพาะเมื่อข้อมูลปลอดภัยอย่างแน่นอนหรือทำความสะอาด HTML ที่ไม่น่าเชื่อถือผ่านตัวกรองไปป์ไลน์ที่กำหนดเอง

ตัวกรอง

ข้อมูลดิบนี้สามารถประมวลผลได้โดยใช้ฟังก์ชั่นก่อนอัปเดตมุมมอง พวกเขากำลังใช้คำสั่ง "ไปป์ไลน์" หรือการผูกมัด:

 <div> {{message | ใช้ประโยชน์}} </div>

ตอนนี้ก่อนที่เนื้อหาข้อความของ DIV จะได้รับการอัปเดตค่าของข้อความนี้จะถูกประมวลผลผ่านฟังก์ชั่นการใช้ประโยชน์ สำหรับรายละเอียดโปรดดูตัวกรองในเชิงลึก

ส่วนประกอบ

ใน vue.js ส่วนประกอบเป็นตัวสร้างมุมมองแบบง่าย ๆ ที่ลงทะเบียนกับ Vue.Component (ID, Constructor) ด้วย ID ที่เกี่ยวข้องคำสั่ง V-component สำหรับเทมเพลตของโมเดลมุมมองอื่นสามารถซ้อนกันได้ กลไกง่ายๆนี้ทำให้โมเดลมุมมองที่ประกาศกลับมาใช้ซ้ำและรวมกันในลักษณะที่คล้ายกับส่วนประกอบของเว็บโดยไม่จำเป็นต้องใช้เบราว์เซอร์ล่าสุดหรือโพลีฟิลด์หนัก โดยการแบ่งแอปพลิเคชันลงในส่วนประกอบที่เล็กลงผลลัพธ์ที่ได้คือฐานรหัสที่แยกได้สูงและบำรุงรักษาได้ สำหรับรายละเอียดเพิ่มเติมดูการเขียน ViewModels

ตัวอย่างด่วน

 <div id = "demo"> <h1> {{title | uppercase}} </h1> <ul> <li v-repeat = "todos" v-on = "คลิก: เสร็จสิ้น =! เสร็จแล้ว"> {{เนื้อหา}} </li> </ul> </div>

 var demo = new vue ({el: '#demo', data: {title: 'todos', todos: [{ทำ: จริง, เนื้อหา: 'เรียนรู้ JavaScript'}, {ทำ: เท็จเนื้อหา: 'เรียนรู้ vue.js'}]}}))

การแปลคร่าวๆโปรดชี้ให้เห็นข้อผิดพลาดใด ๆ