มีเฟรมเวิร์ก JavaScript จำนวนมากที่มีอยู่ในทุกวันนี้มันเป็นเรื่องยากที่จะติดตามพวกเขาทั้งหมดและแน่นอนว่ามันไม่น่าเป็นไปได้ที่ทุกคนจะเชี่ยวชาญพวกเขาทั้งหมด ความหมายสำหรับเราส่วนใหญ่คือเราจะต้องเลือกเกี่ยวกับกรอบการพัฒนาที่เราจะใช้เวลาในการเรียนรู้
ในบทความนี้เราจะพิจารณา Vue.js อย่างรวดเร็วเพื่อให้คุณสามารถตัดสินใจด้วยตัวเองว่าเป็นไปได้หรือไม่ที่เหมาะกับโครงการที่คุณทำงานและดูเหมือนว่าจะเหมาะกับคุณหรือไม่
Vue.js คืออะไร
แม้ว่าจะไม่ได้เป็นตัวพิมพ์ใหญ่ตามอัตภาพ แต่“ Vue” เป็นคำย่อของ Visual Understanding Environment จุดประสงค์หลักคือเพื่อให้ง่ายต่อการพัฒนาเว็บแอปพลิเคชันโดยลดความซับซ้อนของโค้ด มีหลายอย่างที่เหมือนกันกับ React.js แต่ Vue เวอร์ชันปัจจุบันแสดงผลเร็วกว่า React และดูเหมือนว่าจะมีประสิทธิภาพมากกว่า
Vue ยากที่จะเรียนรู้หรือไม่?
หากคุณเป็นผู้เขียนโปรแกรมที่มีประสบการณ์แล้วคุณไม่ควรลำบากในการเริ่มต้นใช้งาน Vue แต่มันไม่ถูกต้องที่จะอธิบายว่าเป็นภาษาเริ่มต้น คุณต้องมีประสบการณ์กับ HTML, CSS และ JavaScript เพื่อสร้างสิ่งที่ใช้ได้จริง
เส้นโค้งการเรียนรู้ที่มี Vue นั้นมีความชันน้อยกว่า React เล็กน้อยและมีความชันน้อยกว่า Angular ดังนั้นสิ่งที่สามารถกล่าวได้อย่างถูกต้องคือ Vue นั้นค่อนข้างง่ายต่อการเรียนรู้เมื่อเปรียบเทียบกับกรอบการพัฒนาอื่น ๆ ที่เป็นที่นิยม
Vue ช่วยให้บรรลุวัตถุประสงค์ได้อย่างไร
มันแตกต่างกันเล็กน้อยขึ้นอยู่กับวัตถุประสงค์ของคุณจริง ๆ แต่โดยทั่วไปคุณผูกบล็อกโค้ดกับ HTML divs วิธีการนี้ทำให้การแนะนำการโต้ตอบและเนื้อหาแบบไดนามิกง่ายกว่าการใช้ HTML, CSS และ JavaScript ปกติ
ในทางกลับกันคุณไม่สามารถทำ Vue ได้มากกว่าที่คุณทำได้โดยใช้วิธีการทั่วไปมากขึ้น การใช้ Vue เป็นเพียงเรื่องของการทำให้สิ่งต่าง ๆ ง่ายขึ้นสำหรับคุณในช่วงการพัฒนา แต่มันไม่มีผลอะไรมากต่อผลลัพธ์สุดท้ายนอกเหนือจากผลกระทบต่อประสิทธิภาพเล็กน้อยเนื่องจากการโหลดรหัสเฟรมเวิร์ก
ข้อดีอีกอย่างของ Vue คือมันมีโมดูลแบบโมดูลซึ่งหมายความว่าคุณสามารถใช้ส่วนประกอบที่คุณพัฒนาในหลายโครงการได้อีกครั้ง
Vue มีเทคนิคเด็ด ๆ ใช่ไหม?
แน่นอนมันทำได้ และสิ่งที่ดีที่สุดคือเอฟเฟกต์การเปลี่ยนแปลงในตัว ซึ่งช่วยให้คุณควบคุมสิ่งที่จะอื่นๆ ได้wise เป็นโครงสร้าง CSS และ JavaScript ที่เน้นโค้ดมาก โดยใช้โค้ดเพียงหนึ่งหรือสองบรรทัด ซึ่งช่วยประหยัดเวลาและความพยายามในการสร้างแอปพลิเคชันของคุณ
คุณสมบัติที่มีประโยชน์อีกอย่างคือการแสดงผลดั้งเดิมสำหรับอุปกรณ์เฉพาะเช่น Android และ iOS ดังนั้นคุณสามารถปรับแต่งแอปพลิเคชันของคุณสำหรับอุปกรณ์ที่กำลังทำงานอยู่โดยไม่ต้องทำงานมากนัก
หากคุณยังไม่ได้เปิดบัญชี IQ Option คลิ๊กที่นี่ กรอกรายละเอียดของคุณและมันจะนำไปยังหน้าเพจที่คล้ายด้านล่างนี้
ตามที่ระบุไว้ก่อนหน้า Vue นั้นง่ายต่อการเรียนรู้ แต่ไม่ใช่ภาษาของผู้เริ่มต้น คุณยังต้องรู้วิธีการของคุณภายในบล็อกรหัส
ปัญหาคือเหมือนกับเฟรมเวิร์กส่วนใหญ่ เอกสารประกอบนั้นขี้เกียจมาก และส่วนใหญ่อุทิศตนเพื่อโน้มน้าวให้คุณใช้มันเป็นหลัก ในเอกสารประกอบจะให้ความสนใจน้อยกว่ามากเพื่ออธิบายว่าทุกอย่างทำงานอย่างไรหรือทำไมคุณถึงทำสิ่งใดสิ่งหนึ่งด้วยวิธีใดวิธีหนึ่ง แทบทุกตัวอย่างกรอบงานอย่างเป็นทางการที่เคยสร้างทิ้งความสำคัญในformatไอออนที่คุณต้องแหย่ไปรอบ ๆ เป็นเวลาหลายชั่วโมงเพื่อค้นพบ นั่นเป็นข้อบกพร่องที่แชร์โดยเอกสารและตัวอย่างของ Vue เช่นกัน
เพื่อให้ง่ายต่อการเข้าใจสิ่งที่คุณต้องทำจริง ๆ เพื่อสร้างโครงการนี้ใหม่เหล่านี้เป็นขั้นตอนที่จำเป็น:
1. เพิ่มสคริปต์การอ้างอิง vue.js
สำหรับการเพิ่มประสิทธิภาพความเร็วการรวมสิ่งนี้ไว้หลังเนื้อหาหน้าทั้งหมดของคุณ แต่ก่อนหน้าแท็กเนื้อหาปิดในแหล่งที่มา HTML คุณอาจโหลดทรัพยากรของหน้าอื่น ๆ ในส่วนนี้ได้เช่นกันและลำดับความสำคัญในการโหลดจะกำหนดลำดับที่คุณควรแทรกแต่ละทรัพยากร
นี่คือตัวอย่างของการรวม vue.js จาก CDN:
และนี่คือตัวอย่างของการรวม vue.js จากไดเรกทอรีบนเซิร์ฟเวอร์ของคุณ:
หากไม่มีการอ้างอิงถึง vue.js สิ่งที่เกี่ยวข้องกับ Vue สามารถเกิดขึ้นได้
2. เพิ่มคอมโพเนนต์ Vue ลงในเนื้อหา HTML ของคุณ
นั่นคือสิ่งที่เกิดขึ้นกับรหัสนี้:
ตอนนี้มันไม่สมเหตุสมผลมากนัก แต่ส่วนของ Vue คือองค์ประกอบ "demo-grid" ที่ว่างเปล่าบวกกับการเพิ่ม "v-directive" ให้กับอินพุตแบบสอบถาม (ในกรณีนี้คือ "v-model ” ซึ่งใช้สำหรับผูกรหัส Vue เพื่อสร้างอินพุต)
3. ถ้าโครงการต้องการเทมเพลตส่วนประกอบให้เพิ่มส่วนนี้ลงในเนื้อหา HTML
ส่วนของรหัสนี้ผิดปกติเพราะดูเหมือนว่า HTML ธรรมดาภายในแท็กสคริปต์ซึ่งจะสร้างความสับสนให้กับซอฟต์แวร์แก้ไข HTML ส่วนใหญ่ (สังเกตว่าสีตัวบ่งชี้ผิดในบางแห่ง)
4. เพิ่มอินสแตนซ์ Vue
นี่เป็นหนึ่งในสิ่งสุดท้ายที่จะปรากฏบนหน้าเว็บเพราะมันทำงานการแสดงผลแบบไดนามิก สิ่งนี้มีประโยชน์ในการเพิ่มประสิทธิภาพมากกว่าการเพิ่มไว้ก่อนหน้าใน
- บรรทัดที่ 46 ระบุว่าเบราว์เซอร์ควรมองหาส่วนประกอบในหน้าที่เรียกว่า "demo-grid" และบรรทัดที่ 47 ระบุว่าควรใช้ "# grid-template" เป็นเทมเพลตสำหรับส่วนประกอบ (นี่คือรหัสเทมเพลตที่เพิ่มในขั้นตอน 3 จากบรรทัดที่ 9 ถึงบรรทัดที่ 30)
- บล็อกจากบรรทัดที่ 48 ถึงบรรทัดที่ 52 กำหนดคุณสมบัติของส่วนประกอบ
- บรรทัดที่ 53 ถึง 62 กำหนดฟังก์ชันสำหรับการเรียงลำดับข้อมูลในตาราง
- บรรทัดที่ 63 ถึง 85 กำหนดฟังก์ชันสำหรับการกรองข้อมูล (จากผลลัพธ์ในคำค้นหา)
- บรรทัดที่ 86 ถึง 90 กำหนดฟังก์ชันสำหรับการใช้ตัวพิมพ์ใหญ่ของคำในชุดข้อมูล
- บรรทัดที่ 91 ถึง 97 กำหนดวิธีการเรียงลำดับข้อมูล
5. เพิ่มในรหัสเรียกใช้ก่อนแท็กปิดสคริปต์
หากคุณทำตามขั้นตอนที่ 1 ถึง 4 และเปิดไฟล์ในเบราว์เซอร์ทั้งหมดที่คุณเห็นคือกล่องค้นหาและไม่มีอะไรเพิ่มเติม นั่นเป็นเพราะทุกอย่างที่จำเป็นในการสร้างตารางได้รับการกำหนด แต่ไม่ได้สร้าง ดังนั้นในขั้นตอนที่ 5 เราเพิ่มรหัสที่สร้างตารางที่ถูกกำหนดโดยขั้นตอนก่อนหน้านี้ทั้งหมด
- บรรทัด 100 สร้างอ็อบเจ็กต์ Vue ใหม่
- บรรทัดที่ 101 ระบุองค์ประกอบที่จะผูกการดำเนินการ
- บรรทัดที่ 102 ถึง 111 ให้ข้อมูลวัตถุที่จะถูกผูกไว้กับองค์ประกอบ
การทดสอบ
เมื่อมีการกำหนดและสร้างวัตถุที่ต้องการตอนนี้คุณก็พร้อมที่จะทดสอบผลลัพธ์แล้ว เตรียมที่จะจมอยู่ใต้น้ำเพราะนี่คือสิ่งที่คุณควรเห็นในเบราว์เซอร์:
เกิดอะไรขึ้น? ทำไมมันน่าเบื่อเหรอ? เป็นเพราะไม่มีการจัดแต่งทรงผม หากเราใช้การกำหนดค่าเริ่มต้นจากตัวอย่าง JSFiddle ตารางจะมีลักษณะดังนี้:
การพิมพ์อะไรก็ได้ในช่องค้นหา (ไม่ต้องตรงตามตัวพิมพ์ใหญ่ - เล็ก) จะกรองผลลัพธ์ตาม:
การคลิกที่ส่วนหัวของคอลัมน์จะช่วยให้คุณเปลี่ยนลำดับการแสดงผลได้ ตัวอย่างเช่นการคลิกที่ส่วนหัวคอลัมน์“ Power” จะเปลี่ยนผลลัพธ์ที่จะแสดงตามลำดับระดับพลังงาน
การปรับปรุงและปรับตัว
ปัญหาอีกประการของตัวอย่างเฟรมเวิร์กคือ โดยปกติแล้วจะไม่ได้รวมอะไรมากในformatเพื่อช่วยคนที่ไม่คุ้นเคยกับ codebase ในการหาวิธีนำไปใช้ในภาคสนาม สิ่งที่พวกเขาเห็นในตัวอย่าง Vue ทำงานได้ดีมากเมื่อเทียบกับ Bootstrap (ซึ่งอยู่ภายใต้ชื่อฉาวโฉ่)formative) แต่ยังคงทิ้งคำถามที่ยังไม่ได้ตอบไว้มากมาย
นี่คือการเปลี่ยนแปลงเล็กน้อยที่เราอาจทำกับแอปพลิเคชันนี้เพื่อเปลี่ยนรูปลักษณ์และสิ่งที่ทำ:
- สไตล์ตารางเป็น Bootstrap stripeตารางd
- เปลี่ยนจำนวนคอลัมน์
- เปลี่ยนข้อมูลเป็นสิ่งที่แตกต่างอย่างสิ้นเชิง
1. การเพิ่ม Bootstrap
2. การตัดองค์ประกอบในตาราง Bootstrap
3. การปรับองค์ประกอบรากเพื่อใช้โมเดลการจัดวาง Bootstrap
4. ปรับลูกศรลูกศรอีกครั้ง
5. การปรับเปลี่ยนข้อมูล
6. การทดสอบ
- ไม่กรอง & ไม่เรียงลำดับ
- จัดเรียงตามคำสั่ง (น้อยไปหามาก)
- จัดเรียงโดยใช้สำหรับ (น้อยไปมาก)
- กรอง "ตามเงื่อนไข"
- กรอง "ตามเงื่อนไข" และจัดเรียงตามคำสั่ง (จากน้อยไปมาก)
ความคิดสุดท้าย
หวังว่าสิ่งที่เห็นได้ชัดจากตัวอย่างเหล่านี้คือเราได้สร้างแอพพลิเคชั่นสองตัวที่มีรูปลักษณ์และเนื้อหาที่แตกต่างกันมากจากรหัสทั่วไป ด้วย Vue มันง่ายมากที่จะใช้รหัสของคุณอีกครั้งในหลายโครงการและอาจสนุกกับการประหยัดเวลาได้มาก
มารยาทภาพส่วนหัวของ อเล็กซานดาร์ซาวิช
ความคิดเห็น 0 คำตอบ