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)
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>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.
$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>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:
class atau style, v-bind menyokong jenis nilai tambahan seperti Array atau objek. Lihat pautan panduan di bawah untuk butiran. 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. <!-- 绑定 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>Penjelasan: bersyarat berdasarkan kebenaran atau kepalsuan unsur Render nilai ungkapan atau serpihan templat.
<h2 v-if="isShow">哈哈哈哈</h2>
说明： 表示 v-if 或 v-if / v-else-if 链式调用的“else 块”。
<h2 v-if="isShow">Coder</h2> <h2 v-else>Bin</h2>
ishow 为 true 显示 Coder，反之显示 Bin
说明： 表示 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>
v-model 后面会说明
说明：基于表达式值的真假性，来改变元素的可见性。
详细描述：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>v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。
说明： 在表单输入元素或组件上创建双向绑定。
仅限： <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');绑定其他表单：
<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>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>说明： 基于原始数据多次渲染元素或模板块。
详细描述：
指令值必须使用特殊语法 alias in expression 为正在迭代的元素提供一个别名：
<div v-for="item in items">
{{ item.text }}
</div>或者，你也可以为索引指定别名 (如果用在对象，则是键值)：
<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>
v-for 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>说明： 用于声明具名插槽或是期望接收 props 的作用域插槽。
缩写： #
参数：插槽名 (可选，默认是 default)
仅限：
<template>示例
<!-- 具名插槽 -->
<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>说明： 更新元素的文本内容。
详细描述： v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent 的部分，应该使用 mustache interpolations 代替。
<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>说明： 更新元素的 innerHTML。
详细描述： v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。
安全说明: 在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值
<div v-html="html"></div>
说明： 跳过该元素及其所有子元素的编译。
详细描述：元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。
<span v-pre>{{ this will not be compiled }}</span>说明： 跳过该元素及其所有子元素的编译。
详细描述： 在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。
<!-- 单个元素 -->
<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>说明： 用于隐藏尚未完成编译的 DOM 模板。
详细描述：该指令只在没有构建步骤的环境下需要使用。
v-cloak 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像 [v-cloak] { display: none } 这样的 CSS 规则，它可以在组件编译完毕前隐藏原始模板。[v-cloak] {
display: none;
}<div v-cloak>
{{ message }}
</div>更多编程相关知识，请访问：编程入门！！
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)
