妈蛋，写了一大半给弄没了，又重写。
1.数据绑定语法。 前面用过{{}},可以替换文本，也可以替换属性值中的文本比如<input id = "{{id}}">
{{{}}}三重花括号则可以替换html，有点6啊。
也可以插入表达式{{a+1}}
过滤器我们前面用过了{{value|filter1|filter2}},同时也可以带参数{{ message | filterA ‘arg1’ arg2 }}
指令、参数、修饰符 <a v-bind:href.literal="/a/b/c"></a>。v-bind是指令表示执行什么操作，href是参数表明要操作的对象，literal是修饰符表名操作限制。
指令也可以缩写 v-bind:href 可以写作:href v-on:click可以缩写成@click
2.计算属性。 前面用过表达式{{a+1}},当我们的表达式没这么简单，比如计算一个位置在球面的坐标，一行代码搞不定，这时候就要用到计算属性。 两种方式： 一是使用vue基类的watch方法
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' } }) vm.$watch('firstName', function (val) { this.fullName = val + ' ' + this.lastName })此时watch监听data属性中的firstname字段，当其有变化时自动执行后面的方法，val代表firstname当前值。
二是使用vue基类的computed:{}属性
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } })3.Class 与 Style 绑定 vue模板也可以用作样式绑定。还记得外部样式class和内部样式style吗？ 绑定class时使用 v-bind:class,分为对象绑定和数组绑定
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div> data: { isA: true, isB: false } //渲染为： <div class="static class-a"></div> //当 isA 和 isB 变化时，class 列表将相应地更新。例如，如果 isB 变为 true，class 列表将变为 <div class="static class-a class-b"></div> //你也可以直接绑定数据里的一个对象： <div v-bind:class="classObject"></div> data: { classObject: { 'class-a': true, 'class-b': false } }此为对象绑定，是动态切换样式的好办法。数组样式v-bind:class=”[classObject1,classObject2]”很明显可以组合不同样式
绑定style时使用 v-bind:style,也是分为对象绑定和数组绑定
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data: { activeColor: 'red', fontSize: 30 } //直接绑定到一个样式对象通常更好，让模板更清晰： <div v-bind:style="styleObject"></div> data: { styleObject: { color: 'red', fontSize: '13px' } }数组绑定类似class的用法
4.条件渲染不说了 v-if v-else v-show前面都用过了
5.列表渲染v-for也用过了，适用于单个li的模板，如果是多个li，就使用template v-for
<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template> </ul>列表模板经常要对其数据进行操作，考虑以下vue实例
var vm = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })对数组items进行操作的方式很多，还记得原生js的数组操作吗？这里类似，不过有所区别。 vue提供了某些操作的变异方法，这些变异方法直接修改了原数组，让页面实时刷新。 push() pop() shift() unshift() splice() sort() reverse()
也有非变异方法： 如 filter(), concat() 和 slice()，不会修改原始数组而是返回一个新数组。在使用非变异方法时，可以直接用新数组替换旧数组：
example2.items = example2.items.filter(function (item) { return item.message.match(/Foo/) })可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表——幸运的是并非如此。 Vue.js 实现了一些启发算法，以最大化复用 DOM 元素，因而用另一个数组替换数组是一个非常高效的操作。
还有track-by，注意刚才我们看到vue对列表渲染是有做优化的，尽可能的复用，track-by也是出于这个考虑的，意思是根据什么特征来进行复用。
例如，假定数据为： { items: [ { _uid: '88f869d', ... }, { _uid: '7496c10', ... } ] } 然后可以这样给出提示： <div v-for="item in items" track-by="_uid"> <!-- content --> </div> 然后在替换数组 items 时，如果 Vue.js 遇到一个包含 _uid: '88f869d' 的新对象，它知道它可以复用这个已有对象的作用域与 DOM 元素。同时，还记得v-for里面可以使用$index吗？所以track-by="$index"也是可以的，简单地以对应索引的新值刷新。据说也有坑，暂时还没体验到。
6.方法与事件处理器 方法处理器v-on:click=”say(‘hi’)” 前面用过了，不多说。 有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：
<button v-on:click="say('hello!', $event)">Submit</button> // ... methods: { say: function (msg, event) { // 现在我们可以访问原生事件对象 event.preventDefault() } }虽然这样可以写dom事件，但是将dom事件跟业务逻辑混在一起是很蛋疼的，有没办法分开？ 有，事件修饰符。Vue.js 为 v-on 提供两个 事件修饰符：.prevent 与 .stop 所以以上代码完全可以改写为：v-on:click.prevent=”say(‘hello!’)” event.preventDefault() 或 event.stopPropagation()可以分别用.prevent 与 .stop修饰符改写。
1.0.16 添加了两个额外的修饰符：
<!-- 添加事件侦听器时使用 capture 模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div>也有按键修饰符 记住所有的 keyCode 比较困难，Vue.js 为最常用的按键提供别名：
<!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit"> 全部的按键别名：enter tab delete esc space up down left right
使用 v-on 有几个好处：
a.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。 b.因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。 c.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
7.表单控件绑定vue，这里不多说，大概讲的是各种表单控件如何绑定vue，好处是表单控件的值被模板化后动态更新。
