Vue中基本指令用法

指令在Vue中是个很重要的功能，在Vue项目中是必不可少的。根据官网的介绍，指令 (Directives) 是带有 v- 前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1. 文本插值：{{ }} Mustache

 <div id="app">
 {{ message }}
 </div>

2. DOM属性绑定： v-bind，可缩写为 ：（冒号）

<div id="app-2">
 <span v-bind:title="message">
 鼠标悬停几秒钟查看此处动态绑定的提示信息！
 </span>
 </div>

3. 指令绑定一个事件监听器：v-on ，可缩写为@

<div id="app-5">
   <p>{{ message }}</p>
   <button v-on:click="reverseMessage">逆转消息</button>
 </div>

4. 实现表单输入和应用状态之间的双向绑定：v-model

<div id="app-6">
   <p>{{ message }}</p>
   <input v-model="message">
 </div>

5. 控制切换一个元素的显示：v-if 和 v-else

<div id="app-3">
   <p v-if="seen">现在你看到我了</p>
 </div>

6. 列表渲染：v-for

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

用 v-for 把一个数组对应为一组元素
在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
一个对象的 v-for
也可以用 v-for 通过一个对象的属性来迭代。比如对象里的属性值value

 <ul id="v-for-object" class="demo">
   <li v-for="value in object">
     {{ value }}
   </li>
 </ul>

还可以传入第二个参数key 和第三个参数 index，顺序不能乱，否则结果也会乱

<div v-for="(value, key, index) in object">
   {{ index }}. {{ key }}: {{ value }}
 </div>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

结果：

0. firstName: John
1. lastName: Doe
2. age: 30

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：

<div v-for="item in items" :key="item.id">
   <!-- 内容 -->
 </div>

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

7. 根据条件展示元素：v-show

<h1 v-show="ok">Hello!</h1>

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

注意，v-show 不支持 语法，也不支持 v-else。

8. v-if vs v-show

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

9.v-if 与 v-for 一起使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。