理理Vue细节（推荐）

 1. 动态属性名：可使用表达式来设置动态属性名或方法名：

<!-- 属性name -->
<a :[name]="url"> ... </a>
<!-- 计算属性sss和s -->
<img :[sss]="/img/test.png"/>
<!-- 方法change1和change2 -->
<img :[change1()]="change2()"/>
data: {
  name: 'href',
  sss: 'src'
}

注意：要避免空格和引号等，且需要小写，可使用计算属性来应对复杂表达式，都需要使用[]

2. computed/methods/watch

computed可使用get/set

 computed: {
    top() {
      return 'top'
    },
    name: {
      get () {
        return this.name
      },
      set (val) {
        this.name = val
      }
    }
  }

computed可缓存，但不可传参，会根据data中的属性变化而变化，即是根据响应式依赖来变化，而Date不是响应式依赖，即不会变化；method则每次都会进行计算，但可传参。

watch用于处理异步或开销较大的操作，如输入搜索时。

3. style绑定

直接对象或变量对象
计算属性
直接style或style对象

<!-- 属性名可加引号也可不加，属性小驼峰 -->
<div :style="{ 'color': 'red', fontSize: fontSize + 'px' }">样式3</div>

 数组结合三目/数组结合对象

data: {
 isActive: true,
 activeClass: 'active'
}
<!-- 使用数组时变量和字符串需要通过引号来区分 -->
<div :class="[isActive ? activeClass : '', 'errorClass']"></div>
<!-- 使用对象时类名不加引号可表示变量也可表示字符串 -->
<div :class="[{ active: isActive }, 'errorClass']"></div>

 4. v-if条件渲染

可使用template包裹元素，template会被当成不可见的包裹元素

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

多条件判断

<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>

5. key

添加key防止vue重复利用不想被重复利用的元素，如下的input如果不添加key，则vue会重复使用key，进而input的value值在切换后还会被保留，因为vue仅仅替换了placeholder