Vue.js常用指令总结

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>