Vue เป็นไลบรารี JavaScript ขนาดเล็กและมีน้ำหนักเบา มันมี API ที่ง่ายและเข้าใจง่ายซึ่งทำให้นักพัฒนาง่ายขึ้นและสะดวกขึ้นเมื่อพัฒนาเว็บแอปพลิเคชัน ในความเป็นจริงสิ่งที่ทำให้ Vue ภาคภูมิใจอยู่เสมอคือความสะดวกสบายการดำเนินการและความยืดหยุ่น
จุดประสงค์ของการสอนนี้คือการใช้ตัวอย่างบางส่วนเพื่อให้ภาพรวมของแนวคิดและคุณสมบัติพื้นฐานบางอย่างแก่คุณ ในบทช่วยสอนอื่น ๆ คุณจะได้เรียนรู้คุณสมบัติที่มีประโยชน์มากขึ้นของ Vue เพื่อสร้างโครงการที่ปรับขนาดได้ด้วย Vue
การเชื่อมโยงข้อมูล MVVM
สาระสำคัญของ MVVM คือการเชื่อมโยงมุมมองและโมเดลผ่านการเชื่อมโยงข้อมูลเพื่อให้การเปลี่ยนแปลงข้อมูลถูกแมปโดยอัตโนมัติเพื่อดูการอัปเดต Vue.js ยืมกลไกการเรียนการสอนของ Angular ในการออกแบบข้อมูล API ที่มีผลผูกพันข้อมูล: ผู้ใช้สามารถใช้การเชื่อมโยงข้อมูลผ่านแอตทริบิวต์ HTML พร้อมคำนำหน้าพิเศษหรือใช้การแก้ไขเทมเพลต Curly Crace Crace หรือใช้การผูกสองทางบนองค์ประกอบแบบฟอร์ม:
<!-directive-> <span v-text = "msg"> </span> <!-การแก้ไข-> <span> {{msg}} </span> <!การแก้ไขเป็นคำแนะนำเป็นหลักเพียงเพื่ออำนวยความสะดวกในการเขียนเทมเพลต ในระหว่างการรวบรวมเทมเพลต vue.js จะสร้างวัตถุคำสั่งสำหรับแต่ละโหนด DOM ที่ต้องการการอัปเดตแบบไดนามิก เมื่อใดก็ตามที่ข้อมูลที่สังเกตโดยวัตถุคำสั่งเปลี่ยนไปมันจะดำเนินการ DOM ที่สอดคล้องกันในโหนดเป้าหมายที่ถูกผูกไว้ การเชื่อมโยงข้อมูลตามคำสั่งช่วยให้การดำเนินการ DOM เฉพาะถูกห่อหุ้มอย่างสมเหตุสมผลในคำจำกัดความของคำสั่ง รหัสธุรกิจจะต้องเกี่ยวข้องกับเทมเพลตและการดำเนินงานในสถานะข้อมูลซึ่งช่วยปรับปรุงประสิทธิภาพการพัฒนาและการบำรุงรักษาของแอปพลิเคชันได้อย่างมาก
API ของ Vue.js 'ไม่ได้มีแนวคิดที่ซับซ้อนเช่นโมดูลคอนโทรลเลอร์ขอบเขตโรงงานบริการ ฯลฯ และทุกอย่างขึ้นอยู่กับ "อินสแตนซ์ ViewModel"::
<!-เทมเพลต-> <div id = "app"> {{msg}} </div> // วัตถุดั้งเดิมคือข้อมูล var data = {msg: 'สวัสดี!'} // สร้างอินสแตนซ์ ViewModel var vm = vue ใหม่ ({// เลือกองค์ประกอบเป้าหมาย EL: '#App'ผลการแสดงผล:
<div id = "แอป"> สวัสดี! </div>
ในขณะที่การเรนเดอร์ Vue.js ได้เสร็จสิ้นการเชื่อมโยงข้อมูลแบบไดนามิก: หากค่าของ data.msg มีการเปลี่ยนแปลง DOM จะได้รับการอัปเดตโดยอัตโนมัติ มันไม่ง่ายและเข้าใจง่ายมากเหรอ? นอกจากนี้ Vue.js ยังช่วยให้ API ของคำสั่งและตัวกรองแบบกำหนดเองง่ายขึ้นอย่างมาก หากคุณมีประสบการณ์การพัฒนาเชิงมุมคุณจะเริ่มต้นอย่างรวดเร็ว
การดำเนินการสังเกตข้อมูล
หลักการการนำไปปฏิบัติของการสังเกตข้อมูลของ Vue.js นั้นแตกต่างจากเชิงมุมเป็นหลัก ผู้อ่านที่รู้ว่า Angular อาจรู้ว่าการสังเกตข้อมูลของ Angular ใช้กลไกการตรวจสอบสกปรก แต่ละคำสั่งจะมีวัตถุที่เกี่ยวข้องที่ใช้ในการสังเกตข้อมูลที่เรียกว่าผู้เฝ้าดู จะมีผู้เฝ้าดูจำนวนมากในขอบเขต เมื่อใดก็ตามที่จำเป็นต้องได้รับการปรับปรุงอินเทอร์เฟซ Angular จะวนซ้ำผ่านผู้เฝ้าดูทุกคนในขอบเขตปัจจุบันประเมินทีละตัวแล้วเปรียบเทียบกับค่าเก่าที่บันทึกไว้ก่อน หากผลการประเมินเปลี่ยนแปลงการอัปเดตที่สอดคล้องกันจะถูกทริกเกอร์ กระบวนการนี้เรียกว่าวัฏจักร Digest มีสองปัญหาเกี่ยวกับการตรวจสอบสกปรก:
การเปลี่ยนแปลงข้อมูลใด ๆ หมายความว่าผู้เฝ้าดูทุกคนในขอบเขตปัจจุบันจะต้องได้รับการประเมินอีกครั้งดังนั้นเมื่อจำนวนผู้เฝ้าดูมีขนาดใหญ่มากประสิทธิภาพของแอปพลิเคชันจะได้รับผลกระทบอย่างหลีกเลี่ยงไม่ได้และเป็นการยากที่จะปรับให้เหมาะสม
เมื่อข้อมูลเปลี่ยนแปลงเฟรมเวิร์กไม่สามารถตรวจจับการเปลี่ยนแปลงที่เกิดขึ้นได้อย่างแข็งขัน จำเป็นต้องเรียกใช้รอบย่อยเพื่อเรียกการอัปเดต DOM ที่เกี่ยวข้องด้วยตนเอง Angular หลีกเลี่ยงปัญหานี้โดยการเรียกใช้ส่วนของวัฏจักรย่อยโดยอัตโนมัติในฟังก์ชั่นตัวจัดการเหตุการณ์ DOM แต่ยังมีหลายสถานการณ์ที่ทำให้ผู้ใช้ต้องเรียกใช้ด้วยตนเอง
Vue.js ใช้กลไกการสังเกตบนพื้นฐานของการรวบรวมการพึ่งพา โดยหลักการแล้วมันก็เหมือนกับเฟรมเวิร์ก MVVM เก่าที่น่าพิศวง หลักการพื้นฐานของการรวบรวมการพึ่งพาคือ:
แปลงข้อมูลดั้งเดิมเป็น "วัตถุที่สังเกตได้" วัตถุที่สังเกตได้สามารถมีมูลค่าหรือกำหนด
ในระหว่างกระบวนการประเมินผลของผู้เฝ้าดูวัตถุที่สังเกตได้แต่ละรายการที่ใช้จะลงทะเบียนผู้เฝ้าดูปัจจุบันเป็นสมาชิกและกลายเป็นผู้พึ่งพาของผู้เฝ้าดูปัจจุบัน
เมื่อมีการกำหนดวัตถุที่สังเกตได้ขึ้นอยู่กับผู้ใช้งานจะแจ้งให้สมาชิกทุกคนประเมินใหม่และทริกเกอร์การอัปเดตที่เกี่ยวข้อง
ข้อดีของการพึ่งพาการรวบรวมคือสามารถติดตามการเปลี่ยนแปลงข้อมูลได้อย่างถูกต้องและเชิงรุกและไม่มีปัญหาสองประการเกี่ยวกับการตรวจสอบสกปรกที่กล่าวถึงข้างต้น อย่างไรก็ตามการใช้งานการรวบรวมการพึ่งพาแบบดั้งเดิมเช่นที่น่าพิศวงมักจะต้องห่อข้อมูลดั้งเดิมเพื่อสร้างวัตถุที่สังเกตได้ พวกเขาจำเป็นต้องใช้การเรียกใช้ฟังก์ชันเมื่อรับค่าและการกำหนดค่า วิธีการเขียนนั้นยุ่งยากและไม่ใช้งานง่ายพอเมื่อดำเนินการข้อมูล ในเวลาเดียวกันการสนับสนุนวัตถุที่มีโครงสร้างซ้อนกันที่ซับซ้อนไม่เหมาะ
Vue.js ใช้วิธีการของ ES5 วิธีการ defineProperty ในการแปลงคุณสมบัติของวัตถุข้อมูลดั้งเดิมโดยตรงให้เป็น getters และ setters การใช้การรวบรวมการพึ่งพาและการเรียกใช้ภายในฟังก์ชั่นทั้งสองนี้และสนับสนุนโครงสร้างวัตถุซ้อนกันอย่างสมบูรณ์แบบ สำหรับอาร์เรย์การเปลี่ยนแปลงอาร์เรย์จะถูกฟังโดยวิธีการที่ไม่แน่นอนซึ่งห่อหุ้มอาร์เรย์เช่นการกด สิ่งนี้ทำให้แทบจะเป็นไปไม่ได้เลยที่จะใช้งานข้อมูล vue.js และใช้งานวัตถุดั้งเดิม [หมายเหตุ: เมื่อเพิ่ม/ลบแอตทริบิวต์หรือการปรับเปลี่ยนองค์ประกอบเฉพาะที่อาร์เรย์จะต้องมีการเรียกใช้ฟังก์ชั่นเฉพาะเช่น obj. $ เพิ่ม (คีย์, ค่า) เพื่อกระตุ้นการอัปเดต สิ่งนี้ถูก จำกัด ด้วยคุณสมบัติภาษาของ ES5 ] ตรรกะของการทำงานของข้อมูลมีความชัดเจนและราบรื่นขึ้นและการรวมเข้ากับโซลูชันการซิงโครไนซ์ข้อมูลของบุคคลที่สามก็สะดวกกว่าเช่นกัน
ระบบส่วนประกอบ
ในแอปพลิเคชันขนาดใหญ่สำหรับการแบ่งงานการใช้ซ้ำและการบำรุงรักษาเราจำเป็นต้องใช้นามธรรมแอปพลิเคชันเป็นโมดูลที่ค่อนข้างอิสระหลายอย่าง ในรูปแบบการพัฒนาแบบดั้งเดิมมากขึ้นเราจะเป็นส่วนหนึ่งของส่วนประกอบเมื่อพิจารณามัลติเพล็กซ์ แต่ในความเป็นจริง UI เหมือนแอปพลิเคชันสามารถถือได้ว่าประกอบด้วยต้นไม้ส่วนประกอบทั้งหมด:
ดังนั้นส่วนประกอบจึงถูกใช้เป็นแนวคิดหลักในการออกแบบ Vue.js. อาจกล่าวได้ว่าแอปพลิเคชัน Vue.js ทุกชิ้นได้รับการพัฒนารอบ ๆ ส่วนประกอบ
การลงทะเบียนส่วนประกอบ vue.js นั้นง่ายมาก:
vue.Component ('my-component', {// เทมเพลตเทมเพลต: '<div> {{msg}} {{privatemsg}} </div>', // ยอมรับพารามิเตอร์อุปกรณ์ประกอบ: {msg: สตริง <br>}, // ข้อมูลส่วนตัว 'ส่วนประกอบ!' } }})หลังจากการลงทะเบียนคุณสามารถเรียกองค์ประกอบลูกในเทมเพลตองค์ประกอบหลักเป็นองค์ประกอบที่กำหนดเอง:
<องค์ประกอบของฉัน msg = "hello"> </my-component>
ผลการแสดงผล:
<div> องค์ประกอบสวัสดี! </div>
ส่วนประกอบ vue.js สามารถเข้าใจได้ว่าเป็นคลาส ViewModel ที่มีพฤติกรรมที่กำหนดไว้ล่วงหน้า ส่วนประกอบสามารถกำหนดไว้ล่วงหน้าได้หลายตัวเลือก แต่ตัวเลือกที่สำคัญที่สุดมีดังต่อไปนี้:
รูปแบบส่วนประกอบไฟล์เดียวตามเครื่องมือสร้าง
ไลบรารีหลักของ Vue.js ให้เฉพาะ API พื้นฐานและไม่มีข้อ จำกัด มากเกินไปเกี่ยวกับวิธีการจัดระเบียบโครงสร้างไฟล์ของแอปพลิเคชัน อย่างไรก็ตามเมื่อสร้างแอพพลิเคชั่นขนาดใหญ่ขอแนะนำให้ใช้การรวมกันของ WebPack + Vue-Loader เพื่อให้การพัฒนาส่วนประกอบมีประสิทธิภาพมากขึ้น
WebPack เป็นเครื่องมือสร้างโมดูลโอเพนซอร์สที่พัฒนาโดย Tobias Koppers ฟังก์ชั่นพื้นฐานของมันคือการบรรจุไฟล์ JavaScript หลายไฟล์ที่เขียนในรูปแบบโมดูลลงในไฟล์เดียวและรองรับทั้งรูปแบบ CommonJS และ AMD แต่สิ่งที่ทำให้มันไม่เหมือนใครคือมันให้ API ตัวโหลดที่ทรงพลังในการกำหนดตรรกะการประมวลผลล่วงหน้าสำหรับรูปแบบไฟล์ที่แตกต่างกันทำให้เราสามารถใช้ CSS เทมเพลตและแม้แต่รูปแบบไฟล์ที่กำหนดเองเป็นโมดูล JavaScript WebPack ยังสามารถใช้ฟังก์ชั่นขั้นสูงจำนวนมากตามโหลดเดอร์เช่นบรรจุภัณฑ์แบบ chunking อัตโนมัติและการโหลดตามความต้องการการวางตำแหน่งโดยอัตโนมัติของการอ้างอิงทรัพยากรภาพการตัดสินใจเกี่ยวกับ Base64 อินไลน์ตามขนาดภาพการเปลี่ยนโมดูลร้อนในระหว่างการพัฒนา ฯลฯ
ฉันพัฒนาปลั๊กอิน Vue-Loader ตาม Webpack Loader API เพื่อให้เราสามารถเขียนส่วนประกอบ Vue ในรูปแบบไฟล์เดียว (*.vue):
<style> .my-Component H2 {color: red;} </style> <mymplate> <div> <h2> สวัสดีจาก {{msg}} </h2> <คนอื่น ๆ-องค์ประกอบ> </องค์ประกอบอื่น ๆ > </div> </template> {data: function () {return {msg: 'vue-loader'}}, ส่วนประกอบ: {'อื่น ๆ-องค์ประกอบ': othercomponent}} </script>ในเวลาเดียวกันคุณยังสามารถใช้ตัวประมวลผลล่วงหน้าอื่น ๆ ในไฟล์ *.Vue เพียงติดตั้ง webpack loader ที่เกี่ยวข้อง:
<style lang = "stylus">. องค์ประกอบของฉัน h2 สีแดง </style> <เทมเพลต lang = "jade"> div.my-component h2 สวัสดีจาก {{msg}} </template> <script lang = "babel"> // ใช้ babel }}} </script>รูปแบบส่วนประกอบดังกล่าวรวมองค์ประกอบสามองค์ประกอบของเทมเพลตสไตล์และตรรกะของส่วนประกอบเข้ากับไฟล์เดียวกันซึ่งสะดวกสำหรับการพัฒนานำกลับมาใช้ใหม่และบำรุงรักษา นอกจากนี้ Vue.js ยังสนับสนุนการโหลดส่วนประกอบแบบอะซิงโครนัสและรวมกับฟังก์ชั่นบรรจุภัณฑ์ chunking ของ Webpack มันสามารถใช้การโหลดแบบอะซิงโครนัสของส่วนประกอบตามความต้องการได้อย่างง่ายดาย
คุณสมบัติอื่น ๆ
vue.js มีคุณสมบัติอื่น ๆ อีกมากมายที่ควรค่าแก่การกล่าวถึง:
สร้างอินสแตนซ์ VUE โดยใช้ VUE ใหม่ ()
เราสามารถเริ่มต้นหน้า HTML ก่อนจากนั้นเราต้องแนะนำไฟล์ JS ของ Vue มีหลายวิธีในการแนะนำ เราสามารถแนะนำ cdn ของ Vue ในสคริปต์หรือดาวน์โหลด vue min.js บนเว็บไซต์อย่างเป็นทางการหรือติดตั้งการพึ่งพา Vue โดยใช้ NPM เพื่อความสะดวกบทความนี้มีการแนะนำโดยใช้ CDN
<! doctype html> <html> <head> <title> เรียนรู้จากรอยขีดข่วน </title> </head> <body> <script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"
เมื่อคุณกำลังพัฒนาตรวจสอบให้แน่ใจว่าคุณใช้เวอร์ชันที่ไม่ได้บีบอัดเนื่องจากเวอร์ชันที่ไม่ได้บีบอัดจะให้คำเตือนโดยละเอียดที่เป็นประโยชน์และจะช่วยให้คุณประหยัดเวลาในการเขียนโค้ดได้มาก
ก่อนอื่นเราเขียน div ในร่างกายสร้างอินสแตนซ์ Vue จากนั้นผูกอินสแตนซ์และ div
เมื่อคุณสร้างอินสแตนซ์ VUE ใหม่ให้ใช้ตัวสร้าง Vue () และชี้ให้เห็นจุดเมานต์ของคุณในอินสแตนซ์ของคุณ จุดเมานต์นี้เป็นขอบเขตของอินสแตนซ์ VUE ที่คุณต้องการแบ่ง จุดเมานต์และขอบเขตอินสแตนซ์สอดคล้องกันโดยหนึ่ง คุณสามารถจัดการธุรกรรมภายในขอบเขตอินสแตนซ์ที่จุดเมานต์ แต่ไม่ใช่ธุรกรรมนอกขอบเขตอินสแตนซ์ที่จุดเมานต์ของคุณ
พารามิเตอร์สำหรับการตั้งค่าจุดเมานต์ในอินสแตนซ์ VUE คือ "EL" และค่าของ EL สามารถกำหนดได้โดยองค์ประกอบ DOM
<! doctype html> <html> <head> <title> เรียนรู้จากรอยขีดข่วน </title> </head> <body> <div id = "VueInstance"> นี่คือขอบเขตอินสแตนซ์ของจุดเมาท์อินสแตนซ์ </div> <script src = "http://cdn.jsdelivr.net/vue/ สร้างอินสแตนซ์ VUE ใหม่และตั้งค่าจุดเมานต์ var v = new vue ({el: '#VueInstance'}); </script> </body> </html>อย่างที่คุณเห็นด้านบนใหม่ Vue () สร้างอินสแตนซ์ใหม่จากนั้นระบุองค์ประกอบ DOM เป็นจุดเมานต์ของอินสแตนซ์ เมื่อกำหนดจุดเมานต์เราใช้ ID ของตัวเลือก CSS เพื่อกำหนด ชื่ออินสแตนซ์สามารถกำหนดด้วยตัวเองสำหรับการโทรในภายหลัง
การใช้ V-model สำหรับการเชื่อมข้อมูลแบบสองทิศทาง
เราสามารถใช้ V-model เพื่อผูกกล่องอินพุตดังนั้นเราสามารถใช้แบบไดนามิกเพื่อรับค่าของวัตถุข้อมูล คุณสามารถนึกถึง V-Model เป็นคุณสมบัติที่ระบุเช่นเดียวกับแอตทริบิวต์ขององค์ประกอบ HTML การเชื่อมโยงข้อมูลสองทางที่นี่สามารถใช้กับองค์ประกอบหลายรูปแบบเช่นอินพุต, textarea และเลือก
Vue ใช้คำสั่ง v-model เพื่อผูกข้อมูลและข้อมูลนี้เป็นข้อมูลที่เราหวังว่าจะได้รับการปรับปรุงผ่านการดำเนินการป้อนข้อมูลของผู้ใช้
ตัวอย่างเช่นในตัวอย่างของเราด้านล่างเราต้องการผูกชื่อข้อมูลบนแท็กอินพุตและเราจำเป็นต้องใช้การประกาศในวัตถุข้อมูลในอินสแตนซ์ VUE
<div id = "vueinstance"> ป้อนชื่อของคุณ: <อินพุต type = "text" v-model = "name"> </div>
<script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </script> // หลังจากบรรทัดนี้จะถูกละเว้น <script> var v = new vue ({el: '#VueInstance', ข้อมูล: 'ชื่อ:'ไม่ว่าผู้ใช้จะเข้ามากี่ครั้งชื่อนี้จะได้รับการอัปเดตโดยอัตโนมัติ นอกจากนี้หากมีการเปลี่ยนค่าชื่อค่าในสถานที่อื่น ๆ ที่มีการแมปชื่อจะถูกแก้ไข
เหตุผลในการปรับเปลี่ยนซิงโครนัสของกล่องอินพุตและการแมปนี้คือการใช้คำสั่ง V-model เพื่อให้ข้อมูลถูกผูกไว้ผ่านสตรีมข้อมูลพื้นฐานแล้วแก้ไขโดยตรง นี่คือแนวคิดของการเชื่อมโยงสองทาง
เพื่อพิสูจน์แนวคิดนี้เราสามารถใช้ $ data เพื่อพิมพ์การแมปข้อมูลเพื่อดู
<div id = "vueInstance"> ป้อนชื่อของคุณ: <อินพุต type = "text" v-model = "name"> <p> {{$ data | json}} </p> //#1 <p> {{name}} </p> //#2 </div> <script> var v = new vue ({el: '#VueInstance', ข้อมูล: {ชื่อ: '_appian'}})); </prist Script>มันคือ 1:
$ data เป็นวัตถุข้อมูลที่สังเกตได้จากอินสแตนซ์ VUE ประเภทที่สำคัญคือวัตถุดังนั้นจึงสามารถแปลงเป็น JSON ได้ สามารถแทนที่ด้วยวัตถุใหม่ พร็อกซีอินสแตนซ์คุณสมบัติของวัตถุข้อมูล
{{}}, แทรกกับวงเล็บปีกกาสองอัน ค่าที่แทรกที่นี่คือค่าที่เปลี่ยนแปลงในเวลาจริงโดย $ data
- JSON เป็นวิธีที่ใช้งานง่ายกว่าในการแสดงข้อมูล นอกจากนี้ยังสามารถถือได้ว่าเป็นตัวกรองเช่นเดียวกับผลกระทบของ json.stringify ()
รายการที่ 2:
{{ชื่อ}} หมายถึงการใส่ตัวแปรข้อมูลโดยตรงในนิพจน์การแก้ไขและการจัดฟันสองอันเพื่อแมปค่าของชื่อโดยตรง
Vue นั้นง่ายมากที่จะทำการเชื่อมโยงสองทาง ต้องใช้คำสั่ง V-model โดยไม่ต้องใช้ JS หรือ JQ เพื่อควบคุมข้อมูล ฉันเชื่อว่าคุณสามารถชี้แจงตรรกะจากตัวอย่างข้างต้น
ใช้ v-on สำหรับการผูกกิจกรรม
VUE ใช้คำแนะนำ V-ON สำหรับการฟังกิจกรรมและการกระจายเหตุการณ์ คุณสามารถสร้างวิธีการเชื่อมโยงเหตุการณ์การฟังในอินสแตนซ์ VUE และคุณสามารถสร้างวิธีการส่งเหตุการณ์คลิก
ในตัวอย่างต่อไปนี้เราจะสร้างวิธีการพูดซึ่งถูกผูกไว้กับปุ่ม ผลของการคลิกคือการปรากฏกล่องต้อนรับด้วยชื่อผู้ใช้ ในการกำหนดวิธีนี้ให้กับปุ่มเราจำเป็นต้องใช้ V-ON: คลิกเพื่อผูกกิจกรรม
<div id = "vueInstance"> ป้อนชื่อของคุณ: <อินพุต type = "text" v-model = "name"> <ปุ่ม v-on: click = "say"> ยินดีต้อนรับสู่คลิก </pution> //#1 <button @click = "Say"> ยินดีต้อนรับสู่คลิก </putton> //#2 </div>
<script> var v = new vue ({el: '#vueinstance', ข้อมูล: {ชื่อ: '_appian'}, วิธีการ: {พูด: function () {Alert ('ยินดีต้อนรับ' + this.name);}}}); </script>แน่นอนไม่เพียง แต่คุณสามารถผูกคลิกเหตุการณ์คลิกได้ แต่คุณยังสามารถผูกกิจกรรมเมาส์อื่น ๆ เหตุการณ์อินพุตแป้นพิมพ์และประเภทเหตุการณ์ JS อื่น ๆ ตัวอย่างเช่น V-ON: MouseOver, V-ON: Keydown, V-ON: ส่ง, V-ON: KeyPress, V-ON: KEYUP.13, ฯลฯ หรือเหตุการณ์ที่กำหนดเองอื่น ๆ
ในระหว่างกระบวนการพัฒนาคุณอาจใช้การเชื่อมโยงเหตุการณ์บ่อยครั้ง มันค่อนข้างลำบากในการเขียน v-on ดังนั้นในตัวอย่างข้างต้นมีสองวิธีในการเขียน #2 คือตัวย่อของ #1 การใช้ @ แทน V-on ฉันจะไม่พูดมากที่นี่
ใช้ V-IF หรือ V-show เพื่อทำการตัดสินตามเงื่อนไข
หากเราต้องการให้ผู้ใช้ดูหน้าต่างป๊อปอัพต้อนรับหลังจากเข้าสู่ระบบและหากเราไม่ได้ลงชื่อเข้าใช้เราจะให้อินเทอร์เฟซเข้าสู่ระบบ Vue จะให้คำแนะนำ V-IF และ V-show เพื่อควบคุมเนื้อหาการแสดงผลภายใต้สถานะการเข้าสู่ระบบที่แตกต่างกัน
การใช้ตัวอย่างก่อนหน้านี้เราสามารถใช้ค่าของ LoginStatus เพื่อควบคุมว่าจะเข้าสู่ระบบหรือไม่หากเป็นจริงกล่องอินพุตและปุ่มจะปรากฏขึ้นเพื่อให้สามารถเห็นหน้าต่างป๊อปอัพต้อนรับ อย่างไรก็ตามหากเป็นเท็จ (นั่นคือมันไม่ได้เข้าสู่ระบบ) คุณจะเห็นเฉพาะช่องอินพุตและปุ่มส่งสำหรับการป้อนหมายเลขบัญชีรหัสผ่าน (ไม่มีการตรวจสอบสิทธิ์ในเวลานั้นเฉพาะสถานะการเข้าสู่ระบบเท่านั้นที่จะเปลี่ยน)
<div id = "vueInstance"> // ส่วนที่แสดงเมื่อ loginStatus เป็นจริง <ส่วน v-if = "loginstatus"> ป้อนชื่อของคุณ: <อินพุต type = "ข้อความ" v-model = "ชื่อ"> <ปุ่ม v-on: คลิก = "พูด"> ยินดีต้อนรับ เมื่อเข้าสู่ระบบเป็นเท็จ <ส่วน v-if = "! loginStatus"> loginperson: <อินพุต type = "text"> loginassword: <อินพุต type = "รหัสผ่าน"> <button @click = "switchloginstatus"> เข้าสู่ระบบ
<script> var v = new vue ({el: '#VueInstance', ข้อมูล: {ชื่อ: '_appian', loginStatus: false}, วิธีการ: {say: function () {Alert (ยินดีต้อนรับ ' + this.name);}, switchloginstatus: function ()การดำเนินการของสิ่งนี้คืออินสแตนซ์ V. การชี้นี้เป็นคำถามที่ต้องเข้าใจด้วยตัวเองดังนั้นฉันจะไม่พูดถึงที่นี่
ในตัวอย่างข้างต้นตราบใดที่ V-IF ถูกแทนที่ด้วย V-show สามารถรับเอฟเฟกต์เดียวกันได้ ทั้ง V-IF และ V-Show รองรับ V-Else แต่องค์ประกอบพี่น้องก่อนหน้าของแท็กที่ผูกคำสั่ง V-Else ต้องมี V-IF หรือ V-show
ในตัวอย่างข้างต้นเพียงคลิกปุ่ม "เข้าสู่ระบบ" หรือ "เข้าสู่ระบบ" จะทริกเกอร์วิธี switchloginstatus ตราบใดที่วิธีนี้ถูกเรียกใช้สถานะของการเข้าสู่ระบบจะเปลี่ยน (การสลับเป็นจริงและเท็จ) ดังนั้นจึงเปลี่ยนการเปลี่ยนแปลงเงื่อนไขการตัดสินผลของ V-IF ใน HTML ขึ้นอยู่กับสถานะบูลีนปัจจุบันของ LoginStatus ส่วนที่แสดงเป็นส่วนในสถานะที่แตกต่างกัน
ความแตกต่างระหว่าง V-show และ V-IF คืออะไร?
เมื่อสลับบล็อก V-IF VUE จะมีกระบวนการรวบรวม/ถอนการติดตั้งในท้องถิ่นเนื่องจากเทมเพลตใน V-IF อาจรวมถึงการเชื่อมโยงข้อมูลหรือส่วนประกอบย่อย V-IF เป็นการเรนเดอร์ตามเงื่อนไขที่แท้จริงเพราะช่วยให้มั่นใจได้ว่าบล็อกเงื่อนไขจะทำลายและสร้างผู้ฟังเหตุการณ์และส่วนประกอบย่อยภายในบล็อกเงื่อนไขระหว่างสวิตช์ได้อย่างเหมาะสม
V -IF ก็ขี้เกียจด้วย: หากเงื่อนไขเป็นเท็จในระหว่างการเรนเดอร์เริ่มต้นไม่มีอะไรทำ - การรวบรวมท้องถิ่นเริ่มต้นเมื่อเงื่อนไขกลายเป็นจริงเป็นครั้งแรก (การรวบรวมจะถูกแคช)
ในทางตรงกันข้าม V -show นั้นง่ายกว่ามาก - องค์ประกอบจะถูกรวบรวมและเก็บรักษาไว้เสมอเพียงแค่สลับไปตาม CSS
โดยทั่วไปแล้ว V-IF มีการใช้การสลับที่สูงขึ้นและ V-show มีการใช้การแสดงผลเริ่มต้นที่สูงขึ้น ดังนั้นจึงเป็นการดีกว่าที่จะสลับ V-show บ่อยครั้งและจะเป็นการดีกว่าที่จะเปลี่ยน V-ถ้าเงื่อนไขไม่สูงมากในเวลารันไทม์
ความแตกต่างนี้อาจไม่สำคัญต่อการพัฒนาปัจจุบันของคุณ แต่คุณยังต้องให้ความสนใจและให้ความสนใจเพราะเมื่อการพัฒนาโครงการของคุณมีขนาดใหญ่ขึ้นสิ่งนี้จะกลายเป็นสิ่งสำคัญ
ใช้ V-for to output list
หากคุณเป็นนักธุรกิจที่ใช้แพลตฟอร์มอีคอมเมิร์ซคุณต้องมีหลายหน้าที่ต้องแสดงผลของรายการผลิตภัณฑ์ คำสั่ง V-for ช่วยให้วนวนวัตถุอาร์เรย์ของเราออกเสียงว่า "วนรอบองค์ประกอบทุกอย่างใน Arrayobj" ในทางของ "องค์ประกอบใน Arrayobj"
ในตัวอย่างต่อไปนี้เราจะใช้คำสั่ง V-for เพื่อวนรายการผลิตภัณฑ์ แต่ละผลิตภัณฑ์จะอยู่ใน LI ซึ่งชื่อราคาและประเภทผลิตภัณฑ์ของผลิตภัณฑ์จะถูกส่งออก
<div id = "vueinstance"> <ul> <li v -for = "el ในผลิตภัณฑ์"> {{el.name}} - ￥ {{el ราคา}} - {{el หมวดหมู่}} </li></ul> </div> <script> var v = new vue ({el: '#VueInstance', ข้อมูล: {ผลิตภัณฑ์: [{ชื่อ: 'ไมโครโฟน', ราคา: 25, หมวดหมู่: 'อิเล็กทรอนิกส์'}, {ชื่อ: 'เคสแล็ปท็อป', ราคา: 15, หมวดหมู่: 'อุปกรณ์เสริม' 70, หมวดหมู่: 'อิเล็กทรอนิกส์'}, {ชื่อ: 'เมาส์', ราคา: 40, หมวดหมู่: 'อิเล็กทรอนิกส์'}, {ชื่อ: 'หูฟัง', ราคา: 20, หมวดหมู่: 'อิเล็กทรอนิกส์'}, {ชื่อ: 'จอภาพ', ราคา: 120, หมวดหมู่:แน่นอนวัตถุอาร์เรย์ในข้อมูลสามารถกำหนดได้โดยไม่ต้องมีคำจำกัดความข้างต้น เราสามารถนำเข้าจากฐานข้อมูลหรือใช้คำขอ AJAX เพื่อรับ นี่เป็นเพียงการสาธิต V-For
บางครั้งเราอาจต้องได้รับตัวห้อยที่สอดคล้องกันของผลิตภัณฑ์ในวัตถุอาร์เรย์ เราสามารถรับได้ด้วย $ ดัชนี
//#1 <li v -for = "el ในผลิตภัณฑ์"> {{$ index}} - {{el.name}} - ￥ {{el ราคา}} - {{el หมวดหมู่}} </li> //#2 <li v -for = "(index, el) ในผลิตภัณฑ์"> {{index}} - {{el.name}} - ￥ {{el ราคา}} - {{el หมวดหมู่}} </li>คุณสมบัติที่คำนวณได้
ในสถานการณ์แอปพลิเคชันของแอตทริบิวต์การคำนวณมันจะถูกใช้เมื่อมีค่าตัวแปรที่ต้องคำนวณโดยตัวแปรอื่น ๆ
ตัวอย่างเช่นหากผู้ใช้ป้อนหมายเลข X ในกล่องอินพุตมันจะกลับไปที่ผู้ใช้ Square X²ของหมายเลขโดยอัตโนมัติ คุณต้องผูกข้อมูลกล่องอินพุตจากนั้นเมื่อมีการแก้ไขข้อมูลมันจะคำนวณสี่เหลี่ยมจัตุรัสทันที
<div id = "vueInstance"> ป้อนหมายเลข: <อินพุต type = "text text" v-model = "value"> <p> ผลการคำนวณ: {{square}} </p> </div> <script> var v = new vue ({el: '#vueinstance', ข้อมูล: {value: 1}, คำนวณ: {square: function () {return this.value * this.value;}}}); </script>คำนวณค่านิยามแอตทริบิวต์โดยการกำหนดชุดของฟังก์ชั่นเช่นเดียวกับเมื่อเรากำหนดวิธีการวัตถุก่อน ตัวอย่างเช่นวิธีการสี่เหลี่ยมที่ใช้ในการคำนวณตัวแปร "สแควร์" และค่าการส่งคืนของวิธีการของมันคือผลิตภัณฑ์ของสองสิ่งนี้ค่า
ต่อไปเราสามารถใช้คำนวณเพื่อสร้างตัวอย่างที่ซับซ้อนมากขึ้น ระบบจะสุ่มใช้ตัวเลขภายใน 1 ~ 10 ผู้ใช้สามารถสุ่มป้อนหมายเลขภายใน 1 ~ 10 ในกล่องอินพุต หากอินพุตของผู้ใช้เกิดขึ้นตรงกับหมายเลขสุ่มของระบบเกมจะประสบความสำเร็จไม่เช่นนั้นจะล้มเหลว
<div id = "vueinstance"> ป้อนหมายเลขภายใน 1 ~ 10: <อินพุต type = "text" v-model = "value"> <p> ผลการคำนวณ: {{{resultmsg}} </p> </div> <script> var v = new vue ({el: '#VueInstance', ข้อมูล: {value: null, randnum: 5 // หมายเลขสุ่มแรกคือ 5}, วิธีการ: {getRandnum: ฟังก์ชัน (min, max) {return math.floor (math.random () (this.value == this.randnum) {this.randnum = this.getrandnum (1, 10);postscript
จนถึงตอนนี้คุณสามารถฝึกฝนการใช้ Vue ขั้นพื้นฐานซึ่งเป็นหนึ่งในกรอบการทำงานที่ง่ายและสวยที่สุดในโลก การก่อสร้างมีแนวคิดการออกแบบที่สมบูรณ์ของตัวเองและได้รับความนิยมมากขึ้นเรื่อย ๆ เฟรมเวิร์กนี้มีขนาดเล็กและเบาพอที่จะนำประสบการณ์ผู้ใช้ที่ราบรื่นขึ้นในการพัฒนาของคุณและปรับปรุงประสิทธิภาพการพัฒนาได้อย่างมีประสิทธิภาพ ฉันได้ให้ตัวอย่างชุดข้างต้นคุณเชี่ยวชาญพวกเขาทั้งหมดหรือไม่?