Vue的指令集合-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue的指令集合。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

作用：单向数据绑定

用法：

<!-- 完整语法 -->
<div v-bind:href="url">...</div>

<!-- 简写语法 -->
<div :href="url">...</div>

v-bind 指令用于动态绑定HTML属性到Vue实例的数据属性上。例如，在上面的例子中，当 url 数据属性发生变化时，href 属性值也会相应更新。

用法：

<p>{{ message }}</p>

双大括号内的内容会实时解析为Vue实例对应的数据属性值。在此例中，当 message 数据发生变化时，文本内容会自动更新。

作用：绑定事件监听

用法：

<!-- 完整语法 -->
<button v-on:click="handleClick">点击我</button>

<!-- 简写语法 -->
<button @click="handleClick">点击我</button>

说明：v-on 指令用于监听并处理DOM事件。如上述示例所示，当按钮被点击时，Vue实例中的 handleClick 方法会被调用。

作用：动态控制节点是否存存在

用法：

<div v-if="seen">现在你看到了我</div>
<div v-else-if="hidden">但是你现在看不到我</div>
<div v-else>原来你一直都能看到我</div>

说明：这些条件指令控制元素是否渲染。v-if 在表达式的值为真时渲染元素；v-else-if 提供额外的条件分支；v-else 则表示前面条件都不满足时的备用情况。

用法：

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

v-for 指令用于遍历数组或对象，根据每个项目生成重复的DOM元素。在这个例子中，当 items 数组发生变化时，列表项将会随之更新。

详细说明移步Vue中v-for指令的详细应用与遍历数据说明-CSDN博客

作用：双向数据绑定

用法：

<input v-model="message">

v-model 是双向数据绑定的核心指令，通常用于表单元素，它可以轻松地在视图（input标签）与数据模型之间同步值。

用法：

<child-component v-slot="{ prop1, prop2 }">
  {{ prop1 }} - {{ prop2 }}
</child-component>

v-slot 指令用于定义或接收组件的插槽内容及其作用域插槽变量。在以上示例中，父组件可以访问子组件传递过来的 prop1 和 prop2 属性。

其他指令

v-text指令：

作用：向其所在的节点中渲染文本内容。

与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
v-html指令：
作用：向指定节点中渲染包含html结构的文本。与插值语法的区别：
1. v-html会替换掉节点中所有的内容，{{xx}}则不会。
2. v-html可以识别html结构。
3. 备注：v-html存在一些安全性问题，因为结构中很有可能包含恶意脚本。
v-once指令：
1. v-once所在节点在初次动态渲染后，就视为静态内容了。
2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
v-pre指令：

跳过这个元素和它的子元素的编译过程，一般用在大量不使用Vue语法的结构中。
v-cloak指令（没有值）:
1. 本质是一个特殊属性，Vue接管容器后，会删掉v-cloak属性。
2. 使用css配合v-cloak可以解决网速慢时，页面展示出{{xxx}}的问题。文章来源地址https://www.toymoban.com/news/detail-806962.html