1. ตัวย่อ v-bind
<!-ไวยากรณ์ที่สมบูรณ์-> <a v-bind: href = "url"> </a> <!-ตัวย่อ-> <a: href = "url"> </a> <!
2. V-on ตัวย่อ
<!-ไวยากรณ์ที่สมบูรณ์-> <a v-on: click = "dosomething"> </a> <!-ตัวย่อ-> <a @click = "dosomething"> </a>
3. ตัวกรอง
{{ข้อความ | ใช้ประโยชน์}}4. การเรนเดอร์แบบมีเงื่อนไข
v-if <h1 v-if = "ตกลง"> ใช่ </h1> <h1 v-else> no </h1> <div v-if = "math.random ()> 0.5"> ขออภัย </div> <div v-else> ไม่ขอโทษ </div> template-v-if <template v-if = "ตกลง" 2 </p> </template> v-show <h1 v-show = "ตกลง"> สวัสดี! </h1>
5. รายการการแสดงผลสำหรับ
v-for <ul id = "ตัวอย่าง -1"> <li v-for = "รายการในรายการ"> {{item.message}} </li> </ul> var ตัวอย่าง 1 = vue ใหม่ ({el: '#ตัวอย่าง-1', ข้อมูล: {รายการ: [{message: 'foo'}, {ข้อความ: <ul id = "example-2"> <li v-for = "รายการในรายการ"> {{parentMessage}}-{{$ index}}-{{item.message}} </li> </ul> var ตัวอย่าง: {{{el: '#ตัวอย่าง-2' -การตรวจจับการเปลี่ยนแปลงอาร์เรย์
vue.js ห่อวิธีการกลายพันธุ์ของอาร์เรย์ที่สังเกตได้ดังนั้นพวกเขาจึงสามารถเรียกดูการอัปเดตดู วิธีการที่ห่อคือ: push (), pop (), shift (), unshift (), splice (), sort (), reverse ()
example1.items.push ({message: 'baz'}); example1.items = example1.items.filter (ฟังก์ชั่น (รายการ) {return item.message.match (/foo/);}); Template-V-for <ul> <template v-for = "รายการในรายการ"> <li> {{item.msg}} </li> <li> </li> </li>วัตถุ V-for
<ul id = "repeet-object"> <li v-for = "ค่าในวัตถุ"> {{$ key}}: {{value}} </li> </ul> ใหม่ vue ({el: '#repeat-object', ข้อมูล: {object: {firstName: 'John', LastName: 'doe'ช่วงค่า V-for
<div> <span v-for = "n ใน 10"> {{n}} </span> </div>6. วิธีการและตัวจัดการเหตุการณ์
โปรเซสเซอร์วิธีการ
<div id = "ตัวอย่าง"> <ปุ่ม v-on: click = "greet"> ทักทาย </button> </div> var vm = new vue ({el: '#example', ข้อมูล: {ชื่อ: 'vue.js'}, // define methods to ') // `Event` เป็นการแจ้งเตือนเหตุการณ์ DOM เนทีฟ (Event.target.tagname)}}}) // คุณยังสามารถเรียกเมธอด vm.greet () ในรหัส JavaScript; // -> 'Hello Vue.js!'โปรเซสเซอร์คำสั่งแบบอินไลน์
<div id = "example-2"> <button v-on: click = "say ('hi')"> พูดสวัสดี </ปุ่ม> <ปุ่ม v-on: click = "say ('อะไร')"> พูดอะไร </button> </div> vue ใหม่ ({el: '#example-2', วิธี: {พูด: ฟังก์ชัน (msg)บางครั้งก็จำเป็นต้องเข้าถึงเหตุการณ์ DOM ดั้งเดิมในโปรเซสเซอร์คำสั่งแบบอินไลน์ คุณสามารถใช้เหตุการณ์ $ ตัวแปรพิเศษเพื่อส่งผ่านไปยังวิธีการ
<ปุ่ม v-on: click = "say ('hello!', $ event)"> ส่ง </button> วิธีการ: {say: function (msg, event) {// ตอนนี้เราสามารถเข้าถึงวัตถุเหตุการณ์ Native Event.preventDefault ()}};## ตัวดัดแปลงเหตุการณ์
<!-ป้องกันเหตุการณ์คลิกจาก Bubbled-> <a v-on: click.stop = "dothis"> </a> <!-ส่งเหตุการณ์ไม่มากเกินไปอีกต่อไป-> <ฟอร์ม v-on: submit.prevent = "onsubmit"> </form> <! V-on: submit.prevent> </form>
## ตัวดัดแปลงคีย์
<!-vm.submit () เรียกเฉพาะเมื่อปุ่มกดคือ 13-> <อินพุต v-on: keyup.13 = "ส่ง"> <!-เหมือนกับด้านบน-> <อินพุต v-on: keyup.enter = "ส่ง"> <!
นามแฝงคีย์ทั้งหมด: Enter, Tab, DELETE, ESC, Space, Up, Down, Left, Right
## ตัวอย่างอื่น ๆ
ใหม่ vue ({el: '#demo', ข้อมูล: {newLabel: '', สถิติ: สถิติ}, วิธีการ: {เพิ่ม: ฟังก์ชั่น (e) {e.preventdefault () ถ้า (! this.newlabel) {return;} this.stats.push (สถิติ) {ถ้า (this.stats.length> 3) {this.stats. $ remove (stat);7. การเปลี่ยนแปลง
การเปลี่ยนแปลง CSS
<div v-if = "show" transition = "ขยาย"> สวัสดี </div> จากนั้นเพิ่มกฎ CSS สำหรับ. expand-transition, .expand-enter, และ. expand-leave:/* จำเป็น*/. ขยายการแปลง ความสูง: 30px; Padding: 10px; พื้นหลังสี: #eee; Overflow: Hidden;}/* .Expand-ENTER กำหนดสถานะเริ่มต้นของรายการ* //* .Expand-Leave กำหนดสถานะสิ้นสุดของการออกเดินทาง*/. Expand-Enter-Enter-enter, .Expand-Leave {ความสูง: 0; Padding: 0 10px; ความทึบ: 0;}คุณสามารถผ่านการเปลี่ยนแปลงที่แตกต่างกันในองค์ประกอบเดียวกันผ่านการเชื่อมโยงแบบไดนามิก:
<div v-if = "show": transition = "transitionName"> สวัสดี </div> ใหม่ vue ({el: '... ', data: {show: false, transitionName: 'Fade'}}นอกจากนี้ยังสามารถให้ตะขอ JavaScript:
Vue.Transition ('Expand', {ProferEnter: function (EL) {El.TextContent = 'ProferEnter'}, Enter: function (el) {el.TextContent = 'Enter'}, Afterenter: ฟังก์ชั่น (el) {el.TextContent El.TextContent = 'beForEleave'}, ออกจาก: ฟังก์ชั่น (el) {el.TextContent = 'ออก'}, afterleave: ฟังก์ชั่น (el) {el.textContent = 'afterleave'}, leavecelled: ฟังก์ชั่น (EL) {// การยกเลิกการจัดการ}}););8. ส่วนประกอบ
1. ลงทะเบียน
// define var myComponent = vue.extend ({template: '<div> องค์ประกอบที่กำหนดเอง! </div>'}); // ลงทะเบียน vue.Component ('องค์ประกอบของฉัน', myComponent); // สร้างอินสแตนซ์ใหม่ vue ({el: '#example'}; Vue.Component ('My-Component', {template: '<div> องค์ประกอบที่กำหนดเอง! </div>'}); // สร้างอินสแตนซ์รูทใหม่ vue ({el: '#example'}); <div id = "ตัวอย่าง"> <my-component> </my-component> </div>2. ใช้ Prop เพื่อส่งข้อมูล
ตัวอย่างที่ 1:
vue.Component ('child', {// ประกาศอุปกรณ์ประกอบฉากอุปกรณ์ประกอบฉาก: ['msg'], // prop สามารถใช้ในเทมเพลต // คุณสามารถใช้ `this.msg` ในการตั้งค่าเทมเพลต: '<span> {{msg}} </span>'});ตัวอย่างที่ 2:
vue.Component ('child', {// camelcase ใน JavaScript Props: ['myMessage'], แม่แบบ: '<span> {{myMessage}} </span>'}); <!-เคบับ-เคสใน html-> <child my-message = "สวัสดี!"> </vild>3. อุปกรณ์ประกอบฉากแบบไดนามิก
<div> <อินพุต v-model = "parentmsg"> <br> <child v-bind: my-message = "parentmsg"> </vild> </div>
การใช้ไวยากรณ์ตัวย่อของ V-bind มักจะง่ายกว่า:
<เด็ก: my-message = "parentmsg"> </vild>
4. ประเภทการผูกมัด
Prop คือการเชื่อมโยงทางเดียวโดยค่าเริ่มต้น: เมื่อคุณสมบัติของการเปลี่ยนแปลงส่วนประกอบของผู้ปกครองมันจะถูกส่งผ่านไปยังองค์ประกอบของเด็ก แต่วิธีอื่น ๆ จะไม่ นี่คือการป้องกันไม่ให้ส่วนประกอบเด็กสามารถแก้ไขสถานะขององค์ประกอบหลักได้โดยไม่ตั้งใจซึ่งจะทำให้การไหลของข้อมูลของแอปพลิเคชันยากที่จะเข้าใจ อย่างไรก็ตามมันยังเป็นไปได้ที่จะบังคับให้มีการเชื่อมโยงแบบสองทิศทางหรือการผูกมัดครั้งเดียวโดยใช้. SYNC หรือ. ONCE Binding Modifier:
ไวยากรณ์เปรียบเทียบ:
<!-ค่าเริ่มต้นคือการเชื่อมโยงทางเดียว-> <เด็ก: msg = "parentmsg"> </child> <!-การผูกมัดแบบสองทิศทาง-> <เด็ก: msg.sync = "parentmsg"> </vild> <! slot = "header"> ส่วนหัวที่กำหนดเอง </h3> </dodal> </div>
5. การตรวจสอบล่วงหน้า
ส่วนประกอบสามารถระบุข้อกำหนดการตรวจสอบสำหรับอุปกรณ์ประกอบฉาก สิ่งนี้มีประโยชน์เมื่อมีการมอบส่วนประกอบให้กับผู้อื่นเนื่องจากข้อกำหนดการตรวจสอบเหล่านี้เป็น API ของส่วนประกอบเพื่อให้มั่นใจว่าผู้อื่นใช้ส่วนประกอบอย่างถูกต้อง ในเวลานี้ค่าของอุปกรณ์ประกอบฉากเป็นวัตถุที่มีข้อกำหนดการตรวจสอบ:
Vue.Component ('ตัวอย่าง', {props: {// การตรวจจับประเภทพื้นฐาน (`null` หมายถึงประเภทใด ๆ ก็โอเค) propa: number, // จำเป็นและสตริง procb: {ประเภท: สตริง, จำเป็น: จริง}, // จำนวน, ค่าเริ่มต้น propc: {ประเภท: จำนวน, ค่าเริ่มต้น: 100}, // ค่าเริ่มต้น return {msg: 'hello'}}}, // ระบุเสานี้เป็นการผูกสองทาง // ถ้าประเภทการผูกไม่ถูกต้องคำเตือนจะถูกโยน prope: {twoway: true}, // ฟังก์ชั่นการตรวจสอบความถูกต้องที่กำหนดเอง {coerce: function (val) {return val + '' // แปลงค่าเป็นสตริง}}, proph: {coerce: function (val) {return json.parse (val) // แปลงสตริง JSON เป็นวัตถุ}}}}});ตัวอย่างอื่น ๆ :
vue.Component ('modal', {template: '#modal-template', อุปกรณ์ประกอบฉาก: {show: {type: boolean, ต้องการ: true, twoway: true}}});6. ลงทะเบียน
// define var myComponent = vue.extend ({template: '<div> องค์ประกอบที่กำหนดเอง! </div>'}); // ลงทะเบียน vue.component ('my-component', myComponent); // สร้างอินสแตนซ์ใหม่ vue ({el: '#example'};หรือเขียนโดยตรง:
Vue.Component ('My-Component', {template: '<div> องค์ประกอบที่กำหนดเอง! </div>'}); // สร้างอินสแตนซ์รูทใหม่ vue ({el: '#example'}); <div id = "ตัวอย่าง"> <my-component> </my-component> </div>7. ใช้ Prop เพื่อส่งข้อมูล
ตัวอย่างที่ 1:
vue.Component ('child', {// ประกาศอุปกรณ์ประกอบฉากอุปกรณ์ประกอบฉาก: ['msg'], // prop สามารถใช้ในเทมเพลต // คุณสามารถใช้ `this.msg` ในการตั้งค่าเทมเพลต: '<span> {{msg}} </span>'});ตัวอย่างที่ 2:
vue.Component ('child', {// camelcase ใน JavaScript Props: ['myMessage'], แม่แบบ: '<span> {{myMessage}} </span>'}); <!-เคบับ-เคสใน html-> <child my-message = "สวัสดี!"> </vild>8. อุปกรณ์ประกอบฉากแบบไดนามิก
<div> <อินพุต v-model = "parentmsg"> <br> <child v-bind: my-message = "parentmsg"> </vild> </div>
การใช้ไวยากรณ์ตัวย่อของ V-bind มักจะง่ายกว่า:
<เด็ก: my-message = "parentmsg"> </vild>
9. ประเภทการผูกมัด
Prop คือการเชื่อมโยงทางเดียวโดยค่าเริ่มต้น: เมื่อคุณสมบัติของการเปลี่ยนแปลงส่วนประกอบของผู้ปกครองมันจะถูกส่งผ่านไปยังองค์ประกอบของเด็ก แต่วิธีอื่น ๆ จะไม่ นี่คือการป้องกันไม่ให้ส่วนประกอบเด็กสามารถแก้ไขสถานะขององค์ประกอบหลักได้โดยไม่ตั้งใจซึ่งจะทำให้การไหลของข้อมูลของแอปพลิเคชันยากที่จะเข้าใจ อย่างไรก็ตามมันยังเป็นไปได้ที่จะบังคับให้มีการเชื่อมโยงแบบสองทิศทางหรือการผูกมัดครั้งเดียวโดยใช้. SYNC หรือ. ONCE Binding Modifier:
ไวยากรณ์เปรียบเทียบ:
<!-ค่าเริ่มต้นคือการเชื่อมโยงทางเดียว-> <เด็ก: msg = "parentmsg"> </child> <!-การผูกมัดแบบสองทิศทาง-> <เด็ก: msg.sync = "parentmsg"> </vild> <!
ตัวอย่างอื่น ๆ :
<modal: show.sync = "showmodal"> <h3 slot = "header"> ส่วนหัวที่กำหนดเอง </h3> </odal> </div>
10. การตรวจสอบล่วงหน้า
ส่วนประกอบสามารถระบุข้อกำหนดการตรวจสอบสำหรับอุปกรณ์ประกอบฉาก สิ่งนี้มีประโยชน์เมื่อมีการมอบส่วนประกอบให้กับผู้อื่นเนื่องจากข้อกำหนดการตรวจสอบเหล่านี้เป็น API ของส่วนประกอบเพื่อให้มั่นใจว่าผู้อื่นใช้ส่วนประกอบอย่างถูกต้อง ในเวลานี้ค่าของอุปกรณ์ประกอบฉากเป็นวัตถุที่มีข้อกำหนดการตรวจสอบ:
Vue.Component ('ตัวอย่าง', {props: {// การตรวจจับประเภทพื้นฐาน (`null` หมายถึงประเภทใด ๆ ก็โอเค) propa: number, // จำเป็นและสตริง procb: {ประเภท: สตริง, จำเป็น: จริง}, // จำนวน, ค่าเริ่มต้น propc: {ประเภท: จำนวน, ค่าเริ่มต้น: 100}, // ค่าเริ่มต้น return {msg: 'hello'}}}, // ระบุเสานี้เป็นการผูกสองทาง // ถ้าประเภทการผูกไม่ถูกต้องคำเตือนจะถูกโยน prope: {twoway: true}, // ฟังก์ชั่นการตรวจสอบความถูกต้องที่กำหนดเอง {coerce: function (val) {return val + '' // แปลงค่าเป็นสตริง}}, proph: {coerce: function (val) {return json.parse (val) // แปลงสตริง JSON เป็นวัตถุ}}}}});ตัวอย่างอื่น ๆ :
vue.Component ('modal', {template: '#modal-template', อุปกรณ์ประกอบฉาก: {show: {type: boolean, ต้องการ: true, twoway: true}}});11. ใช้สล็อตเพื่อแจกจ่ายเนื้อหา
องค์ประกอบ <lot> ใช้เป็นสล็อตแจกจ่ายเนื้อหาในเทมเพลตส่วนประกอบ องค์ประกอบนี้จะถูกแทนที่
สล็อตที่มีแอตทริบิวต์ชื่อเรียกว่าสล็อตชื่อ เนื้อหาที่มีแอตทริบิวต์สล็อตจะถูกแจกจ่ายให้กับสล็อตที่มีชื่อพร้อมชื่อที่ตรงกัน
ตัวอย่างเช่นสมมติว่าเรามีองค์ประกอบการแทรกซึมหลายครั้งที่มีเทมเพลตเช่น:
<div> <slot name = "one"> </lot> <lot> </lot> <slot name = "Two"> </lot> </div>
เทมเพลตองค์ประกอบหลัก:
<multi-insertion> <p slot = "one"> หนึ่ง </p> <p slot = "สอง"> สอง </p> <p> ค่าเริ่มต้น A </p> </multi-insertion>
ผลการแสดงผลคือ:
<div> <p slot = "หนึ่ง"> หนึ่ง </p> <p> ค่าเริ่มต้น A </p> <p slot = "สอง"> สอง </p> </div>