https://cn.vuejs.org/v2/guide/computed.html
不要滥用watch，有时候可以用computed代替
https://cn.vuejs.org/v2/guide/conditional.html
<h1 v-if="awesome">Vue is awesome!</h1><h1 v-else>Oh no ??</h1> <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 v-if="loginType === 'username'"><label>Username</label><input placeholder="Enter your username"></template><template v-else><label>Email</label><input placeholder="Enter your email address"></template> 两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可 <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>Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push()pop()shift()unshift()splice()sort()reverse()由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength var vm = new Vue({data: {items: ['a', 'b', 'c']}})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的 为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：// Vue.setVue.set(vm.items, indexOfItem, newValue)// Array.prototype.splicevm.items.splice(indexOfItem, 1, newValue) 为了解决第二类问题，你可以使用 splice：vm.items.splice(newLength)为了解决方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop.prevent.capture.self.once.passive <!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --><form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --><!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 --><div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --><!-- 即事件不是从内部元素触发的 --><div v-on:click.self="doThat">...</div> <!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a>可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 （在 Mac 系统键盘上，meta 对应 command 键 (?)）
.ctrl.alt.shift.meta <!-- Alt + C --><input @keyup.alt.67="clear"> <!-- Ctrl + Click --><div @click.ctrl="doSomething">Do something</div>.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --><button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --><button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --><button @click.exact="onClick">A</button>鼠标按钮修饰符
.left.right.middle在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
<!-- 在“change”时而非“input”时更新 --><input v-model.lazy="msg" >如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">https://cn.vuejs.org/v2/guide/custom-directive.html
如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。
<div v-demo="{ color: 'white', text: 'hello!' }"></div> Vue.directive('demo', function (el, binding) {console.log(binding.value.color) // => "white"console.log(binding.value.text) // => "hello!"})