vue的使用

参考官方教程：https://cn.vuejs.org/v2/guide/

数据绑定

• {{ message }}
• v-bind:title="message" 缩写: :title="message"
• v-model="message"

事件监听

• v-on:click="方法名" 缩写：@click="方法名"

条件判断：v-if与v-show

• 基本：v-if="布尔表达式"
• if：<h1 v-if="awesome">Vue is awesome!</h1>
• if(){}else{}:

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

• if(){}else if(){}else{}:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

• template元素，渲染时不包含：

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

• v-show：不支持 template 元素，也不支持 v-else

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

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

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

for循环

类似js，可以对集合、对象做遍历

• 基本：v-for="todo in todos"

遍历对象

实例

<li v-for="value in object">
    {{ value }}
  </li>
  
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

显示：

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

显示：

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

显示：

遍历集合

集合过滤：https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9