Vue.js学习 在学习vue之前，需先学习node.js与webpack 1. 关于Vue.js Vue.js 用于构建交互式的web 界面的库。他提供了M M 数据绑定和一个可组合的组件系统， 具有简单、灵活的API ，Vue.js 集成在 M M 模式上的试图模型层，并通过双向绑定连接视图和模 型。实际的DOM 操作和输出格式被抽象出来成指令和过滤器。相比其他的M M 框架，Vue.js 更 容易上手。Vue.js 是一个用于创建Web 交互界面的库。它让你通过简单而灵活的API 创建由数据驱 动的UI 组件。 npm （node package manager）：作为node 的包管理工具，极大地便利了我们的开发工作。 包括：安装、卸载、更新、查看、搜索、发布等。 你的团队无需去亲自开发一些特定功能的模块，而是直接引用各个领域专家写好的代码。即使 你的团队不需要引用外部代码，这种基于模块的开发方式也能很好的推动团队开发。 Node.js： Node.js 就是运行在服务端的JavaScript 。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。 Node.js 是一个事件驱动I/O 服务端JavaScript 环境，基于Google 的v8 引擎，v8 引擎执行 JavaScript 的速度非常快，性能非常好。 webstrom： 为JS 开发做了很多优化， M M(Model-View-ViewModel) ：M M 框架的由来白女士 MVP （Model-View-Presenter）模式 与WPF 结合的应用方式时发展演变过来的一种新型架构框架。 2. 安装Vue.js 1、独立版本 直接下载

4. Vue.js概述 概述 Vue.js是一个构建数据驱动的web界面的库。Vue.js 的目标是通过尽可能简单的API实现响应的数据绑定和组 合的视图组件 Vue.js自身不是一个全能框架—它值聚焦于视图层。因此它非常容易学习，非常容易与其他库或已有项目整合。 另一方面，在与相关工具和支持库一起使用时，Vue.js也能完美地驱动复杂的单页应用。 响应的数据绑定 Vue.js 的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。在使用Jquery 手 工操作DOM时，我们的代码常常是命令式的、重复的与易错的。Vue.js拥有数据驱动的试图概念。 通俗地讲，它意味着我们在普通HTML模板中使用特殊的语法将DOM“绑定”到底层数据。一旦创 建了绑定，DOM将与数据保持同步。每当修改了数据，DOM便相应地更新。这样我们应用中的逻 辑就几乎都是直接修改数据了，不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与 维护。

v-if v- 这里我们遇到新东西。你看到的 特性被称为指令。指令带有前缀 ，以指示它们是 Vue.js 提 供的特殊特性。并且如你所想象的，它们会对绑定的目标元素添加响应式的特殊行为。继续在控制 exampleVM2.greeting false 台设置 为 ，你会发现 Hello! 消失了。 这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构 到数据。而且， Vue.js 也提供一个强大的过渡效果系统，可以在 Vue 插入/删除元素时自动应用过渡效果。 也有一些其它指令，每个都有特殊的功能。例如 v-for 指令用于显示数组元素，v-bind 指令 用于绑定 HTML 特性。我们将在后面详细讨论全部的数据绑定语法。 组件系统 组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组 间来构建大型应用。

5. Vue.js实例 构造器 每个 Vue.js 应用的起步都是通过构造函数Vue 创建一个 Vue 的根实例： Var vm = new Vue({ }) 一个 Vue 实例其实正是一个 MVVM 模式中所描述的 ViewModel-因此在文档中经常会使用 vm 这个 变量名。 在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩 子等选项 可以扩展Vue 构造器，从而用预定义选项创建可复用的组件构造器 var MyComponent = Vue.extend({ // 扩展选项 }) // 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建 var myComponentInstance = new MyComponent() 尽管可以命令式地创建扩展实例，不过在多数情况下将组件构造器注册为一个自定义元素，然后声 明式地用在模板中。我们将在后面详细说明组件系统。现在你只需知道所有的 Vue.js 组件其实都是 被扩展的 Vue 实例。 属性和方法 每个Vue 实例都会代理其data 对象里所有的属性 var data = {a:1}; var vm = new Vue({ data:data }) vm.a = data.a; //true //设置属性也会影响到原始值 vm.a = 2; data.a//2 注意只有这些代理的属性是响应的。如果再实例创建之后添加新的属性到实例上，它不会触发视图 更新。我们将在后面详细讨论响应系统。 $ 除了这些数据属性，Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 ，以 便与代理的数据属性区分。例如： var data = { a: 1 } var vm = new Vue({ el: #example, data: data }) vm.$data === data // –

true vm.$el === document.getElementById( example) // –

true // $watch 是一个实例方法 vm.$watch( a, function (newVal, oldVal) { // 这个回调将在 `vm.a` 改变后调用 }) 实例生命周期 Vue实例在创建时有一系列初始化步骤例如，它需要建立数据观察，编译模板，创建必要的数据 绑定。在此过程中，它也将调用一些生命周期钩子，给自定义逻辑提供运行机会。例如created 钩 子在实例创建之后调用： var vm = new Vue({ data : { a : 1 }, created : function() { // `this` 指向 vm 实例 console.log(a is: + this.a) } }) // –

a is: 1 compiled ready destroyed 也有一些其它的钩子，在实例生命周期的不同阶段调用，如 、 、 。 钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念？答案。