vue2开发中常用的v-xxxx属性介绍和例子

1. v-bind  将属性动态绑定到Vue实例的值。

例子：

2. v-model    用于表单元素的双向数据绑定。

3： v-if / v-else-if / v-else  条件渲染组件或元素。

4. v-show 根据条件显示或隐藏元素（通过display: none实现）。

5. v-for   用于循环渲染列表。

6. v-on   用于监听事件。

7. v-html   将HTML内容插入到DOM中。

8. v-text   将文本内容插入到元素中。

9. v-pre  防止Vue对指定元素进行编译，用于保留原始内容。当你在模板中使用 v-pre 指令时，Vue 不会对该元素及其子元素进行编译。这意味着其中的任何 Mustache 插值 {{ }} 或指令都会被视为普通文本，而不会被 Vue 解析为实际的数据绑定或指令操作。这对于需要在模板中展示原始代码或演示 Vue 模板语法的情况非常有用。

总结：在这个例子中，由于 v-pre 指令存在，Vue 不会解析 {{ message }} 和 v-if 指令。这样，模板会原封不动地显示 {{ message }} 和 <p v-if="isVisible">This is visible</p>，而不会将它们视为数据绑定或条件渲染的逻辑。

10. v-cloak   v-cloak 指令用于防止 Vue 应用程序在加载期间出现闪烁。当 Vue 实例正在加载时，元素上添加了 v-cloak 指令的内容会保持隐藏，直到 Vue 实例完成加载为止。这样可以防止在 Vue 实例加载完成之前用户看到未编译的模板。

步骤：

1. 在 CSS 中定义 v-cloak 的样式，以确保元素在加载期间不可见。
2. 在需要保护免受闪烁影响的元素上添加 v-cloak 指令。
3. 例子
4. 总结：

   在这个示例中，当 Vue 实例加载时，v-cloak 元素会被隐藏（通过 CSS 中的 display: none）。一旦 Vue 实例加载完成并渲染了数据，v-cloak 元素就会显示出来，同时显示动态绑定的 message 数据。

   v-cloak 主要用于确保在 Vue 实例加载期间不会显示未经处理的模板内容，从而提供更加平滑的用户体验。

11. v-once    使元素或组件只渲染一次，之后不会再更新。