องค์ประกอบคืออะไร?
Component เป็นหนึ่งในคุณสมบัติที่ทรงพลังที่สุดของ Vue.js ส่วนประกอบสามารถขยายองค์ประกอบ HTML และห่อหุ้มรหัสที่นำกลับมาใช้ใหม่ได้ ในระดับที่สูงขึ้นส่วนประกอบเป็นองค์ประกอบที่กำหนดเองและคอมไพเลอร์ของ Vue.js จะเพิ่มคุณสมบัติพิเศษให้กับมัน ในบางกรณีส่วนประกอบยังสามารถอยู่ในรูปแบบขององค์ประกอบ HTML ดั้งเดิมซึ่งขยายออกไปด้วยคุณสมบัติ IS
ต่อไปฉันจะแนะนำความรู้พื้นฐานของ Vuejs การผูกทางเดียวการผูกสองทางการแสดงรายการและฟังก์ชั่นการตอบสนอง รายละเอียดเฉพาะมีดังนี้:
(i) การผูกทางเดียว
<div id = "app"> {{message}} </div> </script> vue ใหม่ ({el: '#App', ข้อมูล: {ข้อความ: 'hello vue.js!'}}) </script>①eควรหมายถึงการเชื่อมโยงการเชื่อมโยง ID = แท็กแอป
นอกจากนี้ยังสามารถเปลี่ยนเป็นสิ่งต่อไปนี้:
<div> {{message}} </div>El: '.App',
มีประสิทธิภาพเช่นเดียวกับ
แต่ถ้ามีหลายรายการมันจะใช้ได้เฉพาะกับอันแรก:
<div> {{message}} </div> <div> {{message}} </div> hello vue.js! {{message}}}②ตัวแปรข้อความในข้อมูลแสดงค่าของ {{ข้อความ}
(2) การผูกสองทาง
<div id = "app"> {{message}} <br/> <input v-model = "message"/> </div> <prist> <script> ใหม่ Vue ({el: '#App', ข้อมูล: {ข้อความ: 'hello vue.js!'}}) </script>ผลคือ:
①ค่าเริ่มต้นอยู่ในกล่องอินพุตและค่าคือค่าของแอตทริบิวต์ข้อความในข้อมูล
②การปรับเปลี่ยนค่าของกล่องอินพุตสามารถส่งผลกระทบต่อค่าภายนอก
(iii) ค่าการส่งคืนฟังก์ชัน
<div id = "app"> {{message ()}} <br/> <อินพุต v-model = "message ()"/> </div> <script> vue ใหม่ ({el: '#app', ข้อมูล: {message: function () {return 'hello vue.js!';}}})ผล:
①ค่าเอาต์พุตยังเป็นค่าส่งคืนของข้อความ;
②ข้อเสีย: การสูญเสียการผูกสองทาง!
(iv) รายการเรนเดอร์
<div id = "app"> <ul> <li v-for = "รายการใน todos"> {{list.text}} </li> </ul> </div> </div> <script> ใหม่ vue ({el: '#app', data: {todos: [text: "1st"}, {text: "รายการใน V-for นั้นคล้ายกับ I In For In
ส่วนตัว,
①รายการใน todos สามารถเข้าใจได้ว่าเป็นรายการใน todos
②จากนั้นเข้าใจรายการข้อความของบรรทัดถัดไปเป็น todos [list] .text
แล้วแท็ก V-for นี้จะถูกคัดลอกหลายครั้งในนั้น
(v) กระบวนการป้อนข้อมูลผู้ใช้
<div id = "app"> <input v-model = "message"> <input type = "ปุ่ม" value = "value +1" v-on: click = "เพิ่ม"/> <อินพุต type = "button" value = "value-1" v-on: click = "minus"/> {ข้อความ: 1}, วิธีการ: {เพิ่ม: function () {this.message ++;ผล:
①สำหรับค่าของกล่องอินพุตคลิกปุ่มเพิ่มหนึ่งครั้งและค่าจะเป็น +1;
②หากไม่สามารถเพิ่มได้ผลลัพธ์จะถูกส่งคืนเช่นถ้าการแสดงออกปกติถูกเพิ่มอย่างไม่ถูกต้องเช่น NAN;
③ค่าของข้อความในข้อมูลคือค่าเริ่มต้น;
④วิธีการเป็นคอลเลกชันของฟังก์ชั่นคั่นด้วยเครื่องหมายจุลภาค;
⑤เมื่อได้รับค่าเพิ่มสิ่งนี้ตัวอย่างเช่นนี้ข้อความจะได้รับค่าของข้อความ
(vi) มัลติฟังก์ชั่น
<div id = "app"> <อินพุต v-model = "val" v-on: keypress.enter = "addToList"> <ul> <li v-for = "val in value"> {{val.val}} <อินพุตประเภท = "button" delete "v-on: คลิก =" removelist ($ index) '#App', ข้อมูล: {val: "1", ค่า: []}, วิธีการ: {addtolist: function () {var val = parseint (this.val.trim ()); this.val = string (val + 1);ผล:
①ค่าในกล่องอินพุตเริ่มต้นคือ 1;
②กด Enter ในกล่องอินพุตเพื่อแปลงเนื้อหาของกล่องอินพุตเป็นตัวเลขและเพิ่มลงในรายการ หมายเลขที่แปลงแล้วและปุ่มลบในรายการและค่าในกล่องอินพุตจะถูกเปลี่ยนเป็นค่าที่แปลงเป็นตัวเลขและเพิ่มหนึ่ง
ดังที่แสดงในภาพ:
③การเพิ่มของเขาใช้การผูกสองทางกดค่าอินพุตไปยังอาร์เรย์ของค่าในข้อมูลจากนั้นใช้เอฟเฟกต์ของรายการเรนเดอร์เพื่อส่งออกหลายแถวของค่า
④ในแท็กปุ่มชื่อพารามิเตอร์ของฟังก์ชันจะได้รับพารามิเตอร์ซึ่งเป็นดัชนีของบรรทัดและชื่อพารามิเตอร์คือ $ index
⑤ในแท็กชื่อฟังก์ชั่นของฟังก์ชันทริกเกอร์สามารถเพิ่มด้วยวงเล็บหรือไม่มีวงเล็บ การวัดจริงดูเหมือนจะไม่มีผล
(7) แท็กและสรุป API (1)
① {{ชื่อตัวแปร}}
แสดงถึงตัวแปรที่ถูกผูกไว้นี่ ต้องใช้ชื่อตัวแปรเมื่อโทร
② V-model =” ตัวแปร”
ใช้การผูกสองทาง หากไม่มีการเพิ่มประเภทลงในอินพุตมันเป็นข้อความ หากเพิ่มประเภทมันเป็นประเภทตัวอย่างเช่น:
<อินพุต v-model = "วันที่" type = "วันที่"/> <li> {{วันที่}} </li>ค่าของกล่องอินพุตประเภทวันที่จะถูกผูกไว้พร้อมกับเนื้อหาที่แสดงโดยแท็ก LI
③ v-on: click =” ชื่อฟังก์ชัน”
ฟังก์ชั่นนี้จะถูกทริกเกอร์เมื่อคลิก () สามารถเพิ่มได้หรือไม่ $ ดัชนีใช้เป็นพารามิเตอร์เพื่อแสดงดัชนีและค่าดัชนีเริ่มต้นจาก 0
④ V-for
หลังจากอัปเดตเนื้อหาอาร์เรย์สองทางจะได้รับการอัปเดตแบบเรียลไทม์เช่นเดียวกับ V-model;
คล้ายกับสำหรับคำสั่งสำหรับในคำสั่งมันถูกใช้หลายครั้ง
⑤ v-on: เหตุการณ์
นั่นคือเหตุการณ์ที่ถูกทริกเกอร์มีคลิก (คลิก), คีย์นิด (คลิก)
เหตุการณ์สามารถตามด้วยสิ่งที่เฉพาะเจาะจงมากขึ้นเช่น keypress.enter คือการคืนค่าการขนส่ง keypress.space เป็นพื้นที่ ฯลฯ
ต้องดูมากขึ้น
⑥ใหม่ VUE
โดยอินสแตนซ์ใหม่ของ Vue จากนั้นส่งวัตถุเป็นพารามิเตอร์ไปยังอินสแตนซ์นี้
ใน:
EL หมายถึงเทมเพลตที่ถูกผูกไว้ (มันจะตรงกับขอบเขตแรกเท่านั้น)
ข้อมูลแสดงถึงข้อมูลซึ่งสามารถใช้โดยตรงตัวอย่างเช่นใน V-model หรือ {{ชื่อตัวแปร}}}
วิธีการ
⑦ตัวแปรโทรภายในฟังก์ชั่น
โดยชื่อนี้เป็นตัวอย่างเช่น:
ข้อมูล: {val: "1", ค่า: []}, วิธีการ: {addtolist: function () {console.log (this.val);นี่คือนี่คือ data.val ด้านบนซึ่งเป็น {{{val}} ใน html และยังเป็น v-model = "val" แต่ไม่ใช่
<li v-for = "val in value"> {{val.val}} <อินพุต type = "ปุ่ม" value = "ลบ" v-on: click = "removelist ($ index)"/> </li>ด้วยเหตุผลฉันคิดว่า Val ที่นี่อยู่ในขอบเขตของ V-for ดังนั้น Val in Val ในค่ามีลำดับความสำคัญสูงกว่าในห่วงโซ่ขอบเขต
ข้างต้นเป็นคำอธิบายโดยละเอียดเกี่ยวกับการสอนเบื้องต้นครั้งแรกของ Vuejs แนะนำให้คุณทราบโดยบรรณาธิการ (การผูกทางเดียวการผูกสองทางการแสดงผลรายการฟังก์ชั่นการตอบสนอง) ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!