完整word版vuejs教程.docx

1、完整word版vuejs教程Vue.js学习在学习vue之前，需先学习node.js与webpack1.关于Vue.jsVue.js用于构建交互式的web界面的库。他提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API，Vue.js集成在MVVM模式上的试图模型层，并通过双向绑定连接视图和模型。实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其他的MVVM框架，Vue.js更容易上手。Vue.js是一个用于创建Web交互界面的库。它让你通过简单而灵活的API创建由数据驱动的UI组件。npm（node package manager）：作为node的包管理工具，极大地便利

2、了我们的开发工作。包括：安装、卸载、更新、查看、搜索、发布等。 你的团队无需去亲自开发一些特定功能的模块，而是直接引用各个领域专家写好的代码。即使你的团队不需要引用外部代码，这种基于模块的开发方式也能很好的推动团队开发。 Node.js：Node.js就是运行在服务端的JavaScript。Node.js是一个基于Chrome JavaScript运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的v8引擎，v8引擎执行JavaScript的速度非常快，性能非常好。 webstrom： 为JS开发做了很多优化， MVVM(Model-Vie

3、w-ViewModel)：MVVM框架的由来白女士MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。2.安装Vue.js1、独立版本直接下载标签引入，Vue会被注册为一个全局变量。2、CDN可以从jsdelivr或cdnjs获取3、CSP兼容有些环境，如Goole Chrome Apps ，强制应用内容安全策略（CSP），不能使用new Function()对表达式求值。4、NPM使用Vue构建大型应用时使用NPM安装，NPM能很好地和诸如Webpack 或 Browserify的CommonJS模块打包器配合使用。Vue.js也提供

4、配套工具来开发文件组件$ npm install vue$ npm install vuecsp5、命令行工具Vue.js提供一个官方命令行功能工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热加载、保护时静态检查以及可用于生产的构建配置的全局安装 vue-cli$ npm install g vue-cli创建一个基于”webpack”项目的新模板Vue init webpack my-project安装依赖cd my-projectnpm intstallnpm rul build6、Bower3.Vue.js起步起步我们以

5、Vue数据绑定的快速导览开始。 message todo.text Reverse Message new Vue( el:#app, data: message:Hello Vue.js!, todos: text:Learn JavaScript, text:Learn Vue.js, text:Build Something AweSome , methods: reverseMessage:function() this.message = this.message.split().reverse().join() )4.Vue.js概述概述Vue.js是一个构建数据驱动的web界面的

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

7、修改了数据，DOM便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与DOM更新搅在一起。这让我们的代码更容易撰写、理解与维护。Insert title here Hello new Vue( el:#app, data: greeting:false )这里我们遇到新东西。你看到的 v-if 特性被称为指令。指令带有前缀 v-，以指示它们是 Vue.js 提供的特殊特性。并且如你所想象的，它们会对绑定的目标元素添加响应式的特殊行为。继续在控制台设置 exampleVM2.greeting 为 false，你会发现 Hello! 消失了。这个例子演示了我们不仅可以绑定 DOM 文

8、本到数据，也可以绑定 DOM 结构 到数据。而且，Vue.js 也提供一个强大的过渡效果系统，可以在 Vue 插入/删除元素时自动应用过渡效果。也有一些其它指令，每个都有特殊的功能。例如 v-for 指令用于显示数组元素，v-bind 指令用于绑定 HTML 特性。我们将在后面详细讨论全部的数据绑定语法。组件系统组件系统是Vue.js另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组间来构建大型应用。 5.Vue.js实例构造器每个Vue.js应用的起步都是通过构造函数Vue创建一个Vue的根实例：Var vm = new Vue()一个Vue实例其实正是一个MVVM模式中所描

9、述的ViewModel-因此在文档中经常会使用 vm 这个变量名。在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项可以扩展Vue构造器，从而用预定义选项创建可复用的组件构造器var MyComponent = Vue.extend( / 扩展选项)/ 所有的 MyComponent 实例都将以预定义的扩展选项被创建var myComponentInstance = new MyComponent()尽管可以命令式地创建扩展实例，不过在多数情况下将组件构造器注册为一个自定义元素，然后声明式地用在模板中。我们将在后面详细说明组件系统。现在你只需知道所

10、有的 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 = ne

11、w 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

12、 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 是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分割在这些钩子中。6.Vue.js数据绑定语法数据绑定Vue.js的模板是基于DOM实现的。这意味着所有的Vue.js模板都是可解析的有效的

13、HTML，且通过一些特殊的特性做了增强。插值文本数据绑定最基础的形式是文本插值，使用 Mustache 语法（双大括号）：Message: msg Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。你也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：This will never change: * msg 原始的HTML双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串，需要用三 Mustache 标签： raw_html 内容以 HTML 字符串插入数据绑定将被忽略。如果需要复用模板片断，应当使

14、用 partials。在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击(https:/en.wikipedia.org/wiki/Cross-site_scripting)。记住，只对可信内容使用 HTML 插值，*永不*用于用户提交的内容。HTML特性Mustache 标签也可以用在 HTML 特性 (Attributes) 内：注意在 Vue.js 指令和特殊特性内不能用插值。不必担心，如果 Mustache 标签用错了地方 Vue.js 会给出警告。绑定表达式放在 Mustache 标签内的文本称为绑定表达式。在 Vue.js 中，一段绑定表达式由一个简单的 Ja

15、vaScript 表达式和可选的一个或多个过滤器构成。JavaScript表达式到目前为止，我们的模板只绑定到简单的属性键。不过实际上 Vue.js 在数据绑定内支持全功能的 JavaScript 表达式： number + 1 ok ? YES : NO message.split().reverse().join() 这些表达式将在所属的 Vue 实例的作用域内计算。一个限制是每个绑定只能包含单个表达式，因此下面的语句是无效的： var a = 1 if (ok) return message 指令指令（Directives）是特殊的带有前缀 v-的特性。指令的值限定为绑定表达式，因此上面

16、提到的JavaScript表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上。Hello!这里 v-if 指令将根据表达式 greeting 值的真假删除/插入 元素。参数有些指令可以在其名称后面带一个“参数”（Argument），中间放一个冒号隔开。例如，v-bind指令用于响应地更新HTML特性：这里 href 是参数，它告诉 v-bind 指令将元素的 href 特性跟表达式 url 的值绑定。可能你已注意到可以用特性插值 % raw %href=url% endraw % 获得同样的结果：这样没错，并且实际上在内部特性插值会转为 v-bin

17、d 绑定。另一个例子是 v-on 指令，它用于监听 DOM 事件：这里参数是被监听的事件的名字。我们也会详细说明事件绑定。修饰符修饰符 (Modifiers) 是以半角句号 . 开始的特殊后缀，用于表示指令应当以特殊方式绑定。例如 .literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式：当然，这似乎没有意义，因为我们只需要使用 href=/a/b/c 而不必使用一个指令。这个例子只是为了演示语法。后面我们将看到修饰符更多的实践用法。缩写v- 前缀是一种标识模板中特定的 Vue 特性的视觉暗示。当你需要在一些现有的 HTML 代码中添加动态行为时，这些前缀可以起到很好的区分

18、效果。但你在使用一些常用指令的时候，你会感觉一直这么写实在是啰嗦。而且在构建单页应用时，Vue.js 会管理所有的模板，此时 v- 前缀也没那么重要了。因此Vue.js 为两个最常用的指令 v-bind 和 v-on 提供特别的缩写：v-bind缩写ButtonButtonv-on缩写它们看起来跟“合法”的 HTML 有点不同，但是它们在所有 Vue.js 支持的浏览器中都能被正确地解析，并且不会出现在最终渲染的标记中。缩写语法完全是可选的，不过随着一步步学习的深入，你会庆幸拥有它们。7.Vue.js计算属性计算属性在模板表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构

19、。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么Vue.js将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当适用计算属性。基础例子 fullName /*var vm = new Vue( el:#app, data: a:1 , computed: /一个计算属性的getter b:function() /this指向vm实例 return this.a +1; ) var vm = new Vue( el:#app, data: firstName:Foo, lastName:Bar, fullName:Foo Bar );计算属性vs.$watchVue.js

20、 提供了一个方法 $watch，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人 特别是如果你来自 AngularJS。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。 vm.$watch(firstName,function(val) /回调函数 this.fullName = val+ +this.lastName; ) vm.$watch(lastName,function(val) this.fullName = this.firstName + +val; ) */ /代码改进 var vm = new Vue(

21、 el:#app, data: firstName:Foo, lastName:Bar , /* computed: fullName:function() return this.firstName + +this.lastName; */计算setter计算属性默认只是一个getter，不过在需要时你也可以提供一个setter computed: fullName: /getter get:function() return this.firstName + +this.lastName; , /setter set:function(newValue) var names = newValue.split( ); this.firstName = names0; this.lastName = namesnames.length -1; ) vm.fullName = John Doe;