Vue.js 中的指令有哪些？它们分别是做什么的？

发表于 作者 IT之美

Vue.js 中主要有以下指令:

  1. v-text:更新元素的 textContent。
html
<span v-text="msg"></span>
js
data: {
  msg: 'Hello!'
}
  1. v-html:更新元素的 innerHTML。
html
<span v-html="msg"></span>
  1. v-show:根据表达式的真假值,切换元素的 display CSS 属性。
html  
<span v-show="shown">Hello!</span>
  1. v-if:根据表达式的值的真假条件渲染元素。
html
<span v-if="shown">Hello!</span>
  1. v-else:v-if 的 “else 块”。
html
<span v-if="shown">Yes</span>
<span v-else>No</span>
  1. v-for:基于源数据多次渲染元素或模板块。
html
<span v-for="item in items">{{ item }}</span>
  1. v-on:绑定事件监听器。
html
<button v-on:click="doSomething">...</button>
  1. v-bind:动态地绑定一个或多个属性。
html  
<span v-bind:title="msg">...</span>
  1. v-model:在表单元素上创建双向数据绑定。
html
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
  1. v-slot、v-pre、v-cloak、v-once 等。

以上是 Vue.js 中常用的指令,它们扩展了 HTML,为视图提供更加丰富的功能,并与底层数据实现双向绑定。理解每种指令的作用,能够让我们的代码变得更加简洁高效。