Artikel ini menyemak dan meringkaskan semua arahan terbina dalam Vue Beberapa arahan biasa akan diterangkan terlebih dahulu, dan arahan yang kurang biasa digunakan akan diletakkan kemudian.
![Artikel untuk membincangkan tentang arahan terbina dalam yang biasa digunakan dalam Vue [Ensiklopedia]](https://img.php.cn/upload/article/000/000/024/6317346558d43591.jpg)
0 Ungkapan Interpolasi
Penjelasan: Ungkapan Interpolasi juga dipanggil Sintaks Misai (iaitu pendakap berganda), teg pendakap berganda akan digantikan dengan nilai atribut msg dalam contoh komponen yang sepadan. Pada masa yang sama, ia juga akan dikemas kini secara serentak setiap kali atribut msg berubah. [Cadangan berkaitan: tutorial video vuejs]
<template id="my-app">
<!-- 1.mustache的基本使用 -->
<h2>{{message}} - {{message}}</h2>
<!-- 2.是一个表达式 -->
<h2>{{counter * 10}}</h2>
<h2>{{ message.split(" ").reverse().join(" ") }}</h2>
<!-- 3.也可以调用函数 -->
<!-- 可以使用computed(计算属性) -->
<h2>{{getReverseMessage()}}</h2>
<!-- 4.三元运算符 -->
<h2>{{ isShow ? "哈哈哈": "" }}</h2>
<button @click="toggle">切换</button>
<!-- 错误用法 -->
<!-- var name = "abc" -> 赋值语句 -->
<!-- <h2>{{var name = "abc"}}</h2>
<h2>{{ if(isShow) { return "哈哈哈" } }}</h2> -->
</template>Salin selepas log masuk
1 v-on
Arahan: kepada elemen Mengikat pendengar acara.
Singkatan: @
Parameter: event (pilihan apabila menggunakan sintaks objek)
Pengubah suai:
-
.stop - hubungi event.stopPropagation().
-
.prevent - Panggil event.preventDefault().
-
.capture - Tambahkan pendengar acara dalam mod tangkapan.
-
.self - Fungsi pengendali hanya dicetuskan apabila acara dipancarkan daripada elemen itu sendiri.
-
.{keyAlias} ——Fungsi pengendali hanya dicetuskan di bawah kekunci tertentu.
-
.once - cetuskan fungsi pemprosesan paling banyak sekali.
-
.left - Fungsi pengendali hanya dicetuskan pada acara butang tetikus kiri.
-
.right - Fungsi pengendali hanya dicetuskan pada acara butang tetikus kanan.
-
.middle - Fungsi pengendali hanya dicetuskan pada peristiwa butang tengah tetikus.
-
.passive - Lampirkan acara DOM melalui { passive: true }.
-
Penerangan terperinci: Jenis acara ditentukan oleh parameter. Ungkapan itu boleh menjadi nama kaedah, pengisytiharan sebaris, atau boleh ditinggalkan jika pengubah suai hadir.
- Apabila digunakan untuk elemen biasa, hanya dengar acara DOM asli. Apabila digunakan dalam komponen elemen tersuai, dengar peristiwa tersuai yang dicetuskan oleh komponen anak.
- Apabila mendengar acara DOM asli, kaedah menerima peristiwa asli sebagai satu-satunya parameter. Jika pengisytiharan sebaris digunakan, pengisytiharan itu mempunyai akses kepada pembolehubah
$event khas: v-on:click="handle('ok', $event)".
-
v-on juga menyokong objek mengikat pasangan acara/pendengar tanpa parameter. Ambil perhatian bahawa apabila menggunakan sintaks objek, tiada pengubah suai disokong.
<!-- 方法处理函数 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>
<!-- 内联声明 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 使用缩写的动态事件 -->
<button @[event]="doThis"></button>
<!-- 停止传播 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认事件 -->
<button @click.prevent="doThis"></button>
<!-- 不带表达式地阻止默认事件 -->
<form @submit.prevent></form>
<!-- 链式调用修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 按键用于 keyAlias 修饰符-->
<input @keyup.enter="onEnter" />
<!-- 点击事件将最多触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>Salin selepas log masuk
Penerangan: Ikat satu atau lebih atribut secara dinamik, yang juga boleh menjadi prop komponen.
Singkatan: : atau . (apabila menggunakan .prop pengubah suai)
Pengubah suai:
.camel - Tukar atribut yang dinamakan dengan sempang kepada penamaan kotak unta. .prop - terikat paksa pada harta DOM. 3.2 .attr - Paksa mengikat pada atribut DOM. 3.2
Tujuan:
- Apabila digunakan untuk mengikat atribut
class atau style, v-bind menyokong jenis nilai tambahan seperti Array atau objek. Lihat pautan panduan di bawah untuk butiran. - Apabila memproses pengikatan, Vue akan menggunakan operator
in secara lalai untuk menyemak sama ada sifat DOM dengan nama yang sama dengan kunci terikat ditakrifkan pada elemen. Jika sifat dengan nama yang sama wujud, Vue akan menetapkannya sebagai sifat DOM dan bukannya menetapkannya sebagai atribut. Tingkah laku ini konsisten dengan jenis nilai pengikatan yang dijangkakan dalam kebanyakan kes, tetapi anda juga boleh memaksa mengikat secara eksplisit menggunakan pengubah suai .prop dan .attr. Kadang-kadang ini perlu, terutamanya apabila berurusan dengan elemen tersuai. - Apabila digunakan untuk mengikat prop komponen, prop terikat mesti diisytiharkan dengan betul dalam komponen anak.
- Apabila digunakan tanpa parameter, ia boleh digunakan untuk mengikat objek yang mengandungi berbilang pasangan nilai mengikat nama atribut.
<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />
<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>
<!-- 缩写 -->
<img :src="imageSrc" />
<!-- 缩写形式的动态 attribute 名 -->
<button :[key]="value"></button>
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定对象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- prop 绑定。“prop” 必须在子组件中已声明。 -->
<MyComponent :prop="someThing" />
<!-- 传递子父组件共有的 prop -->
<MyComponent v-bind="$props" />
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>Salin selepas log masuk
3. v-jika
Penjelasan: bersyarat berdasarkan kebenaran atau kepalsuan unsur Render nilai ungkapan atau serpihan templat.
<h2 v-if="isShow">哈哈哈哈</h2>
Salin selepas log masuk
4. v-else
说明： 表示 v-if 或 v-if / v-else-if 链式调用的“else 块”。
<h2 v-if="isShow">Coder</h2>
<h2 v-else>Bin</h2>
Salin selepas log masuk
ishow 为 true 显示 Coder，反之显示 Bin
5. v-else-if
说明： 表示 v-if 的“else if 块”。可以进行链式调用。
<template id="my-app">
<input type="text" v-model="score">
<h2 v-if="score > 90">优秀</h2>
<h2 v-else-if="score > 60">良好</h2>
<h2 v-else>不及格</h2>
</template>
Salin selepas log masuk
v-model 后面会说明
6. v-show
说明：基于表达式值的真假性，来改变元素的可见性。
详细描述：v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。当条件改变时，也会触发过渡效果。
<template id="my-app">
<h2 v-show="isShow">哈哈哈哈</h2>
</template>
<script>
const App = {
template: '#my-app',
data() {
return {
isShow: true
}
}
}
Vue.createApp(App).mount('#app');
</script>Salin selepas log masuk
v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。
7. v-model
说明： 在表单输入元素或组件上创建双向绑定。
仅限： <input>、<select>、 <textarea>、components
修饰符：
基本使用：
<template id="my-app">
<!-- 1.v-bind value的绑定 2.监听input事件, 更新message的值 -->
<!-- <input type="text" :value="message" @input="inputChange"> -->
<input type="text" v-model="message">
<h2>{{message}}</h2>
</template>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World"
}
},
methods: {
inputChange(event) {
this.message = event.target.value;
}
}
}
Vue.createApp(App).mount('#app');Salin selepas log masuk
绑定其他表单：
<template id="my-app">
<!-- 1.绑定textarea -->
<label for="intro">
自我介绍
<textarea name="intro" id="intro" cols="30" rows="10" v-model="intro"></textarea>
</label>
<h2>intro: {{intro}}</h2>
<!-- 2.checkbox -->
<!-- 2.1.单选框 -->
<label for="agree">
<input id="agree" type="checkbox" v-model="isAgree"> 同意协议
</label>
<h2>isAgree: {{isAgree}}</h2>
<!-- 2.2.多选框 -->
<span>你的爱好: </span>
<label for="basketball">
<input id="basketball" type="checkbox" v-model="hobbies" value="basketball"> 篮球
</label>
<label for="football">
<input id="football" type="checkbox" v-model="hobbies" value="football"> 足球
</label>
<label for="tennis">
<input id="tennis" type="checkbox" v-model="hobbies" value="tennis"> 网球
</label>
<h2>hobbies: {{hobbies}}</h2>
<!-- 3.radio -->
<span>你的爱好: </span>
<label for="male">
<input id="male" type="radio" v-model="gender" value="male">男
</label>
<label for="female">
<input id="female" type="radio" v-model="gender" value="female">女
</label>
<h2>gender: {{gender}}</h2>
<!-- 4.select -->
<span>喜欢的水果: </span>
<select v-model="fruit" multiple size="2">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
<h2>fruit: {{fruit}}</h2>
</template>
<script>
const App = {
template: '#my-app',
data() {
return {
intro: "Hello World",
isAgree: false,
hobbies: ["basketball"],
gender: "",
fruit: "orange"
}
},
methods: {
commitForm() {
axios
}
}
}
Vue.createApp(App).mount('#app');
</script>Salin selepas log masuk
v-model修饰符的使用
<template id="my-app">
<!-- 1.lazy修饰符 -->
<!-- <input type="text" v-model.lazy="message"> -->
<!-- 2.number修饰符 -->
<!-- <input type="text" v-model.number="message">
<h2>{{message}}</h2>
<button @click="showType">查看类型</button> -->
<!-- 3.trim修饰符 -->
<input type="text" v-model.trim="message">
<button @click="showResult">查看结果</button>
</template>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World"
}
},
methods: {
showType() {
console.log(this.message, typeof this.message);
},
showResult() {
console.log(this.message);
}
}
}
Vue.createApp(App).mount('#app');
</script>Salin selepas log masuk
8. v-for
说明： 基于原始数据多次渲染元素或模板块。
详细描述：
指令值必须使用特殊语法 alias in expression 为正在迭代的元素提供一个别名：
<div v-for="item in items">
{{ item.text }}
</div>Salin selepas log masuk
或者，你也可以为索引指定别名 (如果用在对象，则是键值)：
<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>
Salin selepas log masuk
v-for 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>Salin selepas log masuk
9. v-slot
说明： 用于声明具名插槽或是期望接收 props 的作用域插槽。
缩写： #
参数：插槽名 (可选，默认是 default)
仅限：
示例
<!-- 具名插槽 -->
<BaseLayout>
<template v-slot:header>
Header content
</template>
<template v-slot:default>
Default slot content
</template>
<template v-slot:footer>
Footer content
</template>
</BaseLayout>
<!-- 接收 prop 的具名插槽 -->
<InfiniteScroll>
<template v-slot:item="slotProps">
<div class="item">
{{ slotProps.item.text }}
</div>
</template>
</InfiniteScroll>
<!-- 接收 prop 的默认插槽，并解构 -->
<Mouse v-slot="{ x, y }">
Mouse position: {{ x }}, {{ y }}
</Mouse>Salin selepas log masuk
10. v-text
说明： 更新元素的文本内容。
详细描述： v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent 的部分，应该使用 mustache interpolations 代替。
<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>Salin selepas log masuk
11. v-html
说明： 更新元素的 innerHTML。
详细描述： v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。
安全说明:
在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值
<div v-html="html"></div>
Salin selepas log masuk
12. v-pre
说明： 跳过该元素及其所有子元素的编译。
详细描述：元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。
<span v-pre>{{ this will not be compiled }}</span>Salin selepas log masuk
13. v-once
说明： 跳过该元素及其所有子元素的编译。
详细描述： 在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 带有子元素的元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- 组件 -->
<MyComponent v-once :comment="msg" />
<!-- `v-for` 指令 -->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>Salin selepas log masuk
14. v-cloak
说明： 用于隐藏尚未完成编译的 DOM 模板。
详细描述：该指令只在没有构建步骤的环境下需要使用。
- 当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。
v-cloak 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像 [v-cloak] { display: none } 这样的 CSS 规则，它可以在组件编译完毕前隐藏原始模板。
[v-cloak] {
display: none;
}Salin selepas log masuk
<div v-cloak>
{{ message }}
</div>Salin selepas log masuk
更多编程相关知识，请访问：编程入门！！
Atas ialah kandungan terperinci Artikel untuk membincangkan tentang arahan terbina dalam yang biasa digunakan dalam Vue [Ensiklopedia]. 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)
