คำนำ
ระดับ JavaScript ของฉันคือค่าเฉลี่ย มันค่อนข้างเฉลี่ย ดังนั้นจึงเป็นเรื่องยากสำหรับเทคโนโลยีกรอบการทำงานส่วนหน้าล่าสุด แต่ความเป็นจริงทำให้ฉันเผชิญหน้ากับมัน ดังนั้นการเรียนรู้จึงเป็นหนทางเดียว
ฉันเปรียบเทียบเฟรมส่วนหน้า n ในแนวตั้งและในที่สุดก็เลือก Vue ทำไม เหตุผลมีดังนี้:
1. ไม่ทราบถึงอนาคต 1.x มีช่วงการเรียนรู้สูงและดูเหมือนว่าจะถูกทอดทิ้งในขณะที่ 2 ยังไม่ได้เปิดตัวอย่างเป็นทางการ
2. React ค่อนข้างทรงพลัง แต่ไม่มีการติดต่อ
3. Vue นั้นง่ายและโดยการเริ่มต้นใช้งานมันเหมาะสำหรับความคิดและระดับของฉัน
4. Vue มีเอกสารภาษาจีนและฉันดูสบายขึ้น
เนื่องจากฉันตัดสินใจเรียนรู้ Vue วิธีที่ดีที่สุดในการเรียนรู้คือการฝึกฝน ฉันบังเอิญเห็นว่ามี API สาธารณะสำหรับฟอรัม cnodejs.org ซึ่งสะดวกมาก ดังนั้นฉันจึงตัดสินใจใช้ API สาธารณะนี้เพื่อเขียนตัวอย่าง
บทนำอินเทอร์เฟซ
นี่คืออินเทอร์เฟซที่เปิดเผยต่อสาธารณะโดย cnodejs.org แน่นอนว่ามันไม่ได้เป็นเพียงการใช้สำหรับส่วนหน้า สามารถใช้กับโปรแกรมต่าง ๆ ที่อยู่อินเตอร์เฟสคือ http://cnodejs.org/api ผ่านหน้านี้เนื้อหาที่เกี่ยวข้องจะถูกนำเสนอในรายละเอียด
อินเทอร์เฟซที่พวกเขามีให้เสร็จสมบูรณ์ซึ่งหมายความว่าเราสามารถสร้างฟอรัมเช่นพวกเขาผ่านอินเทอร์เฟซเหล่านี้
แผนโครงการ
1. สร้างหน้ารายการที่สามารถอ่านเนื้อหารายการของ CNODEJS
2. ทำหน้ารายละเอียดคลิกลิงก์ในหน้ารายการและป้อนหน้ารายละเอียด
3. ใช้เทคโนโลยี SSI เพื่อรับรู้การใช้รหัส HTML ซ้ำ ค้นหา SSI+SHTML เพื่อเรียนรู้เกี่ยวกับเนื้อหาที่เกี่ยวข้อง
4. รหัส CSS ถูกคอมไพล์ล่วงหน้าโดยใช้ SASS
ไดเรกทอรีไฟล์
├─index.shtmlหน้ารายการการแสดงผล
├─Content.SHTMLรายละเอียดหน้ารายละเอียด
├─inc incl Fragmented File
รหัสแถบด้านข้าง html. html
│─Footer.htmlส่วนลิขสิทธิ์ของรหัส
ase บริเวณหัว│─Hhead.htmlเรียก js และรหัสอื่น ๆ
logo ส่วนหัวส่วนหัวและรหัสการนำทางของหน้า html
ไฟล์ทรัพยากร
├─Image
├─JS
│├ -common ไดเรกทอรีรหัสของฉัน
│├การดำเนินการสาธารณะ JS JS
method method.js วิธีการกำหนดเอง JS
ไดเรกทอรีซอร์สโค้ด jQuery jQuery
│├luginsไดเรกทอรีปลั๊กอินอื่น ๆ
หน้าเค้าโครงหน้าเค้าโครงเพจเพจเพจเพจเพจเพจ
directory ซอร์สโค้ด Vue
└─Style
├─style.scss SASS Source File
├├style.cssไฟล์ css ที่รวบรวม
├─Base
└─SCSS
ดาวน์โหลดไฟล์ต้นฉบับของฉัน https://github.com/fengcms/vue-cnodejsorgtest
เริ่มเขียนรหัส
ขั้นแรกให้ทำตามการออกแบบไดเรกทอรีไฟล์ด้านบนและเริ่มเขียนไฟล์ลงไป Res เป็นไดเรกทอรีทรัพยากร คุณสามารถดูได้หรือรู้ว่ามันคืออะไร
ในความเป็นจริงจุดสำคัญคือไฟล์ index.shtml และ content.shtml
เตรียมไฟล์ hompage list html
<! doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"> <title> title </title> <link rel = "stylesheet" href = "res/style.cssss"> </head> fungleo </a> </h1> <av> <ul> <li> รายการการนำทาง </li></ul> </av> </header> <section> <section> <ul> <li> <i> <img src = "#url url" ชื่อเรื่อง </a> </li></ul> <div> </div> </section> <side> <h3> คำแนะนำในหน้านี้ </h3> ... </side> </section>
ดังที่ได้กล่าวมาแล้วมันเป็นหน้าคงที่ที่ฉันเขียนก่อน ร่วมกับ CSS ของฉันเอฟเฟกต์จะแสดงในรูปด้านล่าง:
โปรดรับรหัสที่สมบูรณ์จาก GitHub
แนะนำไฟล์ JS เช่น Vue & JQuery
<script src = "res/js/jQuery/jQuery-2.2.3.min.js"> </script> <script src = "res/js/vue/vue.min.js"> </script>
รับข้อมูลจากอินเทอร์เฟซ
ก่อนอื่นไม่ว่าอะไรเราจะต้องได้รับข้อมูลจากอินเทอร์เฟซก่อนที่เราจะสามารถทำต่อไปได้ เราใช้ jQuery เพื่อใช้วิธี AJAX เพื่อนำข้อมูลไปใช้
รหัสต่อไปนี้:
$ (function () {$ .ajax ({type: 'get', url: "http://cnodejs.org/api/v1/topics", ประเภทข้อมูล: 'json', ความสำเร็จ: ฟังก์ชั่น (data) {if (data.success) {console.log (data) ฟังก์ชั่น (ข้อมูล) {แจ้งเตือน (json.stringify (data));}});})รหัสดังกล่าวข้างต้น มาดูคอนโซลเบราว์เซอร์และภาพหน้าจอมีดังนี้:
ดังที่แสดงในรูปด้านบนเราได้รับข้อมูลสำเร็จ
วิเคราะห์ข้อมูล
ดังที่แสดงในรูปด้านบนข้อมูลมีเนื้อหาต่อไปนี้
1. ผู้แต่ง
1. URL ของผู้แต่ง Avatar
2. ชื่อผู้เขียนชื่อผู้ใช้
2. รหัสผู้แต่ง
3. โพสต์เนื้อหา
4. เวลาวางจำหน่าย
5. มันเป็นสาระสำคัญหรือไม่
6. โพสต์ ID
7. เวลาตอบกลับครั้งสุดท้าย
8. จำนวนการตอบกลับ
9. แท็กทริสทริค
10. โพสต์ชื่อ
11. ไม่ว่าจะด้านบน
12. เรียกดูสถิติ
อินเทอร์เฟซข้อมูลดังกล่าวข้างต้น แน่นอนถ้าคุณเป็นฟอรัมเต็มหน้าที่ข้อมูลเหล่านี้มีประโยชน์ ในโครงการของฉันไม่ได้ใช้หลายโครงการ มาดูสิ่งที่ฉันต้องการ
<li> <i> <img src = "#avatar url"> <span> ชื่อผู้ใช้ </span> </i> <time> โพสต์ 5 วันที่ผ่านมา </time> <a href = "content.html? ลิงค์รหัส"> โพสต์ชื่อ </a>
ดังที่แสดงในรหัสด้านบนสิ่งที่เราต้องวนซ้ำรวมถึง
1. URL ของผู้แต่ง Avatar
2. ชื่อผู้เขียนชื่อผู้ใช้
3. เวลาวางจำหน่าย
4. โพสต์ ID
5. โพสต์ชื่อ
ไม่มีปัญหาเนื้อหาและอินเทอร์เฟซทั้งหมดที่เราต้องการมีอยู่
ห่อหุ้มรหัส Ajax
แม้ว่ารหัส Ajax จะไม่นาน แต่ฉันก็ยังรู้สึกอึดอัด ดังนั้นฉันใช้รหัสต่อไปนี้เพื่อห่อหุ้มมัน
// ajax รับฟังก์ชันวิธี JSON getjson (url, func) {$ .ajax ({type: 'get', url: url, dataType: 'json', ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {ถ้า (data.success) {func (data); การแจ้งเตือน (json.stringify (data));}});}ดังที่ได้กล่าวไว้ข้างต้นหากจำเป็นเราจำเป็นต้องใช้ฟังก์ชั่น getjson (URL, func) เท่านั้น
รหัสที่ห่อหุ้มอ้างอิง
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getjson (url, ฟังก์ชั่น (data) {console.log (data);});});หลังจากแก้ไขเช่นนี้ลองมาดูกันว่าเราสามารถพิมพ์ข้อมูลที่เราต้องการได้หรือไม่? ดังที่แสดงในรูปด้านล่าง:
เรายังคงได้รับข้อมูล เรากำลังห่อหุ้มฟังก์ชันการโทรกลับและเปลี่ยนเป็นรหัสต่อไปนี้
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getjson (url, pushdom);}); ฟังก์ชั่น pushdom (data) {console.log (data);};ตกลงหากไม่มีข้อผิดพลาดข้อมูลอินเตอร์เฟสสามารถพิมพ์ออกมาได้อย่างแน่นอน หลังจากการดำเนินการนี้รหัสของเราจะกระชับและเพิ่มขึ้นอย่างมาก สิ่งที่เราต้องทำต่อไปคือการทำในฟังก์ชั่น pushdom (data)
รหัสการแสดงผล Vue
ก่อนอื่นเราต้องใช้วิธี Vue เพื่อเขียนข้อมูลที่เราต้องการแทรกในหน้า
ส่วนรหัส HTML
<li v-for = "ข้อมูลในข้อมูล"> <i> <img src = "{{info.author.avatar_url}}"> <span> {info.author.loginname}} </span> }} "> {{info.title}} </a> </li> 1คะแนนความรู้ Vue
การวนซ้ำข้อมูล http://vuejs.org.cn/api/#v-for
ส่วนรหัส JS
ฟังก์ชั่น pushdom (data) {var vm = new vue ({el: '.list', data: data});}มาดูเอฟเฟกต์กันเถอะ:
โอเคตื่นเต้นมาก ในรหัสเพียงไม่กี่บรรทัดเราประสบความสำเร็จในการแสดงรายการด้วย Vue
สรุป
1.AJAX เป็นกุญแจสำคัญในการรับข้อมูล
2. เมื่อคุณเข้าใจเนื้อหา Vue เล็กน้อยคุณสามารถเริ่มต้นได้
3. เมื่อสร้างโครงการรหัสและไฟล์จะต้องชัดเจนและชัดเจน
ภาคผนวก
เว็บไซต์อย่างเป็นทางการของ Vue
รายละเอียด cnodejs API
ดาวน์โหลดซอร์สโค้ดของชุดบทเรียนนี้
บทที่ 1 ของการสอนเชิงปฏิบัติ Vuejs สร้างพื้นฐานและการแสดงผลรายการ
Vuejs การสอนการปฏิบัติบทที่ 2 แก้ไขข้อผิดพลาดและความสวยงาม
การสอนการปฏิบัติ Vuejs บทที่ 3 โดยใช้ปลั๊กอินเลย์เอาต์เพื่อรับรู้การปนเปื้อน
บทความนี้เขียนโดย Fungleo เดิม
ที่อยู่รุ่นแรก: http://blog.csdn.net/fungleo/article/details/51649074
บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
สำหรับการสอนเกี่ยวกับส่วนประกอบ vue.js โปรดคลิกที่หัวข้อพิเศษ vue.js การสอนการเรียนรู้องค์ประกอบเพื่อเรียนรู้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น