Kata pengantar
VUE.JS adalah perpustakaan antarmuka web berbasis data. Vue.js hanya berfokus pada lapisan tampilan dan dapat dengan mudah diintegrasikan dengan perpustakaan lain. Kode hanya 24kb setelah kompresi.
Kode berikut adalah contoh paling sederhana dari Vue.js. Ketika konten dalam input berubah, konten node P akan berubah sesuai.
<!-html-> <div id = "demo"> <p> {{{pesan}} </p> <input v-model = "pesan"> </div> vue baru ({el: '#demo', data: {pesan: 'halo vue.js!'}})))Sintaks dasar vue.js
Masukkan teks
<span> pesan: {{text}} </span>Masukkan teks dalam format HTML dan tampilkan dalam format HTML pada halaman
<span> pesan: {{{html}}} </span>Konten tidak mengikuti perubahan data
<span> pesan: {{ * text}} </span>Mengikat data pada properti
<Div id = "item-{{id}}"> </div>Menggunakan ekspresi JS di {{}}
{{number + 1}} {{ok? 'YA': 'NO'}} {{message.split (''). Reverse (). Join ('')}}Menggunakan pernyataan JS di {{}}
{{var a = 1}} {{if (ok) {return pesan}}}Jika perintah
<p v-if = "ucapan"> halo! </p> Di sini arahan V-jika akan menghapus/memasukkan elemen <p> sesuai dengan keaslian nilai ucapan ekspresi.
arahan href
<a v-bind: href = "url"> </a> atau <a href = "{{url}}"> </a>Klik Perintah
<a v-on: click = "dosomething">
Masukkan perintah
<Input V-Model = "Newtodo" V-On: Keyup.enter = "AddToDo">
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>
v-on
<!-Sintaks lengkap-> <a v-on: click = "dosomething"> </a> <!-singkatan-> <a @click = "dosomething"> </a>
Meringkaskan
Ekspresi dalam template sangat nyaman, tetapi sebenarnya hanya digunakan untuk operasi sederhana. Templat adalah untuk menggambarkan struktur tampilan. Menempatkan terlalu banyak logika ke dalam templat dapat membuat template terlalu berat dan sulit dipelihara. Inilah sebabnya mengapa Vue.js membatasi ekspresi yang mengikat pada satu ekspresi. Jika diperlukan lebih dari satu ekspresi, sifat yang dihitung harus digunakan. Editor akan memperbarui cara menggunakan atribut yang dihitung nanti. Teman yang tertarik, terus perhatikan wulin.com.