สรุปไวยากรณ์พื้นฐานของ vue.js บทแนะนำเบื้องต้น

คำนำ

Vue.js เป็นไลบรารีเว็บอินเตอร์เฟสที่ขับเคลื่อนด้วยข้อมูล vue.js มุ่งเน้นเฉพาะเลเยอร์มุมมองและสามารถรวมเข้ากับไลบรารีอื่น ๆ ได้อย่างง่ายดาย รหัสเป็นเพียง 24KB หลังจากการบีบอัด

รหัสต่อไปนี้เป็นตัวอย่างที่ง่ายที่สุดของ vue.js เมื่อเนื้อหาในอินพุตเปลี่ยนแปลงเนื้อหาของโหนด P จะเปลี่ยนไปตามลำดับ

 <!-html-> <div id = "demo"> <p> {{message}} </p> <อินพุต v-model = "message"> </div> vue ใหม่ ({el: '#demo', ข้อมูล: {ข้อความ: 'hello vue.js!'}})))))

ไวยากรณ์พื้นฐานของ vue.js

แทรกข้อความ

 <span> ข้อความ: {{text}} </span>

แทรกข้อความในรูปแบบ HTML และแสดงในรูปแบบ HTML บนหน้า

 <span> ข้อความ: {{{html}}} </span>

เนื้อหาไม่เป็นไปตามการเปลี่ยนแปลงของข้อมูล

 <span> ข้อความ: {{ * text}} </span>

ผูกข้อมูลเกี่ยวกับคุณสมบัติ

 <div id = "item-{{id}}"> </div>

การใช้นิพจน์ js ใน {{}}

 {{number + 1}} {{ตกลง? 'ใช่': 'ไม่'}} {{message.split (''). reverse (). เข้าร่วม ('')}}}

การใช้คำสั่ง JS ใน {{}}

 {{var a = 1}} {{ถ้า (ตกลง) {return message}}}}

ถ้าคำสั่ง

 <p v-if = "ทักทาย"> สวัสดี! </p> ที่นี่คำสั่ง V-if จะลบ/แทรกองค์ประกอบ <p> ตามความถูกต้องของค่าการทักทายนิพจน์

คำสั่ง href

 <a v-bind: href = "url"> </a> หรือ <a href = "{{url}}"> </a>

คำสั่งคลิก

 <a v-on: click = "dosomething">

ป้อนคำสั่ง

 <อินพุต v-model = "newTodo" v-on: keyup.enter = "addTodo">

ตัวย่อ

V-bind

 <!-ไวยากรณ์ที่สมบูรณ์-> <a v-bind: href = "url"> </a> <!-ตัวย่อ-> <a: href = "url"> </a> <!

v-on

 <!-ไวยากรณ์ที่สมบูรณ์-> <a v-on: click = "dosomething"> </a> <!-ตัวย่อ-> <a @click = "dosomething"> </a>

สรุป

การแสดงออกในเทมเพลตนั้นสะดวกมาก แต่จริง ๆ แล้วใช้สำหรับการดำเนินงานที่เรียบง่ายเท่านั้น เทมเพลตคือการอธิบายโครงสร้างของมุมมอง การใส่ตรรกะมากเกินไปลงในเทมเพลตสามารถทำให้เทมเพลตหนักเกินไปและยากที่จะรักษา นี่คือเหตุผลที่ vue.js จำกัด การแสดงออกที่มีผลผูกพันกับนิพจน์เดียว หากจำเป็นต้องมีการแสดงออกมากกว่าหนึ่งรายการควรใช้คุณสมบัติที่คำนวณได้ ตัวแก้ไขจะอัปเดตวิธีการใช้แอตทริบิวต์ที่คำนวณในภายหลัง เพื่อนที่สนใจโปรดให้ความสนใจกับ wulin.com ต่อไป