โดยพื้นฐานแล้วเราแยกแนวทางทั้งหมดบนเว็บไซต์อย่างเป็นทางการ: http://vuejs.org/guide/index.html ที่นี่เราใช้แอปพลิเคชันรายการสิ่งที่ต้องทำเป็นตัวอย่างในการรวมกลุ่มที่เกี่ยวข้องทั้งหมดเท่านั้น รหัสทั้งหมดในบทความนี้อยู่ใน github https://github.com/lihongxun945/vue-todolist
อินสแตนซ์ VUE
แอปพลิเคชัน VUE เริ่มต้นด้วยการบูตอินสแตนซ์รูท VUE และอินสแตนซ์ VUE ถูกสร้างขึ้นเช่นนี้:
var vm = new vue ({// ตัวเลือก})อินสแตนซ์เป็น VM ใน MVVM แอตทริบิวต์ทั้งหมดในข้อมูลในวัตถุการกำหนดค่าที่เข้ามาจะถูกติดตั้งกับอินสแตนซ์ เพื่อหลีกเลี่ยงความขัดแย้งการตั้งชื่อวิธี Vue ในตัวจะถูกติดตั้งกับอินสแตนซ์ที่มีคุณสมบัติเริ่มต้นด้วย $
อินสแตนซ์จะผ่านวัฏจักรชีวิตต่อไปนี้จากการสร้างจนถึงการทำลายล้าง:
ในระหว่างการเริ่มต้นประมาณสามขั้นตอน:
•การตรวจสอบข้อมูลที่มีผลผูกพันนั่นคือการตรวจสอบข้อมูล
•การรวบรวมเทมเพลต
•แทรกเอกสารหรือแทนที่ DOM ที่เกี่ยวข้อง
# VUE BASIC SYNTAX
การผูกมัดข้อมูล
Vue ใช้ไวยากรณ์ Mastache ไวยากรณ์ที่มีผลผูกพันที่ใช้กันทั่วไปแบ่งออกเป็นหลายประเภท:
•ไวยากรณ์ mastache เช่น {{data}} {{data | กรอง}}
•คุณสมบัติการผูก V-bind เช่น V-bind: Href, V-bind: คลาส
•เหตุการณ์ที่มีผลผูกพัน V-ON เช่น V-ON: คลิก, v-on: ส่ง
ในหมู่พวกเขา V-* เป็นคำสั่ง
ตัวอย่าง:
<div v-bind: class = "[classa, isb? classb: '']">
การคำนวณแอตทริบิวต์
Vue รองรับไวยากรณ์การคำนวณแอตทริบิวต์ที่น่าสนใจมาก คุณสามารถระบุได้ว่าแอตทริบิวต์คำนวณโดยแอตทริบิวต์อื่น ๆ ดังนั้นคุณไม่จำเป็นต้องใช้ $ watch เพื่อนำไปใช้:
var vm = new vue ({el: '#example', ข้อมูล: {a: 1}, คำนวณ: {// a getter ที่คำนวณได้ B: function () {// `นี่เป็นจุดที่อินสแตนซ์ VM ส่งคืนสิ่งนี้## ไวยากรณ์ที่เกี่ยวข้องกับการควบคุมกระบวนการและรายการรวมถึง `v-if`,` v-show`, `v-else`,` v-for`
รูปร่าง
การเชื่อมโยงข้อมูลสองทาง:
<อินพุต type = "text" v-model = "message" placeholder = "แก้ไขฉัน">
<อินพุต type = "ช่องทำเครื่องหมาย" id = "jack" value = "jack" v-model = "checkedNames">
## วิธีการใช้งานของแอนิเมชั่นเหมือนกับของเชิงมุมและตอบสนองและนำไปใช้โดยการเพิ่มและลบคลาส # ส่วนประกอบ
การใช้งานส่วนประกอบขั้นพื้นฐาน
คำจำกัดความขององค์ประกอบประกอบด้วยสองส่วน:
1 สร้างคลาสส่วนประกอบ:
var profile = vue.extend ({template: "<div> lily </div>"});2 ลงทะเบียนแท็กชื่อ:
Vue.Component ("Me-Profile", โปรไฟล์);
ด้วยวิธีนี้เราสามารถใช้ส่วนประกอบนี้ผ่าน tagname:
<div id = "toDo"> <my-profile> </my-profile> <ฟอร์ม v-on: submit = "เพิ่ม" v-on: submit.prevent> <อินพุต type = "text" v-model = "input"/> <อินพุต type = "submit" value = 'เพิ่ม'
Vue.Component ("Me-Profile", โปรไฟล์); เป็นการลงทะเบียนทั่วโลก หากใช้ในหน้าหนึ่งเท่านั้นสามารถลงทะเบียนได้ในพื้นที่:
var vm = new vue ({el: "#todo", ส่วนประกอบ: {"my-profile": profile}, ... }เนื่องจากอินสแตนซ์ VUE ของเราถูกผูกไว้กับองค์ประกอบสิ่งที่ต้องทำมันจึงไม่ถูกต้องหากวางโปรไฟล์ของฉันไว้นอกองค์ประกอบนี้ โดยการวางไว้ข้างในเท่านั้นที่จะเริ่มต้นด้วยอินสแตนซ์ของ Vue นี้
หมายเหตุ:
พารามิเตอร์ที่สามารถส่งผ่านโดย Vue Constructor สามารถใช้กับ Vue.extend ได้โดยทั่วไป แต่คุณต้องใส่ใจกับพารามิเตอร์ทั้งสองของ EL และข้อมูล เพื่อหลีกเลี่ยงการแบ่งปันวัตถุเดียวกันระหว่างอินสแตนซ์ที่แตกต่างกันมันมีความน่าเชื่อถือมากกว่าที่จะส่งคืนวัตถุใหม่ผ่านฟังก์ชั่น:
var myComponent = vue.extend ({data: function () {return {a: 1}}})เนื่องจากพารามิเตอร์เหมือนกันพวกเขาจึงเป็นสิ่งเดียวกัน แต่อย่างใดอย่างหนึ่งคือองค์ประกอบและอีกอันหนึ่งใช้เพื่อแนะนำ Vue ให้เริ่มต้น
หมายเหตุเกี่ยวกับเทมเพลต
เนื่องจาก Vue เป็น DOM ดั้งเดิมแท็กที่กำหนดเองบางอย่างอาจไม่ตรงกับมาตรฐาน DOM ตัวอย่างเช่นหากคุณต้องการปรับแต่ง TR ในตารางหากการแทรกองค์ประกอบของฉันไม่ตรงตามข้อกำหนดคุณควรเขียนแบบนี้:
<bable> <tr คือ = "My-Component"> </tr> </table>
อุปกรณ์ประกอบฉากส่งผ่านข้อมูล
ใน Vue แต่ละองค์ประกอบมีความเป็นอิสระและไม่สามารถและไม่ควรเข้าถึงข้อมูลของคลาสแม่โดยตรง ดังนั้นมันคล้ายกับวิธีการของ React ในการส่งข้อมูลไปยังส่วนประกอบย่อยผ่านอุปกรณ์ประกอบฉากหรือไม่?
ไม่เหมือน React, subcomponents ใน VUE จำเป็นต้องประกาศอุปกรณ์ประกอบฉากของตัวเองก่อน:
var profile = vue.extend ({props: ["name"], เทมเพลต: `<h2> {{name}} รายการสิ่งที่ต้องทำ </h2> <h4> {{name}} เป็นผู้หญิงที่ดี </h4>`});จากนั้นเราสามารถผ่านพารามิเตอร์เช่นนี้เมื่อใช้โปรไฟล์:
<ชื่อของฉันชื่อ = 'lily'> </mer-profile>
นี่คือการผ่านพารามิเตอร์ผ่านตัวอักษรดังนั้นค่าที่ผ่านจะต้องเป็นสตริง อีกวิธีหนึ่งคือการผ่านพารามิเตอร์แบบไดนามิกและส่งพารามิเตอร์ผ่าน V-bind คุณสามารถผูกข้อมูลในพารามิเตอร์สองทางหรือผ่านพารามิเตอร์ที่ไม่ใช่สาย:
<my-profile v-bind: name = 'input'> </mer-profile>
หาก V-bind เป็นสตริงมันเป็นฟิลด์ที่สอดคล้องกันในข้อมูลขององค์ประกอบหลักเช่นข้างต้นคือค่าของอินพุตที่ถูกผูกไว้ในทั้งสองทิศทาง ถ้าเป็นตัวเลขก็จะถูกผูกไว้กับตัวเลข
VUE ยังสามารถระบุการเชื่อมโยงข้อมูลแบบทางเดียวหรือสองทางได้อย่างชัดเจน:
<!-ค่าเริ่มต้นการผูกมัดแบบทางเดียว-> <เด็ก: msg = "parentmsg"> </vild> <!-การผูกสองทางที่ชัดเจน-> <เด็ก: msg.sync = "parentmsg"> </child> <!
การตรวจสอบอุปกรณ์ประกอบฉาก
องค์ประกอบที่ดีควรตรวจสอบเสมอว่าพารามิเตอร์นั้นถูกต้องก่อนและอาจต้องตั้งค่าเริ่มต้นของพารามิเตอร์บางอย่าง:
var profile = vue.extend ({input: {type: string}});การสื่อสารองค์ประกอบของพ่อแม่ลูก
อุปกรณ์ประกอบฉากที่กล่าวถึงข้างต้นเป็นวิธีที่องค์ประกอบหลักในการส่งข้อความไปยังส่วนประกอบลูก
ในองค์ประกอบของเด็กมีสิ่งนี้ $ parent และ this. $ root ที่สามารถใช้กับวิธีการองค์ประกอบหลักและอินสแตนซ์รูท อย่างไรก็ตามตอนนี้เราควรหลีกเลี่ยงการทำเช่นนั้น เนื่องจากส่วนประกอบเองคือการห่อหุ้มตรรกะอิสระหากคุณเข้าถึงข้อมูลขององค์ประกอบหลักโดยตรงมันจะทำลายการห่อหุ้มส่วนประกอบ
ดังนั้นเราควรสื่อสารผ่านองค์ประกอบหลักที่ส่งผ่านอุปกรณ์ประกอบฉากไปยังองค์ประกอบเด็ก
แน่นอนอุปกรณ์ประกอบฉากสามารถโทรกลับได้เท่านั้น ปัญหานี้ได้รับการหารือใน React วิธีการตอบสนองคือการใช้อุปกรณ์ประกอบฉากเพื่อผ่านฟังก์ชั่นการโทรกลับไปยังส่วนประกอบลูก ที่จริงแล้วฉันไม่ชอบวิธีการผ่านฟังก์ชั่นการโทรกลับฉันชอบวิธีการของเหตุการณ์ Vue Neutronics สามารถสื่อสารกับองค์ประกอบหลักผ่านเหตุการณ์ การส่งข้อความไปยังองค์ประกอบหลักคือผ่านสิ่งนี้ $ dispatch และการส่งข้อความไปยังส่วนประกอบลูกผ่านสิ่งนี้ $ boardcast ที่นี่ข้อความจะถูกส่งไปยังผู้ปกครองและเด็กทุกคน แต่เมื่อมีการเรียกใช้การโทรกลับมันจะหยุดเว้นแต่ว่าฟังก์ชันการโทรกลับจะส่งคืนจริงอย่างชัดเจน
เราแบ่งรายการสิ่งที่ต้องทำก่อนหน้าออกเป็นส่วนประกอบที่แตกต่างกันเพื่อนำไปใช้เพื่อให้เราสามารถสัมผัสกับวิธีการสื่อสารกับส่วนประกอบในสองทาง เราแยกสององค์ประกอบคือรายการและแบบฟอร์ม
แบบฟอร์มมีหน้าที่ในการประมวลผลอินพุตของผู้ใช้และส่งข้อความเพิ่มไปยังส่วนประกอบพาเรนต์เมื่อส่งแบบฟอร์ม รหัสมีดังนี้:
var form = vue.extend ({props: {username: {type: string, default: "unnamed"}}, data: function () {return {input: "",};}, เทมเพลต: `<h1> {{username}} v-model = "อินพุต"/> <อินพุต type = "ส่ง" value = 'เพิ่ม'/> </form> `, วิธีการ: {เพิ่ม: function () {this. $ dispatch (" เพิ่ม ", this.input);รายการมีความรับผิดชอบเฉพาะในการแสดงรายการและจัดการการตรวจสอบผู้ใช้ หลังจากได้รับข้อความเพิ่มแล้วมันจะเพิ่มรายการในตัวเอง:
var list = vue.extend ({template: `<ul> <li v-for = 'toDo ในรายการ'> <label v-bind: class =" {ทำ: toDo.done} "> <อินพุตประเภท =" ช่องทำเครื่องหมาย "v-model =" toDo.done "/> {{toDo.title Type: Array}}, data: function () {return {list: []}}, เหตุการณ์: {add: input (input) {if (! input) return false;จากนั้นเนื่องจากสิ่งเหล่านี้เป็นสององค์ประกอบแน่นอนว่าจำเป็นต้องใช้อินสแตนซ์ VUE ในการเริ่มต้นการเริ่มต้นอินสแตนซ์ของเรามีดังนี้:
var vm = new vue ({el: "#todo", ส่วนประกอบ: {"toDo-form": form, "toDo-list": list}, เหตุการณ์: {เพิ่ม: ฟังก์ชั่น (อินพุต) {this. $ broadcast ("เพิ่ม", อินพุต);}}});โปรดทราบว่าในความเป็นจริงรูปแบบและรายการเป็นส่วนประกอบแบบขนานอย่างมีเหตุผลดังนั้นพวกเขาจึงไม่มีความสัมพันธ์กับพ่อ-ลูกและพวกเขาเป็นลูกของ VM ทั้งหมด ที่นี่ VM จะส่งต่อไปยังรายการหลังจากได้รับข้อความแบบฟอร์ม
รหัส HTML นั้นง่ายกว่า:
<div id = "todo"> <todo-form username = 'Lily'> </toDo-form> <toDo-list> </toDo-list> </div>
ช่องเสียบ
สล็อตสามารถใช้เพื่อแทรก HTML ที่แสดงผลจากส่วนประกอบหลักลงในส่วนประกอบลูก ยังไม่ชัดเจนว่าจะจำเป็นเมื่อใดและนี่เป็นส่วนประกอบของเด็กที่รุกรานเกินไป
ส่วนประกอบสวิตช์แบบไดนามิก
ฟังก์ชั่นนี้รู้สึกซ้ำซ้อนเล็กน้อย ในหลายกรณีเราควรสลับผ่านรหัสเชิงตรรกะแทนที่จะผ่านส่วนประกอบแบบไดนามิก Vue ในตัว อย่างไรก็ตามมันสะดวกมากที่จะใช้ฟังก์ชั่นคล้ายกับการสลับแท็บ
ที่นี่เราเพิ่มหน้าเกี่ยวกับหน้าลงในรายการสิ่งที่ต้องทำ ดังนั้นก่อนอื่นเราต้องเปลี่ยน VM เป็นส่วนประกอบซึ่งเรียกว่า TODO ซึ่งเป็นหน้าสิ่งที่ต้องทำทั้งหมด:
var toDo = vue.extend ({template: `<div id =" toDo "> <toDo-form username = 'lily'> </toDo-form> <toDo-list> </toDo-list> <lily> ไม่แสดง </slot> สิ่งนี้. $ broadcast ("เพิ่ม", อินพุต);}}});อันที่จริงการเปลี่ยนแปลงบรรทัดแรกคือบรรทัดแรก
จากนั้นเราต้องสร้างองค์ประกอบเกี่ยวกับ:
var about = vue.extend ({template: `<div id =" เกี่ยวกับ "> <p> เกี่ยวกับรายการสิ่งที่ต้องทำ v0.1.0 </p> <p> เนื้อหาที่นี่ </p> </div>`});ถัดไปเป็นประเด็นสำคัญ เราต้องการสร้างอินสแตนซ์ VM ซึ่งรับผิดชอบในการเปลี่ยนสองหน้านี้:
var vm = new vue ({el: "body", data: {currentView: "toDo"}, ส่วนประกอบ: {"TODO": TODO, "เกี่ยวกับ": เกี่ยวกับ}});ที่นี่เรากำหนดฟิลด์ CurrentView ซึ่งแน่นอนว่าสามารถเป็นชื่อใดก็ได้จากนั้นใช้แท็กส่วนประกอบพิเศษเพื่อสลับส่วนประกอบ:
<Component: IS = "CurrentView"> </ponent> <ul> <li> <lable> <อินพุต type = "Radio" ชื่อ = 'page' value = 'toDo' v-model = 'currentView'> home </label> </li> <li> <lable>
มีสองสิ่งที่ควรทราบในรหัสด้านบน:
•ใช้ส่วนประกอบแท็กพิเศษจากนั้นใช้: เป็นคุณสมบัติเป็นเพื่อสลับส่วนประกอบ
•วิทยุแก้ไขฟิลด์ CurrentView ผ่านการเชื่อมโยงสองทางเพื่อให้คุณสามารถสลับหลังจากคลิก
หลักการการใช้งานของการเชื่อมโยงข้อมูล
Vue เรียกปฏิกิริยาที่มีผลผูกพันแบบสองทิศทางซึ่งสามารถแปลได้ว่าเป็นการเชื่อมโยงข้อมูลที่ตอบสนองได้ มันถูกนำไปใช้ภายในผ่านวิธี getter และ setter ที่กำหนดโดย ES5 ดังนั้นจึงไม่รองรับ IE8 และเบราว์เซอร์ต่อไปนี้ มีสองสิ่งง่ายๆที่จะทำผิดพลาดในการใช้งานนี้:
•หากคุณเพิ่มและลบแอตทริบิวต์โดยตรงบนข้อมูลมันเป็นไปไม่ได้ที่จะตรวจจับ โดยทั่วไปการลบจะไม่สามารถทำได้ แต่อาจเพิ่มแบบไดนามิก ในเวลานี้ควรเพิ่มผ่าน vm. $ set ("ชื่อ" ค่า)
•การเปลี่ยนแปลงภายในวัตถุไม่สามารถตรวจพบได้นั่นคือพวกเขาสามารถตรวจจับการเปลี่ยนแปลงในคุณสมบัติของข้อมูลเท่านั้น หาก data.a เป็นวัตถุแล้ว data.ab = 1 ไม่สามารถตรวจพบการเปลี่ยนแปลงนี้ได้ ในกรณีนี้คุณควรสร้างวัตถุใหม่และกำหนดให้กับ data.a
กลไกการอัพเดทแบบอะซิงโครนัส
การอัปเดตของ Vue เป็น DOM นั้นเป็นแบบอะซิงโครนัส! อะซิงโครนัสนี้ดำเนินการในคิวแบบอะซิงโครนัส แต่คิวแบบอะซิงโครนัสนี้จะถูกดำเนินการในลูปเหตุการณ์ปัจจุบัน ดังนั้นหากคุณแก้ไขข้อมูลมันผิดที่จะไปที่ DOM ทันทีเพื่อดำเนินการค้นหา ในเวลานี้ DOM ยังไม่ได้รับการปรับปรุง วิธีที่ถูกต้องคือการทำเช่นนี้:
vm.msg = 'ข้อความใหม่' // เปลี่ยน dataVm. $ el.textContent === 'ข้อความใหม่' // falsevue.nexttick (function () {vm. $ el.TextContent === 'ข้อความใหม่' // true})หรือนี้:
vm. $ nexttick (function () {this. $ el.TextContent === 'ข้อความใหม่' // true})ใช้เวลานานในการอ่านส่วนประกอบ นี่คืออีกประเด็นหนึ่ง: คำสั่ง
บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น