文章目录
前言
在Vue.js的世界里，指令是连接数据和视图的桥梁，它们为开发者提供了一种声明式的方法来处理常见的任务。本文将详细介绍Vue.js中的内置指令，包括它们的用法、示例以及浏览器执行的结果。通过这些指令，我们可以更高效地构建动态和响应式的用户界面。在开始之前，建议读者查阅Vue.js的官方文档，以便更深入地理解每个指令的内部机制和最佳实践。
Vue.js 内置指令详解
v-text
v-text指令用于更新元素的文本内容，如果渲染的内容包含HTML标签，它们不会被解析，类似于JavaScript中的innerText属性
示例
<template>
<div>
<h1>Vue的内置指令</h1>
<p v-text="msg1"></p>
<p v-text="msg2"></p>
</div>
</template>
<script setup>
const msg1 = '这是没有html语句的v-text'
const msg2 = '<strong>这是有html语句的v-text</strong>'
</script>
<style scoped>
</style>
游览器执行的结果
v-html
v-html指令用于更新元素的innerHTML。与v-text不同，如果渲染的内容包含HTML标签，它们会被解析。
示例
<template>
<div>
<h1>Vue的内置指令</h1>
<p v-html="msg3"></p>
<p v-html="msg4"></p>
</div>
</template>
<script setup>
const msg3 = '这是没有html语句的v-html'
const msg4 = '<strong>这是有html语句的v-html</strong>'
</script>
游览器执行的结果
v-show
基于表达式值的真假性，来改变元素的可见性。
传入一个布尔类型的值，控制dom元素的display显隐，元素会存在dom树中
示例
<template>
<div>
<h1>Vue的内置指令</h1>
<p v-show="true">这是一条v-show控制显示dom元素</p>
<p v-show="false">这是一条v-show控制隐藏dom元素</p>
</div>
</template>
游览器运行结果
v-if
基于表达式值的真假性，来条件性地渲染元素或者模板片段。
如果初始条件是假，那么其内部的内容根本都不会被渲染。元素不会存在DOM树中
频繁使用v-if控制显隐，增加游览器渲染压力
示例
<template>
<div>
<h1>Vue的内置指令</h1>
<p v-if="true">这是一条v-if控制显示dom元素</p>
<p v-if="false">这是一条v-if控制隐藏dom元素</p>
</div>
</template
游览器运行结果
v-else
表示 v-if 或 v-if / v-else-if 链式调用的“else 块”。
上一个兄弟元素必须有 v-if 或 v-else-if。
示例
<template>
<div>
<h1>Vue的内置指令</h1>
<p v-if="age>18">成年人</p>
<p v-else>未成年</p>
</div>
</template>
<script setup>
const age = 17
</script>
游览器运行结果
v-else-if
表示 v-if 的“else if 块”。可以进行链式调用。
上一个兄弟元素必须有 v-if 或 v-else-if。
示例
<template>
<div>
<h1>Vue的内置指令</h1>
<p v-if="age>65">老年人</p>
<p v-else-if="age>18">成年人</p>
<p v-else>未成年</p>
</div>
</template>
<script setup>
const age = 25
</script>
游览器运行结果
v-for
基于原始数据多次渲染元素或模板块。
语法
<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>
示例
<template>
<div>
<h1>Vue的内置指令</h1>
<p v-for="item in data">{{ item }}</p>
</div>
</template>
<script setup>
const data = ['html','css','javascript']
</script>
游览器运行结果
v-on
给元素绑定事件监听器。
可以缩写成 @
- 参数：
event(使用对象语法则为可选项)
当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。
示例
<!-- 方法处理函数 -->
<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>
v-bind
动态的绑定一个或多个 attribute，也可以是组件的 prop。
可以缩写成L: 或 .
示例
<template>
<div>
<h1>Vue的内置指令</h1>
<p :class="p1">这是一个p标签</p>
<img :src="img" alt="">
</div>
</template>
<script setup>
const p1 = 'my-custom-color'
const img = 'https://img2.baidu.com/it/u=1359472001,3978182478&fm=253&fmt=auto&app=120&f=JPEG?w=885&h=500'
</script>
<style scoped>
.my-custom-color{
color: red;
}
</style>
游览器运行结果
v-module
在表单输入元素或组件上创建双向绑定。
根据表单输入元素或组件输出的值而变化
- 仅限：
<input><select><textarea>- components
示例
<template>
<div>
<input v-model="msg" type="text">
<p>{{ msg }}</p>
</div>
</template>
<script setup>
import {ref} from 'vue'
const msg = ref('这是一条双向绑定的数据')
</script>
游览器运行结果
v-slot
用于定义插槽的内容，是组件插槽系统的一个部分。
示例
vue
<template>
<div>
<h1>Vue的内置指令</h1>
<child-component>
<template v-slot:default="slotProps">
<p>{{ slotProps.message }}</p>
</template>
</child-component>
</div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
</script>
游览器运行结果
ChildComponent 组件的默认插槽会被填充，显示传递给插槽的 message。
v-pre
跳过这个元素和它的子元素的编译过程。
示例
vue
<template>
<div>
<h1>Vue的内置指令</h1>
<span v-pre>{{ { message: 'Hello Vue!' } }}</span>
</div>
</template>
游览器运行结果
span 标签会直接显示 { message: 'Hello Vue!' } 而不是解析为对象。
v-once
只渲染元素或子元素一次，随后的 DOM 更新不会影响它们。
示例
vue
<template>
<div>
<h1>Vue的内置指令</h1>
<p v-once>这个内容只会渲染一次</p>
</div>
</template>
游览器运行结果
由于 v-once 指令使得内容只渲染一次，所以任何后续的数据变化都不会更新这个 p 标签的内容。
v-memo
这个指令用于缓存模板的一部分，以便在数据变化时避免不必要的重新渲染。
示例
vue
<template>
<div>
<h1>Vue的内置指令</h1>
<div v-memo="memoKey">
<!-- 这里是一些复杂的模板 -->
</div>
</div>
</template>
<script setup>
const memoKey = 'unique-key'
</script>
游览器运行结果
只有当 memoKey 对应的数据发生变化时，这个 div 及其子元素才会重新渲染。
v-cloak
这个指令用于在 Vue.js 应用完全编译完成之前保持原始内容可见。
示例
vue
<template>
<div>
<h1>Vue的内置指令</h1>
<p v-cloak>{{ message }}</p>
</div>
</template>
<script setup>
const message = 'Hello Vue!'
</script>
游览器运行结果
在 Vue.js 编译完成之前，p 标签会显示原始内容，编译完成后，会显示 Hello Vue!。
结尾
通过本文的介绍，我们可以看到Vue.js的内置指令是如何简化前端开发的。它们不仅提高了开发效率，还增强了代码的可读性和可维护性。掌握这些指令，你将能够更加灵活地构建响应式和动态的Web应用。希望这篇文章能够帮助你更好地理解和使用Vue.js的指令系统。如果你对某个指令有更深入的问题或想要了解更多细节，请访问Vue.js的官方文档。
标签：内置,示例,游览器,js,Vue,指令,元素 From： https://blog.csdn.net/2302_80412007/article/details/143373224