v-for,v-on,v-show,v-if

一、v-for 列表渲染

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

image.png

key

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。在使用v-for时，需要添加key属性，不然会爆错哦。

<div v-for="(item,index) in items" :key="index">
<!-- 内容 -->
</div>

我一般使用上面这种，以循环遍历的index作为key。但当数据量过大时，可能会造成性能负担。此时可使用元素自身的id属性去指定渲染元素的key值有利于单个元素的重新渲染。具体可参数：博客

二、v-on绑定事件

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

其中doSomething是事件名。
它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue.js 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

在封装好的组件上使用，所以要加上.native才能click

最开始在vue官网看到@click.native.prevent是有点懵逼，
然后查了点资料，总结一下：

image.png

• 在封装好的组件上使用，所以要加上.native才能click
• prevent就相当于..event.preventDefault()
  所以@submit.native.prevent是用来阻止默认行为的 ;

三、条件渲染v-if and v-show

没接触vue之前，为了实现可见与不可见，我是用css的display属性。而vue有了v-if与v-show就方便多了，在组件或者Dom上面使用 v-if或v-show，可实现显示或隐藏组件/Dom.

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

区别：

• v-show 只是简单地切换元素的 CSS 属性 display。
• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  v-if在某些时候是非常重要的。在我使用一些第三方组件时，有时组件内的数据更新不及时，这是让人很头痛的事。这时你可以使用v-if销毁组件后再重新更新组件，来达到组件数据更新的目的。