Vue中一些常用指令的用法举例

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

1 <div id="app">
2 {{ message }}
3 div>

2. DOM属性绑定： v-bind

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

3. 指令绑定一个事件监听器：v-on 

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

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

1 <div id="app-6">
2   <p>{{ message }}p>
3   <input v-model="message">
4 div>

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

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

6. 列表渲染：v-for

1 <div id="app-4">
2   <ol>
3     <li v-for="todo in todos">
4       {{ todo.text }}
5     li>
6   ol>
7 div>

 1 var app4 = new Vue({
 2   el: '#app-4',
 3   data: {
 4     todos: [
 5       { text: '学习 JavaScript' },
 6       { text: '学习 Vue' },
 7       { text: '整个牛项目' }
 8     ]
 9   }
10 })

用 v-for 把一个数组对应为一组元素

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

1 <ul id="example-2">
2   <li v-for="(item, index) in items">
3     {{ parentMessage }} - {{ index }} - {{ item.message }}
4   li>
5 ul>

一个对象的 v-for

也可以用 v-for 通过一个对象的属性来迭代。比如对象里的属性值value

1 <ul id="v-for-object" class="demo">
2   <li v-for="value in object">
3     {{ value }}
4   li>
5 ul>

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

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

 1 new Vue({
 2   el: '#v-for-object',
 3   data: {
 4     object: {
 5       firstName: 'John',
 6       lastName: 'Doe',
 7       age: 30
 8     }
 9   }
10 })

 

结果：

0. firstName: John

1. lastName: Doe

2. age: 30

 

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

1 <div v-for="item in items" :key="item.id">
2   
3 div>

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

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

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

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

注意，v-show 不支持