在告诉你基础用法之前，我还是要先告诉你一个情况。
可能要令你有点失望。vue主要是侧重于数据端的。他的目的就是渲染数据和在前端调整一下数据逻辑。
他不是像jquery那样让你用来做特技的。就算你要做特技。你也应该通过css3/canvas而不是dom。
所谓的双向绑定，你可以理解就是把view。（你还不清楚mvc的话，请看第一章）
和model绑定到一起。说白了，就是你js中的绑定值变了。你dom中的内容就跟着一块变了。
vue是通过解析{{文字..}}来生成内容的。后面绑定方法，输出内容的时候都会讲到。
列表输出使用 v-for，这些v开头加横杠的叫做命令
这些命令是可以自定义的。但是那都属于高级操作，我们不用它也完全足够支撑做一个大型项目了。
其实你回发现，这里无论是v-for或者是v-什么其他玩意
它都深刻的遵循了es6的语法。这里不就是一个典型的for in 循环吗。不过我们现在都用for of了。
你记住这个用法，它就长这样。
前后端分离开发的关键在于：后台只提供接口。
我们获得的数据多数情况下，仅仅是一个json，而mvvm的关键就再于解析数据在前端完成了。如果你了解jsp或者php你会了解，数据的解析在mvc中，
是由后端完成的，而html只负责显示。
所以，当你了解了数据绑定和渲染以后，你可以第一时间先把数据输出到页面了。
我们前端最厉害的地方不就是处理能看得见的东西吗？
之前对js的一些涉及到二进制的运算符一直似懂非懂，看到了就一脸懵逼，还得去控制台算一下。然后最近看算法的时候又看到了这个运算符，这里就简单介绍一下学习这些位运算符的过程。
注意： 以下运算均不涉及到小数。
先说这句话是什么意思。左移位是二进制的一种运算，就是在不改变二进制数值32位长度的前提下，将每位的数字都向左移动，左边移出去的直接丢弃，右边空出来的位置用0填充。无符号就是保持符号位不变，即本来是正数，移位后一样为正数。
这里以 7 <<2 为例。
首先将7转为二进制是 0000 0000 0000 0000 0000 0000 0000 0111 .
然后对其向左移两位.
得到值为 0000 0000 0000 0000 0000 0000 0001 1100 .
转换为十进制为 28.即 7 <<2 = 28 。
然后我们对以上的运算过程做一个处理，将这些二进制转换为我们熟悉的十进制。
对移位后的算式进行合并项可得到 2^4 + 2^3 + 2^2 = (2^2 + 2^1 + 2^0) * 2^2 ，即 2^4 + 2^3 + 2^2 = (2^2 + 2^1 + 2^0) * 2^2 = 7 * 2^2 。由此我们可得出 7 <<2 = 7 * 2^2 = 28 。
我们通过计算几个简单的左移位运算，与标准答案进行比较，验证一下这个结论。
在控制台中以上几个算式的结果为
答案完全一致。说明我们的结论是正确的。当然这个结论 仅限于那些二进制移位不会左移移出的数字的简单运算 。当我们遇到一些简单的可以口算的左移位运算时就可以使用这个结论快速得到结果，如果对于 99999 <<66 这种较复杂的运算你也用这个结论计算，也没有人会介意。
下面我们看一下负数的左移位运算。以 -66 <<2 为例。
首先，我们先复习一下负数如何转换为二进制。
负数转换为二进制的步骤有三：
然后对其向左移两位.
得到值为 1111 1111 1111 1111 1111 1110 1111 1000 .然后我们将其转换成十进制。
转换为十进制为 -264.即 -66 <<2 = -264 。
刚刚我们计算 -66 的二进制得到的是 1111 1111 1111 1111 1111 1111 1011 1110 。我们在控制台验证一下我们得到的这个二进制。
我们比较一下下面几个算式。
是的没错，进行无符号左移位运算时，当两个数的绝对值相等时，其相同位数的移位的绝对值一定相等。
这里以 666 >>3 为例。
首先将666转换为二进制是 0000 0000 0000 0000 0000 0010 1001 1010 。
然后对其向右移三位。
得到值为 0000 0000 0000 0000 0000 0000 0101 0011 .
转换为十进制为 83.即 666 >>3 = 83 。
然后我们对以上的运算过程做一个处理，将这些二进制转换为我们熟悉的十进制。
这个规律好像不太好总结？
这里以 -666 >>3 为例。
因为是有符号的运算，所以这里不再适用上一小节说的js的特殊处理。先将-666转换为二进制。
即-666的二进制形式为 1111 1111 1111 1111 1111 1101 0110 0110 ，然后对其进行有符号右移位运算
移位后得到的值为 1111 1111 1111 1111 1111 1111 1010 1100 ，是一个负值，我们将其转成十进制。
我们对此结果进行验证。
可见，我们的运算是完全正确的。
这里我们以 666 >>>3 为例。
首先将666转换为二进制是 0000 0000 0000 0000 0000 0010 1001 1010 。
然后对其向右移三位。
得到值为 0000 0000 0000 0000 0000 0000 0101 0011 .
转换为十进制为 83.即 666 >>3 = 83 。
这里以 -666 >>3 为例。
因为是有符号的运算，所以这里不再适用上一小节说的js的特殊处理。先将-666转换为二进制。
即-666的二进制形式为 1111 1111 1111 1111 1111 1101 0110 0110 ，然后对其进行有符号右移位运算
移位后得到的值为 0001 1111 1111 1111 1111 1111 1010 1100 ，转成十进制为536870828。
是不是超级大。因为是无符号右移位运算，所以在左边空出部分不论正负都会填充0.
我们对此结果进行验证。
可见，我们的运算是完全正确的。
注意：因为对负数进行无符号右移位运算时，所得结果很大，所以在使用过程中需要格外注意。
疑问：左移位和右移位根本都是只对位置进行了移动，那么对于 x1 >>k = y1 和 y2 <<k = x2 中的 x1 等于 x2 ， y1 等于 y2 吗？
不一定。因为我们不能确保移动过程中被丢弃的值均为0。但凡有一个1被丢弃，就不会相等。而如果被丢弃的都是0，那么 x1 === x2 y1 === y2 。如下图所示。
这里以 66 &33 为例。
首先将两个数转换为二进制是 0000 0000 0000 0000 0000 0000 0100 0010 和 0000 0000 0000 0000 0000 0000 0010 0001 。
然后对其进行与运算。
得出结果为 0.
负数的与运算与正数并无区别，不做讨论。
这里以 66 | 66 为例。
首先将两个数转换为二进制是 0000 0000 0000 0000 0000 0000 0100 0010 和 0000 0000 0000 0000 0000 0000 0100 0010 。
然后对其进行与运算。
得出结果为 66.
负数的与运算与正数并无区别，不做讨论。
这里以 66 ^ 66 为例。
首先将两个数转换为二进制是 0000 0000 0000 0000 0000 0000 0100 0010 和 0000 0000 0000 0000 0000 0000 0100 0010 。
然后对其进行与运算。
得出结果为 0.
负数的与运算与正数并无区别，不做讨论。
这里以 ~66 为例。
首先将其转换为二进制是 0000 0000 0000 0000 0000 0000 0100 0010 。
然后对其进行与运算。
将结果（ 1111 1111 1111 1111 1111 1111 1011 1101 ）转换为十进制
得出结果为 -67.
这里我们再我看几个例子。
从中我们可以看出， 位非操作就是对数字加一，然后取负 。我们可以写个简单的判断方法来验证。
位运算符运算结果非常有趣，在平时可以多加应用，但是一定要注意可能产生大数的预算，避免产生不必要的BUG。
这篇文章只是做了一个简单的介绍。后面有空了会做一下在实际开发中的应用，虽然我可能很久都遇不到。
JavaScript学习指南：JS入门教程
查看一下效果，应该很容易得到结果
有时我们可能需要重复一个包含多个节点的块，这时可以用 <template>标签包裹这个块。这里的 <template>标签只起到语义上的包裹作用，其本身不会被渲染出来。例如：
简单值 (primitive value) 即字符串、数字、boolean 等并非对象的值。对于包含简单值的数组，你可用 $value 直接访问值:
有时我们可能想要更明确地访问当前作用域的变量而不是隐式地回退到父作用域。你可以通过提供一个参数给 v-repeat 指令并用它作为将被迭代项的别名:
Vue.js 内部对被观察数组的变异方法 (mutating methods，包括 push(), pop(), shift(), unshift(), splice(), sort() 和 reverse()) 进行了拦截，因此调用这些方法也将自动触发视图更新。
下面是一个演示的例子，点击按钮的时候数据项会被移除
Vue.js 给被观察数组添加了两个便捷方法：$set() 和 $remove() 。
你应该避免直接通过索引来设置数据绑定数组中的元素，比如 demo.items[0] = {}，因为这些改动是无法被 Vue.js 侦测到的。你应该使用扩展的 $set() 方法:
$remove() 只是 splice()方法的语法糖。它将移除给定索引处的元素。当参数不是数值时，$remove() 将在数组中搜索该值并删除第一个发现的对应元素。
当你使用非变异方法，比如filter(), concat() 或 slice()，返回的数组将是一个不同的实例。在此情况下，你可以用新数组替换旧的数组:
你可能会认为这将导致整个列表的 DOM 被销毁并重新渲染。但别担心，Vue.js 能够识别一个数组元素是否已有关联的 Vue 实例， 并尽可能地进行有效复用。
在某些情况下，你可能需要以全新的对象（比如 API 调用所返回的对象）去替换数组。如果你的每一个数据对象都有一个唯一的 id 属性，那么你可以使用 track-by 特性参数给 Vue.js 一个提示，这样它就可以复用已有的具有相同 id 的 Vue 实例和 DOM 节点。
例如：你的数据是这个样子的
那么你可以像这样给出提示:
在替换 items 数组时，Vue.js 如果碰到一个有 _uid: '88f869d' 的新对象，它就会知道可以直接复用有同样 _uid 的已有实例。 在使用全新数据重新渲染大型 v-repeat 列表时，合理使用 track-by 能极大地提升性能。
你也可以使用 v-repeat 遍历一个对象的所有属性。每个重复的实例会有一个特殊的属性 $key。对于简单值，你也可以象访问数组中的简单值那样使用 $value 属性。
在 ECMAScript 5 中，对于给对象添加一个新属性，或是从对象中删除一个属性时，没有机制可以检测到这两种情况。针对这个问题，Vue.js 中的被观察对象会被添加三个扩展方法: $add(key, value), $set(key, value) 和 $delete(key)。这些方法可以被用于在添加 / 删除观察对象的属性时触发对应的视图更新。方法 $add 和 $set 的不同之处在于当指定的键已经在对象中存在时 $add 将提前返回，所以调用 obj.$add(key) 并不会以 undefined 覆盖已有的值。
v-repeat 也可以接受一个整数。在这种情况下，它将重复显示一个模板多次。 下面的例子将迭代3次。
有时候我们只需要显示一个数组的过滤或排序过的版本，而不需要实际改变或重置原始数据。Vue 提供了两个内置的过滤器来简化此类需求： filterBy 和 orderBy。
