เฟรมเวิร์กส่วนหน้าอย่าง AngularJS สามารถทำให้เราสะดวกมากในการพัฒนาแอพพลิเคชั่นหน้าเดียวที่ทรงพลัง อย่างไรก็ตามบางครั้งเฟรมเวิร์กขนาดใหญ่เช่น Angular มีขนาดใหญ่เกินไปสำหรับโครงการของเราและอาจไม่ได้ใช้ฟังก์ชั่นมากมาย ในเวลานี้เราต้องประเมินความจำเป็นในการใช้งาน หากเราต้องการเพิ่มฟังก์ชั่นบางอย่างลงในหน้าเว็บที่เรียบง่ายการใช้ Angular จะลำบากเกินไปและการติดตั้งการกำหนดค่าการเขียนเส้นทางการออกแบบตัวควบคุม ฯลฯ จะดูยุ่งยากเกินไป
ในเวลานี้เราต้องการโซลูชันที่มีน้ำหนักเบามากขึ้น vue.js เป็นตัวเลือกที่ดี Vue.js เป็นกรอบที่มุ่งเน้นไปที่โมเดลมุมมอง (ViewModal) โมเดลมุมมองเป็นบริดจ์สำหรับการสื่อสารข้อมูลระหว่าง UI และโมเดลข้อมูลโดยตระหนักถึงการเชื่อมโยงข้อมูลสองทางระหว่าง UI และโมเดลข้อมูล มันไม่ได้เป็น "เฟรมเวิร์กที่สมบูรณ์" แต่เป็นกรอบที่เรียบง่ายและยืดหยุ่นมุ่งเน้นไปที่เลเยอร์มุมมอง
ต่อไปเราจะใช้แอปพลิเคชันบันทึกช่วยจำง่าย ๆ เพื่อเรียนรู้เกี่ยวกับพื้นฐานของ Vue.js เพื่อให้ทุกคนให้ความสนใจกับ Vue.js มากขึ้นเราได้ออกแบบแอปพลิเคชันไคลเอนต์ตามข้อมูลท้องถิ่น ในตอนท้ายของบทความนี้เราจะพูดถึงการมีปฏิสัมพันธ์ระหว่าง vue.js และแบ็กเอนด์
การตระเตรียม
มารับ vue.js และ bootstrap ผ่าน NPM ก่อน (ไม่จำเป็นนี่คือการใช้ไลบรารีสไตล์) และป้อนสิ่งต่อไปนี้ในบรรทัดคำสั่ง:
npm ติดตั้ง vue bootstrap
จากนั้นสร้างสองไฟล์:
touch index.html app.js
เพิ่มเนื้อหาต่อไปนี้ใน index.html
<!-index.html-> <! doctype html> <html> <head> <meta charset = "utf-8"> <title> vue </title> <!-css-> <link rel = "stylesheet" href = "node_modules/bootstrap/bootstrap แถบการนำทาง-> <av> <v> <a> <i> </i> vue memo </a> </div> </av> <!-ส่วนหลักของแอปพลิเคชัน-> <div id = "เหตุการณ์"> <! <div> </div> </div> </div> <!-js-> <script src = "node_modules/vue/dist/vue.js"> </script> <script src = "app.js"> </script> </body> </html>
แท็ก <div> พร้อม "เหตุการณ์" ID เป็นส่วนหลักของแอปพลิเคชันนี้ หลังจากนั้นเราจะสร้างอินสแตนซ์ VUE สำหรับส่วนหลักนี้
สร้างอินสแตนซ์ VUE
ก่อนอื่นมาสร้างอินสแตนซ์ VUE และตั้งค่าแอตทริบิวต์ "EL" ของอินสแตนซ์นี้เป็น "#EVENTS" ด้วยวิธีนี้อินสแตนซ์จะถูกผูกไว้กับคอนเทนเนอร์ที่มี ID "เหตุการณ์"
// app.jsnew vue ({// และ container binding el กับ id "events": '#events'});ณ จุดนี้ฟังก์ชั่นของ Vue จะมีผลในเหตุการณ์ Div# ก่อนที่จะเพิ่มเนื้อหาอื่น ๆ ให้เพิ่มคุณสมบัติที่จำเป็นในอินสแตนซ์ VUE ที่สร้างขึ้น:
// app.js ใหม่ vue ({// container binding el กับ id ของ "เหตุการณ์": '#events', // ในแอตทริบิวต์ข้อมูลเรากำหนดข้อมูลที่โต้ตอบกับข้อมูลหน้าเว็บ: {}, // เมื่อแอปพลิเคชันถูกโหลด วิธีการ: {}});แอตทริบิวต์ข้อมูลเป็นวัตถุที่ประกาศข้อมูลทั้งหมดในรูปแบบมุมมองของแอปพลิเคชันของเรา
แอตทริบิวต์ Ready เป็นฟังก์ชั่นที่จะดำเนินการเมื่อโหลดแอปพลิเคชัน โดยปกติแล้ววิธีการอื่นจะถูกเรียกที่นี่เพื่อเริ่มต้นข้อมูลที่ต้องการโดยแอปพลิเคชัน
วิธีการกำหนดวิธีการที่จำเป็นต้องใช้ในแอปพลิเคชันนี้
เพิ่มเนื้อหาในแบบฟอร์ม
เราจำเป็นต้องป้อนรายละเอียดของบันทึกในแบบฟอร์ม เราใช้ตัวเลือกเวลาดั้งเดิมของ HTML5 เพื่อตั้งค่าเวลาของเนื้อหาบันทึก (โปรดทราบว่าฟังก์ชั่นนี้ไม่สามารถใช้ได้ในเบราว์เซอร์ Firefox ขอแนะนำให้ใช้ Chrome หรือ Safari)
<div> <อินพุต placeholder = "ชื่อเหตุการณ์" v-model = "event.name"> </div> <div> <textarea placeholder = "คำอธิบายเหตุการณ์" v-model = "event.description"> </textarea> </div> <div> <อินพุต type = "วันที่" @Click = "AddEvent"> ส่ง </button> </div>
เราเพิ่มคำสั่ง "V-model" ลงในแท็กอินพุตและแท็ก textarea เช่นเดียวกับ "โมเดล NG" ของ Angular ค่าของโมเดล V นี้จะระบุข้อมูลที่ถูกผูกไว้กับแท็กนี้ในโมเดลมุมมอง ข้อมูลนี้ไม่เพียง แต่มีอยู่ที่นี่ แต่ยังอยู่ที่อื่นในคอนเทนเนอร์
เราเพิ่มคำสั่ง "@click" ลงในปุ่มส่ง คำสั่งนี้เป็นตัวย่อและชื่อเต็มควรเป็น "v-on: คลิก" ฟังก์ชั่นของมันคือการผูกผู้ฟังเพื่อคลิกเหตุการณ์ไปยังปุ่มนี้ เมื่อเหตุการณ์การคลิกถูกเรียกใช้ฟังก์ชันฟังในคำสั่ง @Click จะถูกดำเนินการ ในตัวอย่างนี้เราผูกฟังก์ชั่น addEvent กับปุ่มส่ง นอกจากนี้เรายังสามารถผูกกิจกรรมอื่น ๆ และกฎการเขียนคือ @Event name = "ฟังก์ชั่นการฟัง" หากเราต้องการผูกฟังก์ชั่นฟัง f กับเหตุการณ์ keydown เราสามารถเขียนสิ่งนี้: @keydown = "f" หรือ v-on: keydown = "f"
ณ จุดนี้หากคุณดูตัวอย่างหน้าเว็บคุณจะเห็นเนื้อหาต่อไปนี้:
เพิ่มข้อมูล
เราได้กล่าวถึงวิธี AddEvent มาก่อนซึ่งใช้เพื่อเพิ่มข้อมูลบันทึกใหม่
ตอนนี้เราจะกำหนดวิธีนี้และเพิ่มข้อมูลที่จำเป็นบางอย่าง
// app.js ... data: {เหตุการณ์: {ชื่อ: '', คำอธิบาย: '', วันที่: ''}, เหตุการณ์: []}, // ฟังก์ชั่นในแอตทริบิวต์พร้อมจะถูกดำเนินการเมื่อแอปพลิเคชันถูกโหลดพร้อม: {// // เมื่อใช้งาน // เรากำหนดวิธีการรับข้อมูล fetchEvents: function () {var events = [{id: 1, ชื่อ: 'มีการประชุม', คำอธิบาย: '9 am ในห้องประชุมชั้น 21', วันที่: '2015-09-10'}, {id: 2, ชื่อ: 'ช็อปปิ้ง', คำอธิบาย: บทเรียนเกี่ยวกับ Vue ', วันที่:' 2016-03-11 '}]; // $ set เป็นวิธีการที่ Vue ให้ไว้เพื่อแทรกข้อมูลลงในอาร์เรย์ มุมมองจะได้รับการรีเฟรชเมื่อดำเนินการนี้ $ set ('เหตุการณ์', เหตุการณ์); }, // แทรกข้อมูลลงในอาร์เรย์ของเหตุการณ์ addEvent: function () {ถ้า (this.event.name) {this.events.push (this.event); this.event = {ชื่อ: '', คำอธิบาย: '', วันที่: ''}; -ในคุณสมบัติข้อมูลเรากำหนดวัตถุเหตุการณ์และอาร์เรย์เหตุการณ์ซึ่งแสดงถึงเหตุการณ์และอาร์เรย์เหตุการณ์ตามลำดับ ข้อมูลนี้จะถูกโหลดเมื่อแอปพลิเคชันถูกโหลด หากเราไม่ได้กำหนดวัตถุเหตุการณ์ที่กำหนดไว้ล่วงหน้าแม้ว่าฟังก์ชั่นที่ตามมาสามารถนำไปใช้ได้เบราว์เซอร์จะรายงานข้อผิดพลาดนี้:
พวกเขาหมายความว่าหากข้อมูลที่คุณใช้ในแอปพลิเคชันของคุณไม่ได้ถูกประกาศในแอตทริบิวต์ข้อมูลประสิทธิภาพของแอปพลิเคชันจะได้รับผลกระทบ ดังนั้นข้อมูลที่เราใช้ในแอปพลิเคชันของเราได้รับการประกาศให้ดีที่สุดในแอตทริบิวต์ข้อมูล
ในคุณสมบัติ Ready เรากำหนดวิธีการ FetchEvents เพื่อรับข้อมูล ในวิธีนี้เราเพิ่มข้อมูลลงในมุมมองผ่านวิธีการตั้งค่า VM. $ ฟังก์ชั่นของมันคล้ายกับวิธีการพุชของอาร์เรย์และยังรีเฟรชมุมมอง พารามิเตอร์ของวิธีนี้จะต้องเป็นปุ่มกดสตริงซึ่งแสดงถึงข้อมูลที่เข้ามา สำหรับการใช้งานเฉพาะโปรดดูที่นี่
ในที่สุดในคุณสมบัติเมธอดเรากำหนดวิธี addEvents เพื่อตรวจสอบว่าค่าของ event.name มีอยู่หรือไม่และถ้าเป็นเช่นนั้นให้เพิ่มเหตุการณ์ในอาร์เรย์เหตุการณ์หรือไม่ หลังจากนั้นข้อมูลในวัตถุเหตุการณ์จะถูกล้างและแบบฟอร์มจะถูกล้างเช่นกัน
เพิ่มรายการ
เราใช้รายการสิ่งต่าง ๆ เพื่อแสดงรายการทุกสิ่ง:
<div> <a href = "#" v-for = "เหตุการณ์ในเหตุการณ์"> <h4> <i> </i> {{event.name}} </h4> <h5> <i v-if = "event.date"> </i> {{envent.date}} </h5> }} </p> <button @click = "deleteEvent ($ index)"> ลบ </button> </a> </div>เราใช้ V-for Directive เพื่อเป็นแบตช์องค์ประกอบการแสดงผลด้วยโครงสร้าง DOM เดียวกันและเนื้อหาการแสดงผลที่แตกต่างกัน ในตัวอย่างนี้เราเพิ่ม V-for Directive ลงในแท็กซึ่งจะสำรวจข้อมูลในอาร์เรย์เหตุการณ์และเราแสดงข้อมูลการสำรวจแต่ละครั้งด้วยเหตุการณ์ องค์ประกอบที่มีการเพิ่ม V-for Directive จะใช้ผลลัพธ์ของการเดินทางแต่ละครั้งในองค์ประกอบเด็กและแสดงซ้ำ ๆ เพื่อนที่ใช้เครื่องยนต์เทมเพลต React หรือ Angular อาจคุ้นเคยกับการใช้งานที่คล้ายกันมากขึ้น ในตัวอย่างของเราเนื้อหาของแท็ก H4, H5, P และปุ่มจะแสดงซ้ำ ๆ และจำนวนลูปคือความยาวของอาร์เรย์เหตุการณ์ เด็กที่มีองค์ประกอบ V-for Directive เรียกว่าเทมเพลตและข้อมูลในเทมเพลตจะถูกห่อด้วยการจัดฟันสองครั้ง ในตัวอย่างนี้ข้อมูลเป็นคุณสมบัติต่าง ๆ ของวัตถุเหตุการณ์ (ชื่อวันที่และคำอธิบาย)
คุณจะสังเกตเห็นว่าองค์ประกอบบางอย่างของเทมเพลตได้เพิ่มคำสั่ง V-หาก คำสั่งนี้ทำหน้าที่เป็นการแสดงผลตามเงื่อนไข มูลค่าของ V-IF เป็นเงื่อนไขการตัดสิน หากผลลัพธ์เป็นจริงองค์ประกอบจะแสดงผลมิฉะนั้นจะไม่แสดงผล นอกจากนี้เราได้เพิ่มคำสั่งคลิกลงในองค์ประกอบปุ่มและเรียกว่าเมธอด deleteEvent เพื่อลบเรื่อง (คำจำกัดความเฉพาะจะได้รับด้านล่าง) ดัชนีพารามิเตอร์ $ แสดงถึงจำนวนขององค์ประกอบที่ผ่านการสำรวจในปัจจุบันในอาร์เรย์
รีเฟรชหน้าและเราจะพบว่ารายการทั้งหมดจะถูกระบุไว้ทางด้านขวาของหน้า หลังจากป้อนเนื้อหาในแบบฟอร์มทางซ้ายและคลิกปุ่ม "ส่ง" รายการใหม่จะถูกเพิ่มลงในรายการทางด้านขวาโดยอัตโนมัติ
มากำหนดวิธี DELEteEvent กันเถอะ
DELETEEVENT: ฟังก์ชั่น (ดัชนี) {ถ้า (ยืนยัน ("คุณแน่ใจหรือไม่ว่าคุณต้องการลบเหตุการณ์นี้?")) {// $ ลบเป็นวิธีการอำนวยความสะดวก vue คล้ายกับ splice this.events. $ ลบ (ดัชนี); -ในวิธีนี้ก่อนอื่นเราถามผู้ใช้ว่าเขาแน่ใจว่าจะลบรายการหรือไม่ หากคุณคลิก "ตกลง" รายการจะถูกลบออกจาก DOM ผ่านวิธีการลบ $ ลบที่กำหนดไว้ล่วงหน้า
ปฏิสัมพันธ์กับแบ็กเอนด์
เช่นเดียวกับ Angular ส่วนหน้าของ Vue และ Back-end จะถูกแยกออกและการโต้ตอบกับ back-end เสร็จสมบูรณ์ผ่านคำขอ HTTP มีเครื่องมือแบบโต้ตอบมากมายคุณสามารถใช้ $ .ajax ที่คุ้นเคย, วัตถุ XMLHTTPRequest ดั้งเดิมหรือไลบรารีบุคคลที่สามอื่น ๆ หรือลองใช้ Vue-Resource
นี่คือการแนะนำสั้น ๆ เกี่ยวกับทรัพยากร Vue Vue-Resource เป็นปลั๊กอินที่ออกแบบมาโดยเฉพาะสำหรับ Vue สำหรับการส่งคำขอ HTTP รองรับเทมเพลตสัญญาและ URI และยังมีเครื่องมือเช่น Interceptor มาดูตัวอย่างของเราข้างต้น เราเปลี่ยนการได้มาของเรื่องเพื่อรับจากเซิร์ฟเวอร์ ในเวลานี้เราจำเป็นต้องปรับเปลี่ยนวิธีการ FetchEvents: (สมมติว่าแบ็กเอนด์ให้บริการที่เกี่ยวข้องกับเรื่องผ่าน URL ของ API/เหตุการณ์เช่นเดียวกันด้านล่าง)
fetchEvents: function () {this. $ http.get ('api/events'). จากนั้น (ฟังก์ชั่น (เหตุการณ์) {this. $ set ('เหตุการณ์', เหตุการณ์);}). catch (ฟังก์ชั่น (ข้อผิดพลาด) {console.log (ข้อผิดพลาด);});};};หากการได้มานั้นสำเร็จแล้วคำสั่งของฟังก์ชันนั้นจะถูกดำเนินการและวิธีการตั้งค่า $ ยังคงถูกเรียก แต่เหตุการณ์พารามิเตอร์อินพุตจะถูกดึงออกมาจากเซิร์ฟเวอร์
หากเราแก้ไข AddEvent เราจำเป็นต้องส่งคำขอโพสต์:
addevent: function () {this. $ http.post ('api/events', this.event). แล้ว (ฟังก์ชั่น (การตอบสนอง) {this.events.push (this.event); console.log ("เพิ่มเหตุการณ์!");})ในทำนองเดียวกันวิธีการลบเรื่องสามารถแก้ไขได้ดังนี้:
DELETEEVENT: ฟังก์ชั่น (ดัชนี) {this. $ http.delete ('api/events/' + event.id). จากนั้น (ฟังก์ชั่น (การตอบสนอง) {this.events. $ ลบ (ดัชนี);}) .catch (ฟังก์ชั่น (ข้อผิดพลาด) {console.log (ข้อผิดพลาด);ที่นี่เราส่ง ID ของเรื่องไปยังเซิร์ฟเวอร์เพื่อบอกให้เซิร์ฟเวอร์ลบ ID ของเรื่องเพื่ออำนวยความสะดวกให้เซิร์ฟเวอร์เพื่อพิจารณาว่าจะลบเรื่องใด
บทสรุป
เพื่อนที่ใช้ Angular และ React จะพบว่า Vue และพวกเขาทั้งหมดคล้ายกัน: คำแนะนำคล้ายกับการประมวลผลเชิงมุมแบบแยกส่วนคล้ายกับ React อย่างไรก็ตาม Vue นั้นแตกต่างจากพวกเขาอย่างชัดเจน มันเบาและใช้งานง่าย คุณไม่จำเป็นต้องทำการกำหนดค่าที่ซับซ้อนเช่น Angular และคุณไม่จำเป็นต้องเรียนรู้แนวคิดใหม่ ๆ เช่น DOM เสมือนจริงใหม่ JSX ฯลฯ เช่น React ดังนั้นหากแอปพลิเคชันของคุณไม่ใหญ่มากคุณอาจพิจารณาใช้ Vue เป็นกรอบแอปพลิเคชันของคุณ
ข้างต้นเป็นบทช่วยสอนการแนะนำอย่างรวดเร็วสำหรับ Vue.js แนะนำให้คุณรู้จักโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!