Artikel ini membawa anda pengetahuan yang berkaitan tentang vue, yang terutamanya memperkenalkan isu yang berkaitan dengan penggunaan arahan templat VUE ialah sintaks templat yang disediakan oleh vue untuk pembangun digunakan untuk membantu pembangun dalam memaparkan halaman saya harap ia akan membantu semua orang.
[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]
Konsep arahan
Arahan ialah sintaks templat yang disediakan oleh Vue untuk pembangun untuk membantu pembangun dalam memberikan struktur asas halaman.
Arahan dalam vue boleh dibahagikan kepada 6 kategori berikut mengikut kegunaan berbeza:
Arahan pemaparan kandungan v-teks { { }} v-html
Arahan mengikat atribut v-bind => > :
V-model arahan pengikatan dua hala@
- Arahan pemaparan bersyarat v-jika v-tunjukkan
- Arahan pemaparan senarai v-untuk
- Perintah pemaparan kandungan Perintah pemaparan kandungan digunakan untuk membantu pembangun dalam mempersembahkan kandungan teks bagi elemen DOM. Terdapat tiga arahan pemaparan kandungan yang biasa digunakan:
v-text
{
{ }}
Arahan teks-v akan mengatasi nilai lalai dalam elemen
- {{ }} sintaks, khusus digunakan untuk menyelesaikan masalah bahawa teks-v akan menimpa kandungan teks lalai. Nama teknikal untuk sintaks {
{ }} ini ialah ungkapan interpolasi. Tidak menulis ganti kandungan teks lalai dalam elemen.
-
arahan teks-v dan ungkapan interpolasi hanya boleh memaparkan kandungan teks biasa dan boleh menjadikan rentetan yang mengandungi teg HTML ke dalam elemen HTML halaman
Arahan mengikat atribut-
Jika anda perlu mengikat nilai atribut
secara dinamik
atribut
elemen v-bind, anda perlu menggunakan Arahan mengikat atribut
Memandangkan arahan v-bind digunakan sangat kerap dalam pembangunan, vue secara rasmi menyediakannya dengan singkatan v-bind (singkatan ialah
dalam bahasa Inggeris) )
Contoh kod: :Dalam sintaks pemaparan templat yang disediakan oleh vue, selain menyokong pengikatan nilai data mudah, ia juga menyokong operasi ungkapan Javascript ,
nbsp;html>
<meta>
<meta>
<meta>
<title>v-bind 属性绑定指令</title>
<!-- 1.导入vue 的库文件，在window 全局就有了vue这个构造函数 -->
<script></script>
<!-- 3.vue 能控制下面这个div 帮我们把数据填充到div内部 -->
<div>
<input>
<hr>
<img alt="Penjelasan terperinci tentang penggunaan arahan sintaks templat vue" >
<hr>
<div>tips翻转的结果是：{{ tips.split('').reverse().join('')}}</div>
</div>
<!-- 2.创建vue实例对象 -->
<script>
// 创建vue的实例对象
const vw = new Vue({
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
tips: "请输入内容",
photo: "https://cdn.segmentfault.com/r-ce71be5c/static/logo-b.d865fc97.svg"
}
})
</script>
Salin selepas log masuk
Arahan mengikat acara
vue menyediakan 
arahan mengikat acara v-on
, gunakan Untuk membantu pengaturcara dalam mengikat pendengar acara kepada elemen DOM. Format sintaks adalah seperti berikut:
v-on
Nota: Objek DOM asli mempunyai peristiwa asli seperti onclick, oninput, onkeyup, dll. Selepas menggantikannya dengan borang pengikatan acara vue, ialah: v-on:click, v-on:input, v-on:keyup
Fungsi pemprosesan acara yang diikat oleh v-on perlu diisytiharkan dalam nod kaedah
Memandangkan arahan v-on digunakan sangat kerap dalam pembangunan, vue secara rasmi menyediakan singkatan untuknya (singkatan ialah
dalam bahasa Inggeris).
Contoh kod: @
Pengubah suai acara 
Panggil
atau
dalam fungsi pengendali acara Ya Sangat keperluan biasa. Oleh itu,
nbsp;html>
<meta>
<meta>
<meta>
<title>v-on 事件绑定指令</title>
<!-- 3.希望vue 能控制下面这个div 帮我们把数据填充到div内部 -->
<div>
<h3>count的值为{{count}}</h3>
<!-- 可以给函数加(形参) -->
<!-- <button v-on:click="add(2)">+1</button>
<button v-on:click="sub">-1</button> -->
<!-- v-on 简写@ -->
<button>+1</button>
<button>-1</button>
</div>
<!-- 1.导入vue 的库文件，在window 全局就有了vue这个构造函数 -->
<script></script>
<!-- 2.创建vue实例对象 -->
<script>
// 创建vue的实例对象
const vm = new Vue({
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
count: 0
},
methods:{
// add: function(){
// console.log("OK");
// }, 简写
add(n){
// 控制台打印详细信息出来
console.log(vm);
// this.count += 1;
this.count += n;
},
sub(){
this.count -= 1;
}
}
})
</script>
Salin selepas log masuk
menyediakan konsep
pengubah suai acara
untuk membantu pengaturcara untuk lebih mudah
mengawal pencetusan acara event.preventDefault(). Lima pengubah suai acara yang biasa digunakan adalah seperti berikut: event.stopPropagation()vueFormat sintaks adalah seperti berikut:
Contoh kod:
V-model arahan mengikat dua hala
vue menyediakan
arahan mengikat data dua hala model v
untuk membantu pembangun apabila
nbsp;html>
<meta>
<meta>
<meta>
<title>事件修饰符</title>
<!-- 3.希望vue 能控制下面这个div 帮我们把数据填充到div内部 -->
<!-- <div id="app">{{ username }}</div> -->
<div>
<a>跳转到百度页面</a>
</div>
<!-- 1.导入vue 的库文件，在window 全局就有了vue这个构造函数 -->
<script></script>
<!-- 2.创建vue实例对象 -->
<script>
// 创建vue的实例对象
const vw = new Vue({
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
},
methods:{
show(e){
// 在控制台输出，阻止浏览器跳转
e.preventDefault()
console.log('点击了a连接');
}
}
})
</script>
Salin selepas log masuk
tidak beroperasi Di bawah premis DOM
,
dapatkan data borang dengan cepat
. Pengubah suai arahan v-modelBagi memudahkan pemprosesan input pengguna, vue menyediakan 3 pengubah untuk arahan v-model, iaitu:
条件渲染指令
条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：
v-if 和 v-show 的区别
实现原理不同：
性能消耗不同：
代码案例：
nbsp;html>
<meta>
<meta>
<meta>
<title>条件渲染指令</title>
<div>
<p>v-if 控制</p>
<p>v-show控制</p>
</div>
<script></script>
<script>
const vw = new Vue({
el: '#app',
data:{
// 如果为true,都显示；否则控制台只显示v-show代码被隐藏，v-if直接被移除了
flag: true
}
})
</script>
Salin selepas log masuk
列表渲染指令
vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用 item in items 形式的特殊语法，其中:
items 是待循环的数组
item 是被循环的每一项
【相关推荐：javascript视频教程、web前端】
Atas ialah kandungan terperinci Penjelasan terperinci tentang penggunaan arahan sintaks templat vue. 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)
