Vue内置指令汇总

# Vue内置命令汇总

前文中用过的指令

单向绑定解析表达式，v-bind:xx可以简写为:xx。该指令的意思是将实例的某个值或者某个表达式赋值给标签对应的属性

<a :href="name" ></a>
<!-- 将data中name 赋值给 a标签的href属性 -->

1
2

v-bind属于单向绑定，数据从data-->DOM

双向数据绑定，v-model的简写方式：v-model。只有——有value属性的标签可以使用它。

 <!-- 双向绑定 -->
<input type="text" v-model:value="name"/>
<!-- 简写方式 不加 :value -->
<input type="text" v-model="name"/>

1
2
3
4

双向绑定，数据不仅能从data流向页面，还能从页面流向data。就是说你在页面中输入框改变数值的时候，对应标签的值也会跟着一起变化。

遍历数组/对象/字符串

 <li v-for="item of items" :key="item.id">
      {{ item.name }} - {{ item.price }}
 </li>

1
2
3

绑定事件监听，可简写为@

<button v-on:click="handleClick">Click me</button>
<!-- 简写方式 @ -->
<button @click="myFunction">Click Me</button>

1
2
3

条件渲染-动态控制节点/标签是否存在

<div>
    <p v-if="n===1">Hello11</p>
    <!-- <span>test</span> -->
    <p v-else-if="n===2">Hello22</p>
    <p v-else>Hello33</p>
</div>

1
2
3
4
5
6

判断为false的节点，是不会出现在DOM中的

条件渲染-动态控制节点/标签是否展示，记住是展示，DOM树中有该节点。

<p v-show="showMessage">Hello, Vue!</p>

作用：向指定节点中渲染文本内容。

与的区别是，它会替换掉节点中所有的内容

<!--  下方的hello 会被全部替换成 name所对应的值 -->
<div v-text="name"> hello</div>

1
2

作用：向指定节点中渲染包含html结构的内容。

注意：它会替换掉节点中所有的内容，则不会。同时他还可以识别html结构

<div> hello,{{name}}</div>
<!--  下方的hello 会被全部替换成 name所对应的值 -->
<div v-html="name"> hello</div>

1
2
3

本质是一个特殊属性，Vue实例创建完并接管容器后，会删除掉v-clock属性

用途之一：使用css配合v-clock可以解决网速慢时，页面展示出的问题

<div v-clock> {{name}} </div>
<script type="text/javascrip" src="xxxxxx" ></script>

1
2

让所在节点在初次渲染后，就停止渲染，视为静态内容。就是说后续数据的变化不会引起v-once所在结构的更新

<h2 v-once> 初始化的值：{{name}}</h2>
<!--  假如name的初始值为2，后续即使name的值变为3，该h2标签展示的仍为2 -->

1
2

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。

我们已经介绍了两种在 Vue 中重用代码的方式：组件 (opens new window)和组合式函数 (opens new window)。组件是主要的构建模块，而组合式函数则侧重于有状态的逻辑。另一方面，自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。

一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。

上次更新: 2025/04/23, 16:23:16