Vue.js的指令作用于HTML元素，以v-开头，例如v-model、v-bind等将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，可以将指令看作特殊的HTML属性（attribute）。

v-text

渲染一个数据，可以与下面v-html的对比理解

v-html

渲染带html标签的数据

<div id="app">
        <p v-cloak>{
   { msg }}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p>
    </div>
    <script type="text/javascript"> new Vue({ el : "#app", data : { msg : "<h1>这是一个h1元素内容</h1>" } }); </script>

在这里插入图片描述

v-once

渲染一次，之后不再变化

v-bind

绑定html标签属性

<a v-bind:href="url">Google</a>
<!-- 也可以省略冒号前的部分 -->
<a :href="url">Google</a>
<script> new Vue({ el: "#app" data: { url: 'https://google.com' } }) </script>

也可以借助Vue对象间接绑定

<a :[attribute]="google">Google</a>
<!-- 绑定属性 -->
<a v-bind="{ href: google, id: number }">Google</a>
<!-- 通过对象间接绑定属性 -->
<a v-bind="googleObject">Google</a>
<script> new Vue({ el: "#app" data: { google: 'https://google.com' baidu: 'https://baidu.com' number: 1 attribute: 'href' googleObject: { href: 'https://google.com', id: 1 } } }) </script>

v-on

让Vue感知Dom的事件

<p v-on:click="countUp">{
   { number }}次点击</p>
<!-- 使用@的省略写法 --->
<p @click="countUp">{
   { number }}次点击</p>
<!-- 可以动态指定事件类型 --->
<p @[event]="countUp">{
   { number }}次点击</p>
<script> new Vue({ el: "#app" data: { number: 0, event: 'click' } }, methods: { countUp: function() { this.number += 1 } } }) </script>

对于常见事件，Vue中提供了事件修饰符，处理常见逻辑

<!-- prevent用来拦截跳转 -->
<a v-on:click.prevent href="https://google"></a>

对于一些按键事件，Vue也提供了按键修饰符

<!-- 按下enter键，myFunc被调用 -->
<input type="text" v-on:keyup.enter="myFunc" />

v-model

Dom与Vue的双向绑定，model发生更新时实时更新UI

<div id="app">
  <input type="text" v-model="message" />
  <h1>{
   { message }}</h1>
</div>
<script> new Vue({ el: "#app", data: { message: 'Hello World!' } }) </script>

v-if

满足条件时，进行渲染

<div id="app">
  <h1 v-if="visible">Text</h1>
  <!--template标签也可用-->
  <template v-if="visible">
    <h1>Text1</h1>
    <h1>Text2</h1>
    <h1>Text3</h1>
  </template>
  <button @click="visible = !visible">
    {
   { visible ? "显示" : "隐藏"}}
  </button>
</div>
<script> new Vue({ el: "#app", data: { visible: true } }) </script>

v-show

通过控制样式 display:none来控制元素的显隐。
在显隐逻辑控制上比起v-if性能更高，适合大量地、频繁变动的场景使用

<div id="app">
  <h1 v-show="visible">Text</h1>
  <button @click="visible = !visible">
    {
   { visible ? "显示" : "隐藏"}}
  </button>
</div>
<script> new Vue({ el: "#app", data: { visible: true } }) </script>

v-else

不满足条件时渲染，必须用跟在v-if后使用

<div id="app">
  <p v-if="visible">OK!</p>
  <p v-else="visible">Not OK...</p>
  <button @click="visible = !visible">
    翻转
  </button>
</div>
<script> new Vue({ el: "#app", data: { visible: true } }) </script>

v-else-if

也是必须跟在v-if之后使用

<div id="app">
  <p v-if="count == 0">Count = 0</p>
  <p v-else-if="count >= 1 && count <= 5">1 ≤ Count ≤ 5</p>
  <p v-else> Conut > 6 </p>
  <button @click="count += 1">
    +1
  </button>
</div>
<script> new Vue({ el: "#app", data: { count: 0 } }) </script>

v-for

循环执行渲染，可以取到当前index

遍历数组：

<div id="app">
  <ul>
    <li v-for="fruit in fruits">{
   {fruit}}</li>
  </ul>
  <ul>
      <li v-for="(fruit, index) in fruits">{
   {index}}{
   {fruit}}</li>
    </ul>
  <ul>
    <template v-for="fruit in fruits">
      <li>{
   {fruit}}</li>
      <hr>
    </template>
  </ul>
</div>
<script> new Vue({ el: "#app", data: { fruits: ['苹果', '香蕉', '葡萄'] } }) </script>

遍历对象：

<div id="app">
  <ul>
    <li v-for="value in object">{
   {value}}</li>
  </ul>
  <ul>
    <li v-for="(value, key, index) in object">{
   {index}}{
   {key}}{
   {value}}</li>
  </ul>
</div>
<script> new Vue({ el: "#app", data: { object: { firstName: 'Steve', lastName: 'Jobs', age: 20 } } }) </script>

v-for中尽量带上key，有助于提高性能。vue在渲染时通过key可以最大限度复用dom避免重建

<div id="app">
  <ul>
    <div v-for="fruit in fruits" :key="fruit">
      <p>{
   {fruit}}</p>
      <input />
    </div>
  </ul>
  <button @click="remove">删除头部元素</button>
</div>
<script> new Vue({ el: "#app", data: { fruits: ['苹果', '香蕉', '葡萄'] }, methods: { remove: function () { this.fruits.shift() } } }) </script>