เทมเพลตของ vue.js ถูกนำไปใช้ตาม DOM ซึ่งหมายความว่าเทมเพลต vue.js ทั้งหมดสามารถแยกได้และ HTML ที่ถูกต้องและได้รับการปรับปรุงโดยคุณสมบัติพิเศษบางอย่าง เทมเพลต Vue จึงแตกต่างจากเทมเพลตที่ใช้สตริงโดยคำนึงถึงสิ่งนี้
การแก้ไข
ข้อความ
รูปแบบพื้นฐานที่สุดของการเชื่อมโยงข้อมูลคือการแก้ไขข้อความโดยใช้ไวยากรณ์ "หนวด" (การจัดฟันสองครั้ง):
<span> ข้อความ: {{msg}} </span>
แท็กหนวดจะถูกแทนที่ด้วยค่าของแอตทริบิวต์ MSG ของวัตถุข้อมูลที่เกี่ยวข้อง มันจะได้รับการอัปเดตเมื่อใดก็ตามที่คุณสมบัตินี้เปลี่ยนแปลง
นอกจากนี้คุณยังสามารถประมวลผลการแก้ไขเพียงครั้งเดียวและการเปลี่ยนแปลงข้อมูลในอนาคตจะไม่ทำให้เกิดการอัพเดตการแก้ไขอีกต่อไป:
<span> สิ่งนี้จะไม่เปลี่ยนแปลง: {{* msg}} </span>
HTML ดั้งเดิม
แท็กหนวดคู่แยกวิเคราะห์ข้อมูลลงในข้อความธรรมดาแทน HTML ในการส่งออกสตริง HTML จริงคุณต้องใช้แท็กหนวดสามแท็ก:
<div> {{{raw_html}}} </div>
เนื้อหาจะถูกแทรกเป็นสตริง HTML - การเชื่อมโยงข้อมูลจะถูกละเว้น หากคุณต้องการนำชิ้นส่วนเทมเพลตกลับมาใช้ใหม่ควรใช้บางส่วน
มันอันตรายมากที่จะทำให้ HTML โดยพลการแบบไดนามิกบนเว็บไซต์เพราะมีแนวโน้มที่จะ [XSS Attack] (https://en.wikipedia.org/wiki/cross-site_scripting) อย่าลืมใช้การแก้ไข HTML เฉพาะสำหรับเนื้อหาที่เชื่อถือได้และไม่เคยมีเนื้อหาที่ผู้ใช้ส่ง
คุณสมบัติ HTML
แท็กหนวดยังสามารถใช้ในแอตทริบิวต์ HTML:
<div id = "item-{{id}}"> </div>
โปรดทราบว่าไม่สามารถใช้การแก้ไขภายใน Vue.js Directives และคุณสมบัติพิเศษ ไม่ต้องกังวลหากมีการใช้แท็กหนวดในสถานที่ที่ไม่ถูกต้อง vue.js จะให้คำเตือน
มัด
ข้อความที่วางไว้ในแท็กหนวดเรียกว่านิพจน์ที่มีผลผูกพัน ใน vue.js นิพจน์ที่ถูกผูกไว้ประกอบด้วยนิพจน์ JavaScript อย่างง่ายและเลือกตัวกรองอย่างน้อยหนึ่งตัว
นิพจน์ JavaScript
จนถึงตอนนี้เทมเพลตของเราถูกผูกไว้กับคีย์แอตทริบิวต์ที่เรียบง่ายเท่านั้น อย่างไรก็ตามในความเป็นจริง Vue.js รองรับการแสดงออกของ JavaScript ที่มีคุณสมบัติเต็มรูปแบบในการเชื่อมโยงข้อมูล:
{{number + 1}}
{{ ตกลง ? 'ใช่': 'ไม่'}}
{{message.split (''). reverse (). เข้าร่วม ('')}}
นิพจน์เหล่านี้ได้รับการประเมินภายในขอบเขตของอินสแตนซ์ VUE ที่พวกเขาอยู่ ข้อ จำกัด อย่างหนึ่งคือการผูกแต่ละครั้งสามารถมีนิพจน์เดียวเท่านั้นดังนั้นคำสั่งต่อไปนี้ไม่ถูกต้อง:
<!-นี่คือคำสั่งไม่ใช่นิพจน์:->
{{var a = 1}}
<!-การควบคุมกระบวนการไม่สามารถทำได้คุณสามารถใช้นิพจน์ ternary แทน->
{{ถ้า (ตกลง) {ส่งคืนข้อความ}}}
กรอง
vue.js อนุญาตให้เพิ่ม "ตัวกรอง" ที่เป็นตัวเลือกหลังจากนิพจน์ซึ่งระบุด้วย "อักขระไปป์ไลน์"::
{{ข้อความ | ใช้ประโยชน์}}
ที่นี่เราจะใช้ค่าของข้อความนิพจน์ "ท่อ" ไปยังตัวกรองที่ใช้ตัวพิมพ์ใหญ่ในตัว ตัวกรองนี้เป็นเพียงฟังก์ชั่น JavaScript ที่ส่งคืนค่าตัวพิมพ์ใหญ่ Vue.js มีตัวกรองในตัวหลายตัวและเราจะพูดคุยเกี่ยวกับวิธีการพัฒนาตัวกรองของเราเองในภายหลัง
โปรดทราบว่าไวยากรณ์ท่อไม่ใช่ไวยากรณ์ JavaScript ดังนั้นตัวกรองจึงไม่สามารถใช้ภายในนิพจน์และสามารถเพิ่มลงในความคิดในภายหลังของนิพจน์เท่านั้น
ตัวกรองสามารถเชื่อมต่อในซีรีส์:
{{ข้อความ | Filtera | FilterB}}
ตัวกรองยังสามารถยอมรับพารามิเตอร์:
{{ข้อความ | filtera 'arg1' arg2}}
ฟังก์ชั่นตัวกรองจะใช้ค่าของนิพจน์เป็นพารามิเตอร์แรกเสมอ อาร์กิวเมนต์ที่ยกมาจะถือว่าเป็นสตริงในขณะที่อาร์กิวเมนต์ที่ไม่ได้รับการคำนวณจะถูกคำนวณเป็นนิพจน์ ที่นี่สตริง 'Arg1' ถูกส่งผ่านไปยังตัวกรองเป็นพารามิเตอร์ที่สองและค่าของนิพจน์ Arg2 ถูกคำนวณเป็นพารามิเตอร์ที่สาม
คำแนะนำ
คำสั่งเป็นคุณสมบัติพิเศษพร้อมคำนำหน้า V- ค่าของคำสั่งนั้น จำกัด อยู่ที่นิพจน์ที่มีผลผูกพันดังนั้นนิพจน์ JavaScript และกฎตัวกรองที่กล่าวถึงข้างต้นก็มีผลบังคับใช้ที่นี่ ความรับผิดชอบของคำสั่งคือการใช้พฤติกรรมพิเศษบางอย่างกับ DOM เมื่อค่าของการเปลี่ยนแปลงการแสดงออก ลองดูตัวอย่างใน "ภาพรวม":
<p v-if = "ทักทาย"> สวัสดี! </p>
ที่นี่คำสั่ง v-if จะลบ/แทรกองค์ประกอบ <p> ตามความถูกต้องของค่าการทักทายนิพจน์
พารามิเตอร์
คำแนะนำบางอย่างสามารถคั่นด้วย "อาร์กิวเมนต์" หลังจากชื่อและลำไส้ใหญ่ตรงกลาง ตัวอย่างเช่นคำสั่ง V-bind ใช้เพื่ออัปเดตคุณสมบัติ HTML อย่างต่อเนื่อง:
<a v-bind: href = "url"> </a>
ที่นี่ HREF เป็นพารามิเตอร์ซึ่งบอกคำสั่ง V-bind เพื่อผูกแอตทริบิวต์ HREF ขององค์ประกอบกับค่าของ URL นิพจน์ บางทีคุณอาจสังเกตเห็นว่าคุณสามารถใช้การแก้ไขคุณสมบัติ { % RAW %} href = "{{url}}" { % endraw %} เพื่อให้ได้ผลลัพธ์เดียวกัน: สิ่งนี้ถูกต้องและในความเป็นจริงการแก้ไขคุณสมบัติภายในจะถูกแปลงเป็นการเชื่อมโยง V-bind
อีกตัวอย่างหนึ่งคือคำสั่ง v-on ซึ่งใช้ในการฟังเหตุการณ์ DOM:
<a v-on: click = "dosomething">
พารามิเตอร์นี้เป็นชื่อของเหตุการณ์ที่กำลังฟัง เราจะอธิบายรายละเอียดที่มีผลผูกพันกับเหตุการณ์
ตัวดัดแปลง
ตัวดัดแปลงเป็นคำต่อท้ายพิเศษที่เริ่มต้นด้วยช่วงเวลาครึ่งความกว้าง พวกเขาใช้เพื่อระบุว่าคำแนะนำควรผูกพันในวิธีพิเศษ ตัวอย่างเช่น. literal modifier บอกคำสั่งให้แยกวิเคราะห์ค่าเป็นสตริงตัวอักษรแทนนิพจน์:
<a v-bind: href.literal = "/a/b/c"> </a>
แน่นอนว่าสิ่งนี้ดูเหมือนจะไม่สมเหตุสมผลเพราะเราแค่ต้องใช้ href = "/a/b/c" โดยไม่ต้องใช้คำสั่งเดียว ตัวอย่างนี้เป็นเพียงการสาธิตไวยากรณ์ ต่อมาเราจะเห็นการใช้งานที่ใช้งานได้จริงมากขึ้น
ตัวย่อ
V-Prefix เป็นคำใบ้ที่แสดงถึงคุณสมบัติ VUE เฉพาะในเทมเพลต คำนำหน้าเหล่านี้อาจเป็นความแตกต่างที่ดีเมื่อคุณต้องการเพิ่มพฤติกรรมแบบไดนามิกให้กับรหัส HTML ที่มีอยู่ แต่เมื่อคุณใช้คำแนะนำทั่วไปบางอย่างคุณจะรู้สึกว่ามันสมจริงและมีความผิดปกติเสมอ และเมื่อสร้างแอปพลิเคชันหน้าเดียว (SPA) Vue.js จะจัดการเทมเพลตทั้งหมดและคำนำหน้า V- ไม่สำคัญในเวลานี้ ดังนั้น Vue.js จึงให้ตัวย่อพิเศษสำหรับคำสั่งที่ใช้กันมากที่สุดสองคำสั่ง V-bind และ V-on:
ตัวย่อ V-bind
<!-ไวยากรณ์ที่สมบูรณ์-> <a v-bind: href = "url"> </a> <!-ตัวย่อ-> <a: href = "url"> </a> <!
ตัวย่อ V-on
<!-ไวยากรณ์ที่สมบูรณ์-> <a v-on: click = "dosomething"> </a> <!-ตัวย่อ-> <a @click = "dosomething"> </a>
พวกเขาดูแตกต่างจาก "กฎหมาย" HTML เล็กน้อย แต่พวกเขาจะแยกวิเคราะห์ได้อย่างถูกต้องในเบราว์เซอร์ที่เปิดใช้งาน Vue.js ทั้งหมดและไม่ปรากฏในแท็กที่แสดงผลสุดท้าย ไวยากรณ์ตัวย่อเป็นทางเลือกอย่างสมบูรณ์ แต่เมื่อคุณเรียนรู้ทีละขั้นตอนคุณจะดีใจที่ได้พวกเขา
บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น