1. Singkatan V-Bind
<!-Sintaks Lengkap-> <a v-bind: href = "url"> </a> <!-singkatan-> <a: href = "url"> </a> <!-sintaks lengkap-> <tombol v-bind: dinonaktifkan = "somedynamiccondition"> tombol </butt> <!-abbrreviation-somedynamiccondition "> Button </Button> <!-Abbrreviation-somedynamiccondition"> Button </Button> <! : dinonaktifkan = "somedynamiccondition"> tombol </button>
2. V-On Singkatan
<!-Sintaks lengkap-> <a v-on: click = "dosomething"> </a> <!-singkatan-> <a @click = "dosomething"> </a>
3. Filter
{{pesan | Kapitalisasi}}4. Render bersyarat
v-if<h1 v-if="ok">Yes</h1><h1 v-else>No</h1><div v-if="Math.random() > 0.5"> Sorry</div><div v-else> Not sorry</div>template-v-if<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2 </p> </lemplate> v-show <h1 v-show = "ok"> halo! </h1>
5. Daftar rendering untuk
v-for <ul id = "example-1"> <li v-for = "item dalam item"> {{item.message}} </li> </ul> var example1 = vue baru ({el: '#example-1, data: {item: [{pesan:' foo '}, {pesan:' bar '}]}}}}) <ul id="example-2"> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li></ul>var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' }]}});Deteksi perubahan array
Vue.js membungkus metode bermutasi dari array yang diamati, sehingga mereka dapat memicu pembaruan tampilan. Metode yang dibungkus adalah: push (), pop (), shift (), unshift (), splice (), sort (), reverse ()
example1.items.push ({pesan: 'baz'}); example1.items = example1.items.filter (function (item) {return item.message.match (/foo/);}); Template-V-For <ul> <template v-for = "item dalam item"> <li> {{item.msg}} </li> <li> </li> </lemplate> </ul>Objek v-for
<ul id = "ulangi-object"> <li v-for = "value in object"> {{$ key}}: {{value}} </li> </ul> vue baru ({el: '#ulangi-object', data: {objek: {firstName: 'John', lastName: 'doe', eveatRentang nilai V-FOR
<div> <span v-for = "n in 10"> {{n}} </span> </div>6. Metode dan Penangan Acara
Prosesor metode
<Div id = "Contoh"> <tombol v-on: click = "salam"> salam </button> </div> var vm = vue baru ({el: '#example', data: {name: 'vue.js'}, // tentukan metode dalam `Metode` objek: {salam: function (event) {// dalam metode ini ke poin ini ke poin ini ke poin ini ke poin ini ke poin ini ke poin ini ke poin ini ke poin ini ke Metode To Metode To Method: `Event` adalah peringatan acara DOM asli (event.target.tagname)}}}) // Anda juga dapat memanggil metode vmm.greet () dalam kode JavaScript; // -> 'halo vue.js!'Prosesor pernyataan inline
<Div id = "Contoh-2"> <tombol v-on: click = "say ('hai')"> say hi </button> <tombol v-on: click = "katakan ('apa')"> Say What </button> </div> vue baru ({el: '#Contoh-2', Metode: {function: function (msg) {peringatan (msg)}}}}), {function: msg) {msg)}}}} {{msg)}} {{msg)}} {{msg)}} {msg) {ms)Terkadang juga perlu untuk mengakses acara DOM asli dalam prosesor pernyataan inline. Anda dapat menggunakan acara $ variabel khusus untuk meneruskannya ke dalam metode
<Tombol V-On: klik = "katakan ('halo!', $ event)"> Kirim </button> Metode: {katakan: function (msg, event) {// Sekarang kita dapat mengakses acara objek acara asli.preventDefault ()}};## Pengubah Acara
<!-Cegah acara klik dari Bubbled-> <a v-on: click.stop = "dothis"> </a> <!-kirimkan acara tidak lagi membebani halaman-> <form v-on: submit.prevent = "Onsubmit"> </Form> <!-Modifiers dapat digabungkan-<a v-on: click. V-On: Kirim.prevent> </form>
## pengubah utama
<!-vm.submit () dipanggil hanya ketika kode ke 13-> <input v-on: keyup.13 = "kirim"> <!-sama seperti di atas-> <input v-on: keyup.enter = "kirim"> <!-sintaks singkatan-> <input @keyup.enter = "kirim">
Semua alias kunci: masukkan, tab, hapus, esc, ruang, atas, bawah, kiri, kanan
## Contoh lainnya
vue baru ({el: '#demo', data: {newLabel: '', stats: stats}, metode: {add: function (e) {e.preventDefault () if (! this.newlabel) {return;} this.stats.push ({label: this.newlabel, value: 'this.stats.push ({label: this (stat) {if (this.stats.length> 3) {this.stats. $ remove (stat);7. Transisi
Transisi CSS
<Div v-jika = "show" transition = "expand"> hello </div> Kemudian tambahkan aturan CSS untuk transisi. Tinggi: 30px; padding: 10px; latar belakang-warna: #EEE; overflow: tersembunyi;}/*. expand-enter Tentukan status awal entri* //* .Expand-leave Tentukan keadaan akhir keberangkatan*/. Expand-enter, .Expand-leave {Height: 0; padding: 0 10px; opacity: 0;}Anda dapat mencapai transisi yang berbeda pada elemen yang sama melalui pengikatan dinamis:
<Div v-if = "show": transition = "transitionName"> halo </div> vue baru ({el: '...', data: {show: false, transitionname: 'fade'}}Selain itu, kait javascript dapat disediakan:
Vue.transition('expand', { beforeEnter: function (el) { el.textContent = 'beforeEnter' }, enter: function (el) { el.textContent = 'enter' }, afterEnter: function (el) { el.textContent = 'afterEnter' }, enterCancelled: function (el) { // handle cancellation }, beforeLeave: function (el) {el.textContent = 'beforeleave'}, leave: function (el) {el.textContent = 'cuti'}, afterleave: function (el) {el.textContent = 'fterleave'}, leavecancelled: function (el) {// menangani kanker}};8. Komponen
1. Daftar
// Tentukan var myComponent = vue.extend ({template: '<div> Komponen khusus! </div>'}); // daftarkan vue.component ('my-component', mycomponent); // create root instance vue baru ({el: '#example'}); <div id = "Contoh"> <-my-compony ({el: '#example'}); <div id = "Contoh"> <-my-comp Vue.component ('my-component', {template: '<div> Komponen khusus! </div>'}); // Buat instance root vue baru ({el: '#example'}); <div id = "example"> <my-component> </my-component> </div>2. Gunakan prop untuk lulus data
Contoh 1:
Vue.component ('child', {// mendeklarasikan alat peraga: ['msg'], // prop dapat digunakan dalam templat // Anda dapat menggunakan `this.msg` untuk mengatur template: '<span> {{msg}} </span>'}); <child msg =" hello! "> </Child>Contoh 2:
Vue.component ('Child', {// Camelcase di JavaScript Props: ['myMessage'], template: '<span> {{myMessage}} </span>'}); <!-Kasus Kebab di HTML-> <Child my-message = "Hello!"> </drile>3. Alat peraga dinamis
<div> <input v-Model = "ParentMsg"> <br> <anak-v-bind: my-message = "parentMsg"> </child> </div>
Menggunakan sintaks singkatan dari V-bind biasanya lebih sederhana:
<Child: my-message = "ParentMsg"> </dild>
4. Jenis pengikatan
Prop adalah ikatan satu arah secara default: Ketika sifat-sifat komponen induk berubah, itu akan diteruskan ke komponen anak, tetapi sebaliknya tidak akan. Ini untuk mencegah komponen anak dari secara tidak sengaja memodifikasi keadaan komponen induk - ini akan membuat aliran data aplikasi sulit dipahami. Namun, juga dimungkinkan untuk secara eksplisit memaksa ikatan dua kali atau satu kali menggunakan .sync atau .once mengikat pengubah:
Sintaks komparatif:
<!-Default adalah pengikatan satu arah-> <child: msg = "parentMsg"> </ child> <!-ikatan dua arah-> <child: msg.sync = "parentsmsg"> </child> <!-ikat tunggal-> <child: msg.once = "ParentMSG"> </child> </child3 lainnya: Mod3: msg.once = "ParentMSG"> </child> </child3 lainnya: Mod3: msg. slot = "header"> header khusus </h3> </podal> </div>
5. Verifikasi PROP
Komponen dapat menentukan persyaratan verifikasi untuk alat peraga. Ini berguna ketika komponen diberikan kepada orang lain, karena persyaratan verifikasi ini membentuk API komponen, memastikan bahwa orang lain menggunakan komponen dengan benar. Pada saat ini, nilai alat peraga adalah objek yang berisi persyaratan verifikasi:
Vue.component ('example', {props: {// deteksi tipe dasar (`null` berarti jenis apa pun ok) propa: angka, // diperlukan dan string propb: {type: string, wajib: true}, // angka, dengan nilai default propc: {type: number, default: 100}, // nilai default/function function/archault {numbered, ouched: 100}, // Nilai default/function function/archault {numbered, ouched: 100}, // nilai default/function function/archault harus function {a function {a function {a function {a number {a function {a number: () { return { msg: 'hello' } } }, // Specify this prop as a two-way binding// If the binding type is not correct, a warning will be thrown propE: { twoWay: true }, // Custom validation function propF: { validator: function (value) { return value > 10 } }, // Convert the value (new in 1.0.12) // Convert the value before setting nilai propg: {coerce: function (val) {return val + '' // konversi nilai ke string}}, proph: {coerce: function (val) {return json.parse (val) // konversi string json ke objek}}}}});Contoh lainnya:
Vue.component ('modal', {template: '#modal-template', props: {show: {type: boolean, wajib: true, twoway: true}}});6. Daftar
// Tentukan var myComponent = vue.extend ({template: '<verv> komponen khusus! </Div>'}); // daftarkan vue.component ('my-component', mycomponent); // buat instance root vue baru ({el: '#example'}); <div id = "> <my-comp vue ({{el: '#example'}); <div id =" Contoh "> <-my-compAtau tulis secara langsung:
Vue.component ('my-component', {template: '<div> Komponen khusus! </div>'}); // Buat instance root vue baru ({el: '#example'}); <div id = "example"> <my-component> </my-component> </div>7. Gunakan prop untuk lulus data
Contoh 1:
Vue.component ('child', {// mendeklarasikan alat peraga: ['msg'], // prop dapat digunakan dalam templat // Anda dapat menggunakan `this.msg` untuk mengatur template: '<span> {{msg}} </span>'}); <child msg =" hello! "> </Child>Contoh 2:
Vue.component ('Child', {// Camelcase di JavaScript Props: ['myMessage'], template: '<span> {{myMessage}} </span>'}); <!-Kasus Kebab di HTML-> <Child my-message = "Hello!"> </drile>8. Alat peraga dinamis
<div> <input v-Model = "ParentMsg"> <br> <anak-v-bind: my-message = "parentMsg"> </child> </div>
Menggunakan sintaks singkatan dari V-bind biasanya lebih sederhana:
<Child: my-message = "ParentMsg"> </dild>
9. Tipe Binding Prop
Prop adalah ikatan satu arah secara default: Ketika sifat-sifat komponen induk berubah, itu akan diteruskan ke komponen anak, tetapi sebaliknya tidak akan. Ini untuk mencegah komponen anak dari secara tidak sengaja memodifikasi keadaan komponen induk - ini akan membuat aliran data aplikasi sulit dipahami. Namun, juga dimungkinkan untuk secara eksplisit memaksa ikatan dua kali atau satu kali menggunakan .sync atau .once mengikat pengubah:
Sintaks komparatif:
<!-Default adalah pengikatan satu arah-> <child: msg = "parentMsg"> </child> <!-binding dua arah-> <child: msg.sync = "parentsmsg"> </child> <!-pengikatan tunggal-> <anak: msg.once = "parentMsg"> </child> tunggal-> <child: msg.once = "parentMsg"> </child> tunggal-> <child: msg.once = "parentmsg"> </child> tunggal-tunggal-> <child: msg.once = "ParentMSG"> </child> tunggal-> <child: msg.once = "ParentMSG"> </child>
Contoh lainnya:
<Modal: show.sync = "showmodal"> <h3 slot = "header"> header khusus </h3> </podal> </div>
10. Verifikasi PROP
Komponen dapat menentukan persyaratan verifikasi untuk alat peraga. Ini berguna ketika komponen diberikan kepada orang lain, karena persyaratan verifikasi ini membentuk API komponen, memastikan bahwa orang lain menggunakan komponen dengan benar. Pada saat ini, nilai alat peraga adalah objek yang berisi persyaratan verifikasi:
Vue.component ('example', {props: {// deteksi tipe dasar (`null` berarti jenis apa pun ok) propa: angka, // diperlukan dan string propb: {type: string, wajib: true}, // angka, dengan nilai default propc: {type: number, default: 100}, // nilai default/function function/archault {numbered, ouched: 100}, // Nilai default/function function/archault {numbered, ouched: 100}, // nilai default/function function/archault harus function {a function {a function {a function {a number {a function {a number: () { return { msg: 'hello' } } }, // Specify this prop as a two-way binding// If the binding type is not correct, a warning will be thrown propE: { twoWay: true }, // Custom validation function propF: { validator: function (value) { return value > 10 } }, // Convert the value (new in 1.0.12) // Convert the value before setting nilai propg: {coerce: function (val) {return val + '' // konversi nilai ke string}}, proph: {coerce: function (val) {return json.parse (val) // konversi string json ke objek}}}}});Contoh lainnya:
Vue.component ('modal', {template: '#modal-template', props: {show: {type: boolean, wajib: true, twoway: true}}});11. Gunakan slot untuk mendistribusikan konten
Elemen <slot> digunakan sebagai slot distribusi konten dalam templat komponen. Elemen ini sendiri akan diganti.
Slot dengan atribut nama disebut slot bernama. Konten dengan atribut slot akan didistribusikan ke slot bernama dengan nama yang cocok.
Misalnya, misalkan kita memiliki komponen multi-inseri dengan templat seperti:
<div> <slot name = "One"> </slot> <slot> </slot> <slot name = "dua"> </slot> </div>
Template komponen induk:
<pultion insertion> <p slot = "satu"> satu </p> <p slot = "dua"> dua </p> <p> default a </p> </dulti-insertion>
Hasil rendering adalah:
<dv> <p slot = "satu"> satu </p> <p> default a </p> <p slot = "dua"> dua </p> </div>