ในฐานะผู้ใช้ที่ภักดีของ vue.js ฉันคิดว่าจำเป็นต้องเขียนบทความบางอย่างเพื่อชมภาษาที่สวยงามนี้ การประเมินโดยรวมของฉันคือ "เรียบง่าย แต่สง่างามเล็ก แต่ไม่ขาดคนที่มีความสามารถ" ต่อไปนี้จะแนะนำ vue.js ให้คุณรอบ ๆ ประโยคนี้โดยหวังว่าจะกระตุ้นความสนใจของคุณใน Vue.js.
รู้เบื้องต้นเกี่ยวกับ vue.js
ผู้แต่ง Vue.js คือ Evan You (You Yuxi) ที่ทำงานที่ Google Creative Lab แม้ว่า Vue จะเป็นโครงการส่วนบุคคล แต่โดยส่วนตัวแล้วฉันเชื่อว่ามันไม่ได้ด้อยกว่า AngularJs ของ Google ในแง่ของโอกาสในการพัฒนา ฉันจะทำการเปรียบเทียบง่ายๆกับ Vue (Angular 1.0+ เวอร์ชัน)
คุณสมบัติหลักของ VUE ได้รับการแนะนำในเว็บไซต์ทางการ (http://cn.vuejs.org/):
(1) รัดกุม (2) น้ำหนักเบา (3) ไดรเวอร์ข้อมูล (4) ข้อมูล (5) ส่วนประกอบที่เป็นมิตรกับโมดูล (6)
เรียบง่าย
นี่คือรหัสของ 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 นั้นกระชับและเข้าใจง่ายกว่า
ไม่ได้ไม่มีความสง่างาม
แม้ว่า 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) ตัวดัดแปลงที่สะดวก
<!-ป้องกันการคลิกเหตุการณ์จากฟอง->
<a @click.stop = "dosomething"> </a>
<!-เหตุการณ์จะถูกทริกเกอร์เฉพาะเมื่อกดปุ่ม ENTER->
<อินพุต @keyup.enter = "ส่ง">
(4) ลักษณะพารามิเตอร์การปฏิบัติ
<!-debounce ตั้งค่าความล่าช้าขั้นต่ำ->
<อินพุต v-model = "note" debounce = "500">
<!-อัปเดตข้อมูลใน "เปลี่ยน" แทนเหตุการณ์ "อินพุต"->
<อินพุต v-model = "msg" ขี้เกียจ>
แล้วมันจะรู้สึกสง่างามมากหรือไม่?
เล็ก
เมื่อพูดถึงความเล็กเราควรให้ความสนใจกับขนาดซอร์สโค้ดของ Vue ก่อน ซอร์สโค้ดของเวอร์ชันการผลิตของ Vue (เช่นรุ่นขั้นต่ำ) มีเพียง 72.9KB เว็บไซต์อย่างเป็นทางการบอกว่า GZIP มีเพียง 25.11KB หลังจากการบีบอัดซึ่งเล็กกว่า 144KB ของ Angular ครึ่งหนึ่ง
ข้อดีอย่างหนึ่งของความกะทัดรัดคือช่วยให้ผู้ใช้สามารถเลือกโซลูชันที่สอดคล้องกันได้อย่างอิสระมากขึ้นและช่วยให้ผู้ใช้มีพื้นที่มากขึ้นในแง่ของการจับคู่ไลบรารีอื่น ๆ
ตัวอย่างเช่นแกนกลางของ VUE ไม่รวมถึงการกำหนดเส้นทางและฟังก์ชั่น AJAX โดยค่าเริ่มต้น แต่ถ้าคุณต้องการการกำหนดเส้นทางและ AJAX ในโครงการของคุณคุณสามารถใช้ Vue-Router อย่างเป็นทางการและปลั๊กอิน Vue-Resource ของบุคคลที่สามที่จัดทำโดย Vue ในเวลาเดียวกันคุณสามารถใช้ไลบรารีหรือปลั๊กอินอื่น ๆ ที่คุณต้องการใช้เช่น Ajax ของ JQuery ฯลฯ
มันไม่ได้ยืดหยุ่นมากเหรอ?
มีอาจารย์ที่ยอดเยี่ยมมากมาย
แม้ว่า Vue จะมีขนาดเล็ก แต่ก็เป็น "นกกระจอกมีขนาดเล็กและมีอวัยวะภายในทั้งหมด" และมันก็ง่ายต่อการสร้างแอพพลิเคชั่นขนาดใหญ่
(1) โมดูลาร์
เมื่อรวมกับเครื่องมือสร้างโมดูลของบุคคลที่สามเช่น CommonJS, RequireJS หรือ SEAJS, Code Modularity สามารถทำได้อย่างง่ายดาย
อย่างไรก็ตามที่นี่ฉันไม่แนะนำให้ใช้เครื่องมือการก่อสร้างที่กล่าวถึงข้างต้น ปัจจุบันเป็นโซลูชันที่ได้รับความนิยมมากที่สุดในการใช้ฟังก์ชั่นโมดูลาร์ของ ES6 โดยตรงจากนั้นจัดทำแพ็คเกจตาม WebPack
หากคุณไม่เข้าใจฟังก์ชั่นของโมดูล ES6 โปรดดูที่: http://es6.ruanyifeng.com/#docs/module
ในบทความในอนาคตฉันจะแนะนำมันรวมถึงการกำหนดค่าของ WebPack
(2) ส่วนประกอบ
ฟังก์ชั่นส่วนประกอบของ Vue เป็นไฮไลต์ของมัน ด้วยการใส่รหัส HTML, CSS และ JS ของส่วนประกอบบนหน้าลงในไฟล์. vue สำหรับการจัดการการบำรุงรักษารหัสสามารถปรับปรุงได้อย่างมาก
ตัวอย่างเช่น:
// app.vue<memplate> <div v-text = "note"> </div> </template> <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'], แก้ไข)}}})}หากต้องการดูการกำหนดค่าการกำหนดเส้นทางที่เฉพาะ
สรุป
โดยส่วนตัวแล้วฉันเชื่อว่าเทคโนโลยีส่วนหน้าบางส่วนถูกรวมเข้าด้วยกัน การเรียนรู้ภาษาหรือกรอบเองนั้นไม่ได้เรียนรู้เทคโนโลยี สิ่งที่สำคัญที่สุดคือการเรียนรู้ความคิด มีเพียงระดับการคิดที่ขยายออกไปและคุณจะพบว่าง่ายต่อการเรียนรู้เทคโนโลยีอื่น ๆ สิ่งที่ Vue นำมาให้เราคือความคิดใหม่เกี่ยวกับส่วนหน้าเพื่อแก้ปัญหา
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น