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，则什么都不做，直到变为真，所以切换开销高，运行条件很少改变时适用
v-show是display:none和block之间的CSS切换，基于渲染，不管初始条件如何都会渲染，所以初始渲染开销高，切换频率高时适用
7. v-for
可使用in或者of
也可遍历对象：v-for="(value, key, index) in obj"
可根据template渲染多个组合元素：
<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li></li> </template> </ul>
8. v-for和v-if
v-for优先级更高，所以v-if会重复运行于每个v-for循环中，所以尽量不要一起使用，可先使用计算属性对数据进行过滤再遍历。
9. 更改响应式数据
Vue.set(object, key, value)
this.$set(object, key, value)
this.items.splice(index, 1, newValue)
批量添加属性：
// 不要直接Object.assign(this.items, {age: 18} this.items = Object.assign({}, this.items, { age: 18, favoriteColor: 'Vue Green' })
10. 事件修饰符
.passive：滚动的默认事件会立即出发，即告诉浏览器不想阻止默认事件的触发，可提升移动端性能
<div :scroll.passive="onScroll">...</div>
.capture：添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
.self：只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的
.once：点击事件只会触发一次
键盘修饰符：<input v-on:keyup.enter="submit">
11. v-model
选择框
<!-- 单选框时，picked为字符串 "a"，不是布尔值 --> <input type="radio" value="a" v-model="picked"> <!-- 多选框时，toggle默认值设为字符串或布尔值时得到布尔值，设为数组时得到的是value值--> <input type="checkbox" value="b" v-model="toggle"> <!-- 当选中第一个选项时，selected为字符串value的值 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>
修饰符.lazy：在change时而非input时更新 <input v-model.lazy="msg" >