hujung hadapan web
View.js
Analisis mendalam sintaks templat dalam Vue: interpolasi dan arahan
Analisis mendalam sintaks templat dalam Vue: interpolasi dan arahan
Artikel ini membawa anda melalui sintaks templat dalam Vue dan memperkenalkan sintaks interpolasi dan sintaks arahan. Ia mempunyai nilai rujukan tertentu Rakan-rakan yang memerlukan boleh merujuk kepadanya.
Vue mempunyai banyak sintaks templat yang amat mudah digunakan Anda boleh menulis beberapa sintaks templat yang ditakrifkan oleh Vue dalam HTML untuk memaparkan data dengan cepat, kaedah pengikatan, dsb. Ini adalah salah satu sebab mengapa Vue begitu cepat untuk bermula.
1. Memahami templat
Mari kita fahami apa itu templat?
Templat ialah halaman html dinamik, yang mengandungi beberapa kod sintaks js
Sintaks templat Vue terbahagi kepada dua jenis, Ia adalah:
- [Sintaks Interpolasi] Ungkapan pendakap berganda (sintaks "Mustache") [Satu]
- [Sintaks Arahan] Arahan (label tersuai bermula dengan v- Atribut) [banyak ]
1. Sintaks interpolasi:
- Fungsi: digunakan untuk menghuraikan kandungan kandungan teg dan mengeluarkan data ke halaman
- Penulisan:
{{xxx}}, xxx ialah ungkapan js, dan boleh membaca terus semua atribut dalam data, dan boleh memanggil kaedah objek - Nota: tulis ungkapan js di dalamnya: terdapat nilai pulangan kod js, bukannya penyataan js
2. Sintaks arahan:
- Fungsi: digunakan untuk menghuraikan teg (termasuk: atribut teg, isi teg Kandungan, peristiwa mengikat...)
- Contoh:
v-bind:href="xxx"atau disingkatkan sebagai:href="xxx", xxx juga perlu menulis ungkapan js dan boleh membaca terus semua atribut dalam data - Nota: Terdapat banyak arahan dalam Vue, dan borangnya ialah:
v-????
[Cadangan berkaitan: "tutorial vue.js"]
Mari perkenalkan beberapa sintaks arahan biasa di bawah.
2. Sintaks perintah: Paksa data mengikat v-bind:
Fungsi: Tentukan menukar nilai atribut
Tulisan penuh
v-bind:xxx='yyy' // yyy会作为表达式解析执行
Penulisan ringkas
:xxx='yyy'
Pengikatan data sehala
Sintaks:
v-bind:href ="xxx"atau disingkatkan sebagai:href ="xxx"Ciri: Data hanya boleh mengalir dari data ke halaman
Arahan pengikatan data dua halav-model
Sintaks:
v-mode:value="xxx"Atau disingkatkan sebagaiv-model="xxx"Ciri: Data bukan sahaja boleh mengalir dari data ke halaman, tetapi juga dari halaman ke data
3. Sintaks Arahan: Ikat pendengar acara v-on:
Fungsi: Ikat fungsi panggil balik nama acara yang ditentukan
Tulisan lengkap
v-on:click='xxx' v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'
Tulisan ringkas
@click='xxx' @keyup='xxx' @keyup.enter='xxx'
4. teks v dan v-html
v-text
Fungsi: Memaparkan kandungan teks ke nod di mana ia berada. Perbezaan antara
dan sintaks interpolasi:
v-textakan menggantikan kandungan dalam nod, tetapi{{xx}}tidak akan.
v-html
1. Fungsi: Menghasilkan kandungan yang mengandungi struktur html kepada nod yang ditentukan.
2. Perbezaan daripada sintaks interpolasi:
- (1
v-htmlakan menggantikan semua kandungan dalam nod, tetapi{{xx}}tidak. - (2).
v-htmlboleh mengenal pasti struktur html.
3. Perhatian serius: v-htmlTerdapat isu keselamatan! ! ! !
- (1) Memaparkan HTML sewenang-wenangnya secara dinamik pada tapak web adalah sangat berbahaya dan boleh menyebabkan serangan XSS dengan mudah.
- (2). Sentiasa gunakan
v-htmlpada kandungan yang dipercayai, jangan sekali-kali pada kandungan yang diserahkan pengguna!
<body>
<div id='app'>
<h2 id="nbsp-大括号表达式">1. 大括号表达式</h2>
<p>{{msg}}</p> <!--textContent -->
<p>{{msg.toUpperCase()}}</p>
<p v-html="msg"></p> <!--innerHTML -->
<p v-text="msg"></p> <!--textContent -->
<p v-text="msg.toUpperCase()"></p>
<h2 id="nbsp-指令一-nbsp-强制数据绑定">2. 指令一： 强制数据绑定</h2>
<img src="/static/imghw/default1.png" data-src="imgUrl" class="lazy" alt="Vue"> <!--无法显示图片，没有识别成js表达式 -->
<img src="/static/imghw/default1.png" data-src="imgUrl" class="lazy" v-bind: alt="Vue"> <!--属性值识别成js表达式 -->
<img src="/static/imghw/default1.png" data-src="imgUrl" class="lazy" : alt="Vue">
<h2 id="nbsp-指令二-nbsp-绑定事件监听">3. 指令二： 绑定事件监听</h2>
<button v-on:click="test1">test1</button>
<button @click="test1">test1</button>
<button @click="test2('abc')">test2</button> <!--可以传参数 -->
<button @click="test2(msg)">test2</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '<a href="http:www.baidu.com">I Will Back!</a>',
imgUrl: "https://cn.vuejs.org/images/logo.png"
},
methods: {
test1() {
alert('heheh');
},
test2(content){
alert(content);
}
}
})
</script>
</body>
5 Arahan pemaparan bersyarat
Alih keluar pemadaman teg
- v-jika
- v-else
Penulisan:
v-if="表达式"v-else-if="表达式"-
v-else="表达式"
Terpakai kepada: senario dengan frekuensi pensuisan rendah. Ciri: Unsur DOM yang tidak dipaparkan akan dialih keluar secara langsung. Nota: v-if boleh digunakan bersama-sama dengan: v-else-if dan v-else, tetapi struktur tidak boleh "terganggu".
Tambah gaya penyembunyian (paparan: tiada)
- v-show
Penulisan: v-show="表达式" Berkenaan dengan: suis Senario dengan kekerapan yang lebih tinggi.
Ciri-ciri: Elemen DOM yang tidak dipaparkan belum dialih keluar, ia hanya disembunyikan menggunakan gaya
[Nota] Apabila menggunakan v-if, elemen itu mungkin tidak diperoleh, tetapi ia pasti boleh diperoleh menggunakan v- tunjuk.
比较v-if与v-show
v-if是控制元素是否加载到页面上（有性能开销） v-show是控制元素的显示与隐藏 （初始创建时加载一次）
- 如果需要频繁切换 v-show 较好
- 当条件不成立时, v-if 的所有子节点不会解析
<body>
<div id="demo">
<p v-if="ok">成功了</p> <!-- 移除标签删除 -->
<p v-else>失败了</p>
<p v-show="ok">又成功了</p> <!-- 添加样式隐藏 -->
<p v-show="!ok">又失败了</p>
<button @click="ok = !ok">切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#demo',
data: {
ok: false,
}
})
</script>
</body>
6. 总结
一些常用的指令
-
v-text: 更新元素的 textContent -
v-html: 更新元素的 innerHTML -
v-if: 如果为true, 当前标签才会输出到页面 -
v-else: 如果为false, 当前标签才会输出到页面 -
v-show: 通过控制display样式来控制显示/隐藏 -
v-for: 遍历数组/对象 -
v-on: 绑定事件监听, 一般简写为@ -
v-bind: 强制绑定解析表达式, 可以省略v-bind -
v-model: 双向数据绑定 -
ref: 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象 -
v-cloak: 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
更多编程相关知识，请访问：编程入门！！
Atas ialah kandungan terperinci Analisis mendalam sintaks templat dalam Vue: interpolasi dan arahan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1382
52
Cara menambah fungsi ke butang untuk vue
Apr 08, 2025 am 08:51 AM
Anda boleh menambah fungsi ke butang VUE dengan mengikat butang dalam templat HTML ke kaedah. Tentukan kaedah dan tulis logik fungsi dalam contoh Vue.
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
Cara merujuk fail js dengan vue.js
Apr 07, 2025 pm 11:27 PM
Terdapat tiga cara untuk merujuk kepada fail JS dalam vue.js: Secara langsung tentukan jalan menggunakan & lt; skrip & gt; tag ;; import dinamik menggunakan cangkuk kitaran hayat yang dipasang (); dan mengimport melalui Perpustakaan Pengurusan Negeri VUEX.
Cara Menggunakan Watch di Vue
Apr 07, 2025 pm 11:36 PM
Pilihan Watch di Vue.js membolehkan pemaju mendengar perubahan dalam data tertentu. Apabila data berubah, tontonkan mencetuskan fungsi panggil balik untuk melakukan paparan kemas kini atau tugas lain. Pilihan konfigurasinya termasuk segera, yang menentukan sama ada untuk melaksanakan panggilan balik dengan serta -merta, dan mendalam, yang menentukan sama ada untuk mendengarkan secara rekursif terhadap objek atau tatasusunan.
Cara kembali ke halaman sebelumnya oleh Vue
Apr 07, 2025 pm 11:30 PM
Vue.js mempunyai empat kaedah untuk kembali ke halaman sebelumnya: $ router.go (-1) $ router.back () menggunakan & lt; router-link to = & quot;/& quot; Komponen Window.History.Back (), dan pemilihan kaedah bergantung pada tempat kejadian.
Apakah yang dimaksudkan dengan pembangunan Vue Multi-Page?
Apr 07, 2025 pm 11:57 PM
Pembangunan pelbagai halaman Vue adalah cara untuk membina aplikasi menggunakan rangka kerja VUE.JS, di mana permohonan dibahagikan kepada halaman berasingan: Penyelenggaraan kod: Memisahkan aplikasi ke dalam beberapa halaman boleh menjadikan kod lebih mudah untuk dikendalikan dan diselenggarakan. Modularity: Setiap halaman boleh digunakan sebagai modul yang berasingan untuk penggunaan semula dan penggantian mudah. Routing mudah: Navigasi antara halaman boleh diuruskan melalui konfigurasi penghalaan mudah. Pengoptimuman SEO: Setiap halaman mempunyai URL sendiri, yang membantu SEO.
Cara Menanyakan Versi Vue
Apr 07, 2025 pm 11:24 PM
Anda boleh menanyakan versi VUE dengan menggunakan Vue Devtools untuk melihat tab VUE dalam konsol penyemak imbas. Gunakan NPM untuk menjalankan arahan "NPM LIST -G VUE". Cari item VUE dalam objek "Dependencies" fail Package.json. Untuk projek Vue CLI, jalankan perintah "Vue -version". Semak maklumat versi di & lt; skrip & gt; Tag dalam fail HTML yang merujuk kepada fail VUE.
Cara Menggunakan Fungsi Memintas Vue
Apr 08, 2025 am 06:51 AM
Pemintasan fungsi dalam VUE adalah teknik yang digunakan untuk mengehadkan bilangan kali fungsi dipanggil dalam tempoh masa yang ditentukan dan mencegah masalah prestasi. Kaedah pelaksanaan adalah: mengimport perpustakaan lodash: import {debounce} dari 'lodash'; Gunakan fungsi debounce untuk membuat fungsi memintas: const debouncedfunction = debounce (() = & gt; { / logical /}, 500); Panggil fungsi Intercept, dan fungsi kawalan dipanggil paling banyak sekali dalam 500 milisaat.
