vue2.0常用

1. 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：<p>{{ message }}</p>
2. 使用 v-html 指令用于输出 html 代码： <div v-html="message"></div>
3. HTML 属性中的值应使用 v-bind 指令。<div v-bind:class="{'class1': class1}">  </div>
4.  v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素 <p v-if="seen">现在你看到我了</p>
5. 参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：<pre><a v-bind:href="url">菜鸟教程</a></pre>
6.  v-on 指令，它用于监听 DOM 事件：<a v-on:click="doSomething">
7. 在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：<input v-model="message">
8. v-bind 缩写 <a :href="url"></a>，  v-on缩写<a @click="doSomething"></a>
9. 条件判断使用 v-if 指令：<template v-if="ok">134</template>,  v-else <div v-else></div>
10. 我们也可以使用 v-show 指令来根据条件展示元素：<h1 v-show="ok">Hello!</h1>
11. v-for <li v-for="site in sites"></li>   第二个参数为键名:<li v-for="(value, key) in object"></li> 第三个参数为索引：<li v-for="(value, key, index) in object"></li> ，循环整数<li v-for="n in 10"></li>
12.  computed  vs  methods  : 使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
13. watch 来响应数据的变化: watch : { kilometers:function(val) { this.kilometers = val; this.meters = val * 1000; }, meters : function (val) { this.kilometers = val/ 1000; this.meters = val; } }     $watch 是一个实例方法   vm.$watch('kilometers', function (newValue, oldValue) {}
14. class绑定  <div v-bind:class="{ active: isActive }"></div>   <div v-bind:class="[activeClass, errorClass]"></div>   div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>   直接绑定到一个样式对象，让模板更清晰：<div v-bind:style="styleObject">菜鸟教程</div>  <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
15. Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

    <!-- 阻止单击事件冒泡 -->
    <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>
    <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>
    
    <!-- click 事件只能点击一次，2.1.4版本新增 -->
    <a v-on:click.once="doThis"></a>

16.  Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

    <input v-on:keyup.13="submit">

    input @keyup.enter="submit">

    全部的按键别名：.enter  .tab  .delete (捕获 "删除" 和 "退格" 键)   .esc  .space  .up  .down  .left  .right  .ctrl  .alt  .shift  .meta

17. 使用 $on(eventName) 监听事件  使用 $emit(eventName) 触发事件this.$emit('increment')
18. vue 钩子
19. 
20. vue中computed、methods、watch区别：

    computed是在HTML DOM加载后马上执行的，如赋值；

    而methods则必须要有一定的触发条件才能执行，如点击事件；

    watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。