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.
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:
1. Sintaks interpolasi:
{{xxx}}, xxx ialah ungkapan js, dan boleh membaca terus semua atribut dalam data, dan boleh memanggil kaedah objek 2. Sintaks arahan:
v-bind:href="xxx" atau disingkatkan sebagai :href="xxx", xxx juga perlu menulis ungkapan js dan boleh membaca terus semua atribut dalam data v-????
[Cadangan berkaitan: "tutorial vue.js"]
Mari perkenalkan beberapa sintaks arahan biasa di bawah.
v-bind:
Fungsi: Tentukan menukar nilai atribut
Tulisan penuh
v-bind:xxx='yyy' // yyy会作为表达式解析执行
Penulisan ringkas
:xxx='yyy'
Sintaks: v-bind:href ="xxx" atau disingkatkan sebagai :href ="xxx"
Ciri: Data hanya boleh mengalir dari data ke halaman
v-modelSintaks: v-mode:value="xxx" Atau disingkatkan sebagai v-model="xxx"
Ciri: Data bukan sahaja boleh mengalir dari data ke halaman, tetapi juga dari halaman ke data
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'
v-text
Fungsi: Memaparkan kandungan teks ke nod di mana ia berada. Perbezaan antara
dan sintaks interpolasi: v-text akan 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:
v-html akan menggantikan semua kandungan dalam nod, tetapi {{xx}} tidak. v-html boleh mengenal pasti struktur html. 3. Perhatian serius: v-htmlTerdapat isu keselamatan! ! ! !
v-html pada kandungan yang dipercayai, jangan sekali-kali pada kandungan yang diserahkan pengguna! <body>
<div id='app'>
<h2>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>2. 指令一： 强制数据绑定</h2>
<img src="imgUrl" alt="Vue"> <!--无法显示图片，没有识别成js表达式 -->
<img v-bind:src="imgUrl" alt="Vue"> <!--属性值识别成js表达式 -->
<img :src="imgUrl" alt="Vue">
<h2>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>
Alih keluar pemadaman teg
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)
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是控制元素的显示与隐藏 （初始创建时加载一次）
<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>
一些常用的指令
v-text : 更新元素的 textContentv-html : 更新元素的 innerHTMLv-if : 如果为true, 当前标签才会输出到页面v-else: 如果为false, 当前标签才会输出到页面v-show : 通过控制display样式来控制显示/隐藏v-for : 遍历数组/对象v-on : 绑定事件监听, 一般简写为@v-bind : 强制绑定解析表达式, 可以省略v-bindv-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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
