-
v-bind:用于响应地更新 HTML 属性。
html<img v-bind:src="imageSrc"> <!-- 简写形式 --> <img :src="imageSrc">
-
v-on:用于监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
html<button v-on:click="handleClick">点击我</button> <!-- 简写形式 --> <button @click="handleClick">点击我</button>
v-model:创建双向数据绑定。它主要用于表单元素
html<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>
-
v-if:根据表达式的真假条件渲染元素。
html<div v-if="showMessage">Hello</div>
-
v-else :与
v-if
或v-else-if
一起使用,表示"否则"的情况。
html
<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>
v-for:基于源数据多次渲染元素或模板块
html
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
v-text :更新元素的textContent
html
<span v-text="message"></span>
-
v-html :更新元素的
innerHTML
。html<div v-html="rawHtml"></div>
-
v-show :根据条件切换元素的 CSS 属性
display
。html<div v-show="isVisible">Hello</div>
v-once:元素和组件只渲染一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
html<span v-once>这个将不会改变: {{ message }}</span>
v-pre:
-
用途 :跳过元素和其子元素的编译过程。这可以用来显示原始的 Mustache 标签。当你只想显示原始的
{``{}}
标签而不是将其解析为数据时,这个指令会很有用。html<span v-pre>{{ 这将不会被编译 }}</span>
输出将是
{``{ 这将不会被编译 }}
而不是解析后的数据。
v-cloak:
- 用途:在元素加载之前保持隐藏。这通常用于解决在 Vue 实例编译结束前,可能会短暂地显示未编译的 Mustache 标签的问题。
html
<div v-cloak>
{{ message }}
</div>
配合 CSS:
html
[v-cloak] {
display: none;
}
当 Vue 实例准备好后,v-cloak
指令将被移除,此时 <div>
将变得可见。
v-memo:
- 用途:为 v-for 或 v-if 提供的元素或组件设置记忆,使得只有在相关响应式依赖发生变化时才会重新渲染。这有助于优化性能,避免不必要的渲染。
html
<div v-for="item in list" :key="item.id" v-memo="[item.id]">
{{ item.text }}
</div>
在这个例子中,只有当 item.id
发生变化时,对应的 <div>
才会重新渲染。