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

<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"></template><template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"></template>

6. v-if和v-show

v-if是组件的销毁和重建，如果初始条件为false，则什么都不做，直到变为真，所以切换开销高，运行条件很少改变时适用