什么是 Vue.js？
Vue.js 是用于构建交互式的 Web
界面的库。
Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。
Vue.js 特点
HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
数据驱动：
自动追踪依赖的模板表达式和计算属性。
用解耦、可复用的组件来构造界面。
~24kb min+gzip，无依赖。
精确有效的异步批量 DOM 更新。
模块友好：
通过 NPM 或 Bower 安装，无缝融入你的工作流。
如果你喜欢下面这些，那你一定会喜欢 Vue.js：
可扩展的数据绑定机制
原生对象即模型
简洁明了的 API
组件化 UI 构建
多个轻量库搭配使用
Vue.js 安装
直接下载并用 &script& 标签引入，Vue 会被注册为一个全局变量。
Vue.js 官网下载地址：
我们可以在官网上直接下载生产版本应用在我们项目中。
或者可以使用本站的静态资源 CDN 库(1.0.11版本)：
/assets/vue/1.0.11/vue.min.js
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
# 最新稳定版本
$ npm install vue
# 最新稳定 CSP 兼容版本
$ npm install vue@csp
# 开发版本（直接从 GitHub 安装）
$ npm install vuejs/vue#dev
Bower 安装
# 最新稳定版本
$ bower install vue
创建第一个 Vue 应用
接下来我们创建第一个 Vue 应用。
View 层 - HTML 代码如下：
&div id="app"&
{{ message }}
&p&&b&Model 层&/b& - JavaScript 代码如下(需放在指定的HTML元素之后)：&/p&
el:'#app',
message:'Hello World!'
双向数据绑定
接下来我们创建一个 view 层 HTML 文件：vueapp.htm，以及 model 层文件：vueapp.js，然后通过 vue.js（使用v-model这个指令）完成中间的底层逻辑，实现绑定的效果。改变其中的任何一层，另外一层都会改变。
vueapp.htm 文件代码：
&div id="app"&
&p&{{ message }}&/p&
&input v-model="message"&
vueapp.js 文件代码：
el: '#app',
message: '菜鸟教程!'
以上实例中 {{message}} 会根据输入框 input 的改变而改变，如果你不想让其变化可以修改为：
{{* message }}
同时还支持一些简单的表达式：
&!-- 字符串连接 --&
{{ message + '官网地址：' }}
&!-- 字符串反转 --&
{{ message.split('').reverse().join('') }}
列表输出使用 v-for(v-for取代了1.0以前版本中的v-repeat) 这个指令就能完成:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&菜鸟教程()&/title&
&script src="/assets/vue/1.0.11/vue.min.js"&&/script&
&div id="app"&
&li v-for="todo in todos"&
{{ todo.text }}
el: '#app',
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
多维数组实例
&div id="app"&
&ul id="example-2"&
&li v-for="item in items"&
{{ parentMessage }} - {{ $index }} - {{ item.message }}
var example2 = new Vue({
el: '#example-2',
parentMessage: '菜鸟教程官网',
{ message: '' },
{ message: 'www.w3cschool.cc' }
在字符串模板中，如 Handlebars，我们得像这样写一个条件块：
&!-- Handlebars 模板 --&
{{#if ok}}
&h1&Yes&/h1&
在 Vue.js，我们使用 v-if 指令实现同样的功能：
&h1 v-if="ok"&Yes&/h1&
也可以用 v-else 添加一个 "else" 块：
&h1 v-if="ok"&Yes&/h1&
&h1 v-else&No&/h1&
因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 &template& 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。
&template v-if="ok"&
&h1&Title&/h1&
&p&Paragraph 1&/p&
&p&Paragraph 2&/p&
&/template&
v-show作用与v-if类似，不同的是v-show的元素会始终渲染并保持在 DOM 中,且v-show不支持&template&标签。
&h1 v-show="ok"&Hello!&/h1&
与Linux中的管道类似，vue.js也使用的是|:
{{message | uppercase}}
这样就能输出message的大写了,过滤器也能串联在一起使用:
{{message | reverse | uppercase}}
这里reverse并不是内建的过滤器，我们可以用Vue.filter自定义:
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
官方文档：
关注微信下载离线手册vue.js 起步式（一）
学习vue.js的详细介绍可以在这里找到：
响应的数据绑定
Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时，我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。
组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。
2.创建实例
每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例
var vm = new Vue({
一个 Vue 实例其实正是一个 MVVM 模式中所描述的 ViewModel - 因此在文档中经常会使用 vm 这个变量名。
在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
实例生命周期
Vue 实例在创建时有一系列初始化步骤——例如，它需要建立数据观察，编译模板，创建必要的数据绑定。在此过程中，它也将调用一些生命周期钩子，给自定义逻辑提供运行机会。例如 created 钩子在实例创建后调用：
var vm = new Vue({
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
// -& &a is: 1&
也有一些其它的钩子，在实例生命周期的不同阶段调用，如 compiled、 ready 、destroyed。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分割在这些钩子中。
生命周期图示
3.数据绑定语法
Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板，请记住这点。
数据绑定最基础的形式是文本插值，使用 “Mustache” 语法（双大括号）：
&span&Message: {{ msg }}&/span&
Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。
你也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：
&span&This will never change: {{* msg }}&/span&
（2）原始的 HTML
双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串，需要用三 Mustache 标签：
&div&{{{ raw_html }}}&/div&
内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断，应当使用 partials。
注：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。记住，只对可信内容使用 HTML 插值，永不用于用户提交的内容。
（3）HTML 特性
Mustache 标签也可以用在 HTML 特性 (Attributes) 内：
&div id=&item-{{ id }}&&&/div&
注意在 Vue.js 指令和特殊特性内不能用插值。不必担心，如果 Mustache 标签用错了地方 Vue.js 会给出警告。
绑定表达式
放在 Mustache 标签内的文本称为绑定表达式。在 Vue.js 中，一段绑定表达式由一个简单的 JavaScript 表达式和可选的一个或多个过滤器构成。
（1）JavaScript 表达式
到目前为止，我们的模板只绑定到简单的属性键。不过实际上 Vue.js 在数据绑定内支持全功能的 JavaScript 表达式：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
这些表达式将在所属的 Vue 实例的作用域内计算。一个限制是每个绑定只能包含单个表达式，因此下面的语句是无效的：
&!-- 这是一个语句，不是一个表达式： --&
{{ var a = 1 }}
&!-- 流程控制也不可以，可改用三元表达式 --&
{{ if (ok) { return message } }}
（2）过滤器
Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”，以“管道符”指示：
{{ message | capitalize }}
这里我们将表达式 message 的值“管输（pipe）”到内置的 capitalize 过滤器，这个过滤器其实只是一个 JavaScript 函数，返回大写化的值。Vue.js 提供数个内置过滤器，在后面我们会谈到如何开发自己的过滤器。
注意管道语法不是 JavaScript 语法，因此不能在表达式内使用过滤器，只能添加到表达式的后面。
过滤器可以串联：
{{ message | filterA | filterB }}
过滤器也可以接受参数：
{{ message | filterA 'arg1' arg2 }}
过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。这里，字符串 'arg1' 将传给过滤器作为第二个参数，表达式 arg2 的值在计算出来之后作为第三个参数。
指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式，因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。我们来回头看下“概述”里的例子：
&p v-if=&greeting&&Hello!&/p&
这里 v-if 指令将根据表达式 greeting 值的真假删除/插入 &p& 元素。
有些指令可以在其名称后面带一个“参数” (Argument)，中间放一个冒号隔开。例如，v-bind 指令用于响应地更新 HTML 特性：
&a v-bind:href=&url&&&/a&
这里 href 是参数，它告诉 v-bind 指令将元素的 href 特性跟表达式 url 的值绑定。可能你已注意到可以用特性插值 href=&{{url}}& 获得同样的结果：这样没错，并且实际上在内部特性插值会转为 v-bind 绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
&a v-on:click=&doSomething&&
这里参数是被监听的事件的名字。我们也会详细说明事件绑定。
（2）修饰符
修饰符 (Modifiers) 是以半角句号 . 开始的特殊后缀，用于表示指令应当以特殊方式绑定。例如 .literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式：
&a v-bind:href.literal=&/a/b/c&&&/a&
当然，这似乎没有意义，因为我们只需要使用 href=&/a/b/c& 而不必使用一个指令。这个例子只是为了演示语法。后面我们将看到修饰符更多的实践用法。
v- 前缀是一种标识模板中特定的 Vue 特性的视觉暗示。当你需要在一些现有的 HTML 代码中添加动态行为时，这些前缀可以起到很好的区分效果。但你在使用一些常用指令的时候，你会感觉一直这么写实在是啰嗦。而且在构建单页应用（SPA ）时，Vue.js 会管理所有的模板，此时 v- 前缀也没那么重要了。因此Vue.js 为两个最常用的指令 v-bind 和 v-on 提供特别的缩写：
v-bind 缩写
&!-- 完整语法 --&
&a v-bind:href=&url&&&/a&
&!-- 缩写 --&
&a :href=&url&&&/a&
&!-- 完整语法 --&
&button v-bind:disabled=&someDynamicCondition&&Button&/button&
&!-- 缩写 --&
&button :disabled=&someDynamicCondition&&Button&/button&
&!-- 完整语法 --&
&a v-on:click=&doSomething&&&/a&
&!-- 缩写 --&
&a @click=&doSomething&&&/a&
它们看起来跟“合法”的 HTML 有点不同，但是它们在所有 Vue.js 支持的浏览器中都能被正确地解析，并且不会出现在最终渲染的标记中。缩写语法完全是可选的，不过随着一步步学习的深入，你会庆幸拥有它们。
4.计算属性
在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。
&div id=&example&&
a={{ a }}, b={{ b }}
var vm = new Vue({
el: '#example',
computed: {
// 一个计算属性的 getter
b: function () {
// `this` 指向 vm 实例
return this.a + 1
结果：a=1,b=2
这里我们声明了一个计算属性 b。我们提供的函数将用作属性 vm.b的 getter。
console.log(vm.b) // -& 2
console.log(vm.b) // -& 3
你可以打开浏览器的控制台，修改 vm。vm.b 的值始终取决于 vm.a 的值。
你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.b 依赖于 vm.a，因此当 vm.a 发生改变时，依赖于 vm.b 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系：计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。
计算属性 vs. $watch
Vue.js 提供了一个方法 $watch，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人 —— 特别是如果你来自 AngularJS。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。考虑下面例子：
&div id=&demo&&{{fullName}}&/div&
var vm = new Vue({
el: '#demo',
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
API:computed
类型： Object
详细：实例计算属性。getter 和 setter 的 this 自动地绑定到实例。
上面代码是命令式的重复的。跟计算属性对比：
var vm = new Vue({
el: '#demo',
firstName: 'Foo',
lastName: 'Bar'
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
这样更好，不是吗？
计算 setter
计算属性默认只是 getter，不过在需要时你也可以提供一个 setter：
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
现在在调用 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会有相应更新。
5.Class 与 Style 绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
绑定 HTML Class
尽管可以用 Mustache 标签绑定 class，比如 class=&{{ className }}&，但是我们不推荐这种写法和 v-bind:class 混用。两者只能选其一！
我们可以传给 v-bind:class 一个对象，以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存：
&div class=&static& v-bind:class=&{ 'class-a': isA, 'class-b': isB }&&&/div&
isA: true,
isB: false
&div class=&static class-a&&&/div&
当 isA 和 isB 变化时，class 列表将相应地更新。例如，如果 isB 变为 true，class 列表将变为 &static class-a class-b&。
你也可以直接绑定数据里的一个对象：
&div v-bind:class=&classObject&&&/div&
classObject: {
'class-a': true,
'class-b': false
我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式。
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：
&div v-bind:class=&[classA, classB]&&
classA: 'class-a',
classB: 'class-b'
&div class=&class-a class-b&&&/div&
如果你也想根据条件切换列表中的 class，可以用三元表达式：
&div v-bind:class=&[classA, isB ? classB : '']&&
此例始终添加 classA，但是只有在 isB 是 true 时添加 classB 。
不过，当有多个条件 class 时这样写有些繁琐。在 1.0.19+ 中，可以在数组语法中使用对象语法：
&div v-bind:class=&[classA, { classB: isB, classC: isC }]&&
绑定内联样式
v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：
&div v-bind:style=&{ color: activeColor, fontSize: fontSize + 'px' }&&&/div&
activeColor: 'red',
fontSize: 30
直接绑定到一个样式对象通常更好，让模板更清晰：
&div v-bind:style=&styleObject&&&/div&
styleObject: {
color: 'red',
fontSize: '13px'
同样的，对象语法常常结合返回对象的计算属性使用。
v-bind:style 的数组语法可以将多个样式对象应用到一个元素上：
&div v-bind:style=&[styleObjectA, styleObjectB]&&
自动添加前缀
当 v-bind:style 使用需要厂商前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
6.条件渲染
在字符串模板中，如 Handlebars，我们得像这样写一个条件块：
&!-- Handlebars 模板 --&
{{#if ok}}
&h1&Yes&/h1&
在 Vue.js，我们使用 v-if 指令实现同样的功能：
&h1 v-if=&ok&&Yes&/h1&
也可以用 v-else 添加一个 “else” 块：
&h1 v-if=&ok&&Yes&/h1&
&h1 v-else&No&/h1&
template v-if
因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 &template& 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。
&template v-if=&ok&&
&h1&Title&/h1&
&p&Paragraph 1&/p&
&p&Paragraph 2&/p&
&/template&
另一个根据条件展示元素的选项是 v-show 指令。用法大体上一样：
&h1 v-show=&ok&&Hello!&/h1&
不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display。
注意 v-show 不支持 &template& 语法。
可以用 v-else 指令给 v-if 或 v-show 添加一个 “else 块”：
&div v-if=&Math.random() & 0.5&&
&div v-else&
v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。
将 v-show 用在组件上时，因为指令的优先级 v-else 会出现问题。因此不要这样做：
&custom-component v-show=&condition&&&/custom-component&
&p v-else&这可能也是一个组件&/p&
用另一个 v-show 替换 v-else：
&custom-component v-show=&condition&&&/custom-component&
&p v-show=&!condition&&这可能也是一个组件&/p&
这样就可以达到 v-if 的效果。
v-if vs. v-show
在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
7.列表渲染
可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为 item in items，items 是数据数组，item 是当前数组元素的别名：
&ul id=&example-1&&
&li v-for=&item in items&&
{{ item.message }}
var example1 = new Vue({
el: '#example-1',
{ message: 'Foo' },
{ message: 'Bar' }
在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，正如你猜到的，它是当前数组元素的索引：
&ul id=&example-2&&
&li v-for=&item in items&&
{{ parentMessage }} - {{ $index }} - {{ item.message }}
var example2 = new Vue({
el: '#example-2',
parentMessage: 'Parent',
{ message: 'Foo' },
{ message: 'Bar' }
&Parent-0-Foo
&Parent-1-Bar
另外，你可以为索引指定一个别名（如果 v-for 用于一个对象，则可以为对象的键指定一个别名）：
&div v-for=&(index, item) in items&&
{{ index }} {{ item.message }}
从 1.0.17 开始可以使用 of 分隔符，更接近 JavaScript 遍历器语法：
&div v-for=&item of items&&&/div&
template v-for
类似于 template v-if，也可以将 v-for 用在 &template& 标签上，以渲染一个包含多个元素的块。例如：
&template v-for=&item in items&&
&li&{{ item.msg }}&/li&
&li class=&divider&&&/li&
&/template&
数组变动检测
(1)变异方法
Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：
你可以打开浏览器的控制台，用这些方法修改上例的 items 数组。例如： example1.items.push({ message: 'Baz' }) 。
(2)替换数组
变异方法，如名字所示，修改了原始数组。相比之下，也有非变异方法，如 filter(), concat() 和 slice()，不会修改原始数组而是返回一个新数组。在使用非变异方法时，可以直接用新数组替换旧数组：
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表——幸运的是并非如此。 Vue.js 实现了一些启发算法，以最大化复用 DOM 元素，因而用另一个数组替换数组是一个非常高效的操作。
（3）track-by
有时需要用全新对象（例如通过 API 调用创建的对象）替换数组。因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度，这可能导致重新渲染整个列表。但是，如果每个对象都有一个唯一 ID 的属性，便可以使用 track-by 特性给 Vue.js 一个提示，Vue.js 因而能尽可能地复用已有实例。
例如，假定数据为：
{ _uid: '88f869d', ... },
{ _uid: '7496c10', ... }
然后可以这样给出提示：
&div v-for=&item in items& track-by=&_uid&&
&!-- content --&
然后在替换数组 items 时，如果 Vue.js 遇到一个包含 _uid: '88f869d' 的新对象，它知道它可以复用这个已有对象的作用域与 DOM 元素。
track-by $index
如果没有唯一的键供追踪，可以使用 track-by=&$index&，它强制让 v-for 进入原位更新模式：片断不会被移动，而是简单地以对应索引的新值刷新。这种模式也能处理数据数组中重复的值。
这让数据替换非常高效，但是也会付出一定的代价。因为这时 DOM 节点不再映射数组元素顺序的改变，不能同步临时状态（比如 &input& 元素的值）以及组件的私有状态。因此，如果 v-for 块包含 &input& 元素或子组件，要小心使用 track-by=&$index&
因为 JavaScript 的限制，Vue.js 不能检测到下面数组变化：
直接用索引设置元素，如 vm.items[0] = {}；
修改数据的长度，如 vm.items.length = 0。
为了解决问题 (1)，Vue.js 扩展了观察数组，为它添加了一个 $set() 方法：
// 与 example1.items[0] = ... 相同，但是能触发视图更新
example1.items.$set(0, { childMsg: 'Changed!'})
至于问题 (2)，只需用一个空数组替换 items。
除了 $set()， Vue.js 也为观察数组添加了 $remove() 方法，用于从目标数组中查找并删除元素，在内部它调用 splice() 。因此，不必这样：
var index = this.items.indexOf(item)
if (index !== -1) {
this.items.splice(index, 1)
只用这样：
this.items.$remove(item)
（4）使用 Object.freeze()
在遍历一个数组时，如果数组元素是对象并且对象用 Object.freeze() 冻结，你需要明确指定 track-by。在这种情况下如果 Vue.js 不能自动追踪对象，将给出一条警告。
对象 v-for
也可以使用 v-for 遍历对象。除了 $index 之外，作用域内还可以访问另外一个特殊变量 $key。
&ul id=&repeat-object& class=&demo&&
&li v-for=&value in object&&
{{ $key }} : {{ value }}
el: '#repeat-object',
FirstName: 'John',
LastName: 'Doe',
&FirstName:'John'
&LastName:'Doe'
也可以给对象的键提供一个别名：
&div v-for=&(key, val) in object&&
{{ key }} {{ val }}
在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
（5）值域 v-for
v-for 也可以接收一个整数，此时它将重复模板数次。
&span v-for=&n in 10&&{{ n }} &/span&
显示过滤/排序的结果
有时我们想显示过滤/排序过的数组，同时不实际修改或重置原始数据。有两个办法：
创建一个计算属性，返回过滤/排序过的数组；
使用内置的过滤器 filterBy 和 orderBy。
计算属性有更好的控制力，也更灵活，因为它是全功能 JavaScript。但是通常过滤器更方便，详细见 API。在线课堂 - 汇智网Vue.js初探
　　1、定义：
& & &是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
　　2：MVVM（Model-View-ViewModel）,在常用的MVC（Model-View-Controller）模式的基础上，增加了一层ViewModel，核心，它能够实现数据驱动，也是常说的双向绑定的前提：不仅View的更改可以反映到Model，Model的更改也可以反映到View，二者实现的前提也就是ViewModel把二者联系起来了。
二、使用Vue.js
　　一个简单的hello world的示例，让你看清双向绑定使用Vue.js的好处，直接上代码：
&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&title&vuejs&/title&
&!--这是view--&
&div id="app"&
{{message}}
&script src="js/vue.min.js" type="text/javascript"&&/script&
&script type="text/javascript"&
// 这是model
var model={
message:"hello vue.js"
// 这是ViewModel，vue实例
// 连接view和model
el: '#app',//Vue实例挂载到id为app标签上
data: model//数据来源于model对象
使用Vue的过程就是定义MVVM各个组成部分的过程的过程，如图中注释所示。
创建一个View实例或"ViewModel"，它用于连接View和Model
双向绑定演示：
1、从View改变，绑定更新到Model，如图所示：
2、从Model改变，绑定更新到View，如图所示：
&三、Vue.js常用指令
上面用到的v-model是Vue.js常用的一个指令，那么指令是什么呢？
Vue.js提供了一些常用的内置指令，接下来我们将介绍以下几个内置指令：
v-show指令
v-else指令
v-bind指令
四、本篇参考及相关源码
本篇参考1：
本篇参考2：
Vue.js中文官网：
Vue.js中文api文档：
Vue.js库Github：
本篇所有示例代码均放在github开源：
阅读(...) 评论()