1. บทนำสู่ vue.js
1. คุณสมบัติหลักของ Vue: (1) กระชับ (2) น้ำหนักเบา (3) ไดรเวอร์ข้อมูลเร็ว (4) ไดรเวอร์ (5) โมดูลที่เป็นมิตร (6) ส่วนประกอบ
(1) กระชับ
นี่คือรหัสของ Angular เพื่อใช้การผูกสองทาง
// html <body ng-app = "myapp"> <div ng-controller = "myctrl"> <p> {{note}} </p> <อินพุต type = "text" ng-model = "note"> </div> []); mymodule.controller ('myctrl', ['$ scopp', ฟังก์ชั่น ($ scope) {$ scope.note = '';]);จากนั้นดูที่รหัสของ Vue:
// html <body> <div id = "app"> <p> {{note}} </p> <อินพุต type = "text" v-model = "note"> </div> </body> // jsvar vm = new vue ({el 'ในการเปรียบเทียบฉันคิดว่ารูปแบบการเขียนรหัสของ Vue นั้นกระชับและเข้าใจง่ายกว่า
(2) ไม่ได้ไม่มีความสง่างาม
แม้ว่า Vue จะเป็นเฟรมเวิร์กที่ค่อนข้างเบา แต่ก็เรียบง่ายและมีน้ำหนักเบาและใช้งานง่ายมาก API ที่ให้นั้นเป็นเรื่องง่ายที่จะเข้าใจและยังมีคำแนะนำและคุณลักษณะที่สะดวกมาก
ตัวอย่างเช่น:
1) เหตุการณ์คลิก
<a v-on: click = "dosomething"> </a>
สามารถย่อได้เป็น:
<a @click = "dosomething"> </a>
2) ผูกแอตทริบิวต์ไดนามิก
<a v-bind: href = "url"> </a>
สามารถย่อได้เป็น:
<A: href = "url"> </a>
3) ตัวดัดแปลงที่สะดวก
<!-ป้องกันเหตุการณ์คลิกจาก bubbled-> <a @click.stop = "dosomething"> </a> <!-เหตุการณ์จะถูกเรียกใช้เฉพาะเมื่อกดปุ่ม ENTER-> <อินพุต @keyup.enter = "ส่ง">>
4) ลักษณะพารามิเตอร์การปฏิบัติ
<!-debounce ตั้งค่าความล่าช้าขั้นต่ำ-> <อินพุต v-model = "note" debounce = "500"> <!-อัปเดตข้อมูลใน "เปลี่ยน" แทนเหตุการณ์ "อินพุต"-> <อินพุต v-model = "msg" lazy>
แล้วมันจะรู้สึกสง่างามมากหรือไม่?
(3) เคล็ดลับเล็ก ๆ
เมื่อพูดถึงความเล็กเราควรให้ความสนใจกับขนาดซอร์สโค้ดของ Vue ก่อน ซอร์สโค้ดของเวอร์ชันการผลิตของ Vue (เช่นรุ่นขั้นต่ำ) มีเพียง 72.9KB เว็บไซต์อย่างเป็นทางการบอกว่า GZIP มีเพียง 25.11KB หลังจากการบีบอัดซึ่งเล็กกว่า 144KB ของ Angular ครึ่งหนึ่ง
ข้อดีอย่างหนึ่งของความกะทัดรัดคือช่วยให้ผู้ใช้สามารถเลือกโซลูชันที่สอดคล้องกันได้อย่างอิสระมากขึ้นและช่วยให้ผู้ใช้มีพื้นที่มากขึ้นในแง่ของการจับคู่ไลบรารีอื่น ๆ
ตัวอย่างเช่นแกนกลางของ VUE ไม่รวมถึงการกำหนดเส้นทางและฟังก์ชั่น AJAX โดยค่าเริ่มต้น แต่ถ้าคุณต้องการการกำหนดเส้นทางและ AJAX ในโครงการของคุณคุณสามารถใช้ Vue-Router อย่างเป็นทางการและปลั๊กอิน Vue-Resource ของบุคคลที่สามที่จัดทำโดย Vue ในเวลาเดียวกันคุณสามารถใช้ไลบรารีหรือปลั๊กอินอื่น ๆ ที่คุณต้องการใช้เช่น Ajax ของ JQuery ฯลฯ
มันไม่ได้ยืดหยุ่นมากเหรอ?
(4) มีอาจารย์ที่ยอดเยี่ยมมากมาย
แม้ว่า Vue จะมีขนาดเล็ก แต่ก็เป็น "นกกระจอกมีขนาดเล็กและมีอวัยวะภายในทั้งหมด" และมันก็ง่ายต่อการสร้างแอพพลิเคชั่นขนาดใหญ่
1) แบบแยกส่วน
เมื่อรวมกับเครื่องมือสร้างโมดูลของบุคคลที่สามเช่น CommonJS, RequireJS หรือ SEAJS, Code Modularity สามารถทำได้อย่างง่ายดาย
อย่างไรก็ตามที่นี่ฉันไม่แนะนำให้ใช้เครื่องมือการก่อสร้างที่กล่าวถึงข้างต้น ปัจจุบันเป็นโซลูชันที่ได้รับความนิยมมากที่สุดในการใช้ฟังก์ชั่นโมดูลาร์ของ ES6 โดยตรงจากนั้นจัดทำแพ็คเกจตาม WebPack
หากคุณไม่เข้าใจฟังก์ชั่นของโมดูล ES6 โปรดดูที่ที่อยู่ลิงก์สำหรับรายละเอียด:
ในบทความในอนาคตฉันจะแนะนำมันรวมถึงการกำหนดค่าของ WebPack
2) ส่วนประกอบ
ฟังก์ชั่นส่วนประกอบของ Vue เป็นไฮไลต์ของมัน ด้วยการใส่รหัส HTML, CSS และ JS ขององค์ประกอบที่แน่นอนบนหน้าลงในไฟล์. vue สำหรับการจัดการการบำรุงรักษารหัสสามารถปรับปรุงได้อย่างมาก
ตัวอย่างเช่น:
// app.vue <memplate> <div v-text = "note"> </div> </melmplate> <script> การส่งออกค่าเริ่มต้น {data () {return {หมายเหตุ: 'นี่คือเทมเพลต HTML ขององค์ประกอบ! '}}} </script> <สไตล์ scoped> .box {color: #000;} </style>นอกจากนี้เรายังสามารถเขียนภาษาประมวลผลล่วงหน้าในส่วนประกอบ:
// app.vue <template lang = 'jade'> div (class = "box" v-text = "text") </template> <script> การส่งออกค่าเริ่มต้น {data () {return {หมายเหตุ: 'นี่คือเทมเพลต HTML ของส่วนประกอบ! '}}} </script> <style lang = "styles">. สีกล่อง: #000 </style>แน่นอนเราจำเป็นต้องจัดแพ็คเกจผ่าน WebPack ขอแนะนำให้ใช้ WebPack + Vue-Loader และใช้ไวยากรณ์ ES6 ในเวลาเดียวกัน ต้องติดตั้งบาเบลสำหรับการแปลง เนื่องจากบทความนี้เป็นการอภิปรายสั้น ๆ เกี่ยวกับ vue.js ฉันจะไม่แนะนำในเชิงลึกที่นี่
3) การกำหนดเส้นทาง
เช่นเดียวกับ Angular Vue มีความสามารถในการกำหนดเส้นทาง ผ่านฟังก์ชั่นการกำหนดเส้นทางเราสามารถตระหนักถึงการโหลดตามความต้องการของแต่ละองค์ประกอบและสร้างแอปพลิเคชันหน้าเดียวได้อย่างง่ายดาย นี่คือไฟล์กำหนดค่าการกำหนดเส้นทางอย่างง่าย:
// router.js'use ฟังก์ชั่นเริ่มต้นที่เข้มงวด export (เราเตอร์) {router.map ({'/': {ส่วนประกอบ: ฟังก์ชั่น (แก้ไข) {ต้องการ (['./ ส่วนประกอบ/foo.vue'], แก้ไข)}}, '/foo' }, '/bar': {ส่วนประกอบ: ฟังก์ชัน (แก้ไข) {ต้องการ (['./ ส่วนประกอบ/bar.vue'], แก้ไข)}}})}2. บทนำเกี่ยวกับส่วนประกอบ bootpage
ที่จริงแล้วมันไม่ใช่องค์ประกอบระดับสูง ในทางตรงกันข้ามมันเป็นเพียงส่วนประกอบของการเพจโต๊ะง่าย ๆ ส่วนใหญ่เป็นเพราะฉันต้องการองค์ประกอบการเพจตารางในโครงการล่าสุดของฉัน ส่วนประกอบการแบ่งหน้าห้องสมุดส่วนประกอบอย่างเป็นทางการของ Vue นั้นทรงพลังเกินไปหรือไม่เหมาะสำหรับฉันดังนั้นฉันจึงเขียนตัวเองให้ทำกับมัน บางทีบางคนอย่างฉันต้องการองค์ประกอบการเพจแบบง่าย ๆ เพื่อใช้ฟังก์ชั่นการเพจแบบง่าย ๆ ฉันจะแบ่งปันที่นี่และทุกคนจะเติมในหลุม
หากคุณต้องการส่วนประกอบระดับสูงคุณสามารถย้ายไปที่ไลบรารี Vue Component อย่างเป็นทางการ
(1) วิธีใช้
ในไฟล์. vue องค์ประกอบเราเขียนเทมเพลตเช่นนี้นั่นคือรหัส HTML:
<table> <thead> <tr> <th> id </th> <th> ชื่อ </th> <th> เนื้อหา </th> <th> หมายเหตุ </th> </tr> </thead> <tbody> <ttr v-for = "ข้อมูลใน tablelist"> <td v-text = "data.num"> </td> <td v-text. v-text = "data.contents"> </td> <td v-text = "data.remark"> </td> </tbody> <tfoot> <tr> <td colspan = "4"> <div> <boot-page: async = "false" </td> </tr> </tfoot> </table>
ในแท็ก <boot-page> async หมายถึงว่าจะได้รับข้อมูลจากฝั่งเซิร์ฟเวอร์หรือไม่ FALSE คือ NO; ข้อมูลเป็นอาร์เรย์ข้อมูลแบบตารางคงที่ เลนส์เป็นอาร์เรย์ของแถวที่แสดงต่อหน้า Page-Len คือจำนวนหน้าเว็บที่สามารถแสดงได้
รหัส JavaScript ที่ใช้ข้อมูลคงที่นั่นคือเนื้อหาในแท็กสคริปต์มีดังนี้:
<script> นำเข้า bootpage จาก './components/bootpage.vue' การส่งออกค่าเริ่มต้น {data () {return {lenarr: [10, 50, 100], // แสดงความยาวต่อ Pagelen: 5, // จำนวนหน้า '' '', ',', ',', ',' 'luozh', สารบัญ: '123', หมายเหตุ: 'bootpage'}, {num: 1, ผู้แต่ง: 'luozh', สารบัญ: '123', หมายเหตุ: 'bootpage'}, {num: 1, ผู้เขียน: 'bootpage'}], // ตารางข้อมูลดิบไม่จำเป็นต้องใช้ tablelist เมื่อใช้ข้อมูลเซิร์ฟเวอร์: [] // ข้อมูลหลังการส่งกลับโดยส่วนประกอบ pagination}}, ส่วนประกอบ: {bootpage}, เหตุการณ์: {// ข้อมูลตารางที่ส่งคืนโดยส่วนประกอบ pagination 'ข้อมูล' (ข้อมูล) {this.tablelistโดยทั่วไปเราไม่ค่อยใช้ข้อมูลตารางแบบคงที่และข้อมูลของแอปพลิเคชันส่วนใหญ่ได้มาจากฝั่งเซิร์ฟเวอร์ดังนั้นนี่คือวิธีการรับข้อมูลการปนเปื้อนเซิร์ฟเวอร์:
ส่วนประกอบ HTML ที่ใช้ข้อมูลเซิร์ฟเวอร์มีดังนี้:
<boot-page: async = "true": lens = "lenarr": url = "url": page-len = "pagelen": param = "param"> </boot-page>
โดยที่ URL คือที่อยู่คำขอของเซิร์ฟเวอร์ Param เป็นวัตถุพารามิเตอร์ที่ต้องส่งไปยังเซิร์ฟเวอร์
รหัสที่ใช้ JavaScript ข้อมูลเซิร์ฟเวอร์มีดังนี้:
<script> นำเข้า bootpage จาก './components/bootpage.vue' การส่งออกเริ่มต้น {data () {return {lenarr: [10, 50, 100], // แสดงความยาวต่อ pagelen: 5, // จำนวนหน้าเว็บที่สามารถแสดง URL: '/bootpage // ส่วนประกอบของการทำให้เป็นคนชอบเล่น}}, เมธอด: {refresh () {this. $ broadcast ('Refresh') // ฟังก์ชั่นรีเฟรชตารางมีให้ที่นี่}}, ส่วนประกอบ: {bootpage}, เหตุการณ์: {// ข้อมูลตารางที่ส่งคืนโดยส่วนประกอบ pagination (นี่คือข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์ 'หมายเหตุ: นอกเหนือจากเนื้อหาอาร์เรย์ที่ส่งผ่านไปยังตารางส่วนประกอบเซิร์ฟเวอร์ยังต้องการชื่อคีย์ของจำนวนหน้าทั้งหมดชื่อ page_num
(2) ซอร์สโค้ดส่วนประกอบ
สำหรับการใช้งานการปนเปื้อนซอร์สโค้ดที่นี่จะไม่ปรากฏขึ้น ฉันอัปโหลดซอร์สโค้ดทั้งหมดไปยัง GitHub ของฉันที่อยู่
ให้ฉันเตือนคุณล่วงหน้า: เพราะฉันใช้เวลาหลายชั่วโมงในการขับออกส่วนประกอบนี้ฉันต้องไม่เพียงพอในรูปแบบการเขียนและข้อมูลจำเพาะของส่วนประกอบ Vue และยังไม่ได้เป็นอิสระอย่างสมบูรณ์ดังนั้นฉันจึงเติมเต็มในหลุม ฉันจะแบ่งปันที่นี่เท่านั้น
แน่นอนคุณสามารถแก้ไขรหัสของส่วนประกอบได้ตามความต้องการของโครงการของคุณ ท้ายที่สุดมันค่อนข้างซับซ้อนที่จะใช้ส่วนประกอบการเพจขนาดใหญ่และสมบูรณ์
บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
สำหรับการสอนเกี่ยวกับส่วนประกอบ vue.js โปรดคลิกที่หัวข้อพิเศษ vue.js การสอนการเรียนรู้องค์ประกอบเพื่อเรียนรู้
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน