完整word版vuejs教程.docx

资源描述

完整word版vuejs教程.docx

《完整word版vuejs教程.docx》由会员分享，可在线阅读，更多相关《完整word版vuejs教程.docx（17页珍藏版）》请在冰点文库上搜索。

完整word版vuejs教程.docx

完整word版vuejs教程

Vue.js学习

在学习vue之前，需先学习node.js与webpack

1.关于Vue.js

Vue.js用于构建交互式的web界面的库。

他提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API，Vue.js集成在MVVM模式上的试图模型层，并通过双向绑定连接视图和模型。

实际的DOM操作和输出格式被抽象出来成指令和过滤器。

相比其他的MVVM框架，Vue.js更容易上手。

Vue.js是一个用于创建Web交互界面的库。

它让你通过简单而灵活的API创建由数据驱动的UI组件。

npm（nodepackagemanager）：

作为node的包管理工具，极大地便利了我们的开发工作。

包括：

安装、卸载、更新、查看、搜索、发布等。

你的团队无需去亲自开发一些特定功能的模块，而是直接引用各个领域专家写好的代码。

即使你的团队不需要引用外部代码，这种基于模块的开发方式也能很好的推动团队开发。

Node.js：

Node.js就是运行在服务端的JavaScript。

Node.js是一个基于ChromeJavaScript运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的v8引擎，v8引擎执行JavaScript的速度非常快，性能非常好。

webstrom：

为JS开发做了很多优化，

MVVM（Model-View-ViewModel）：

MVVM框架的由来白女士MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。

2.安装Vue.js

1、独立版本

直接下载

--单项绑定-->

--v-model:

双向绑定-->

--渲染列表-->

click="reverseMessage">ReverseMessage

--处理用户输入-->

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更新搅在一起。

这让我们的代码更容易撰写、理解与维护。

DOCTYPEhtml>

Inserttitlehere

Hello

并且如你所想象的，它们会对绑定的目标元素添加响应式的特殊行为。

这个例子演示了我们不仅可以绑定DOM文本到数据，也可以绑定DOM结构到数据。

而且，Vue.js也提供一个强大的过渡效果系统，可以在Vue插入/删除元素时自动应用过渡效果。

例如v-for指令用于显示数组元素，v-bind指令用于绑定HTML特性。

组件系统是Vue.js另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组间来构建大型应用。

每个Vue.js应用的起步都是通过构造函数Vue创建一个Vue的根实例：

一个Vue实例其实正是一个MVVM模式中所描述的ViewModel-因此在文档中经常会使用vm这个变量名。

在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项

可以扩展Vue构造器，从而用预定义选项创建可复用的组件构造器

尽管可以命令式地创建扩展实例，不过在多数情况下将组件构造器注册为一个自定义元素，然后声明式地用在模板中。

如果再实例创建之后添加新的属性到实例上，它不会触发视图更新。

除了这些数据属性，Vue实例暴露了一些有用的实例属性与方法。

Vue实例在创建时有一系列初始化步骤----例如，它需要建立数据观察，编译模板，创建必要的数据绑定。

在此过程中，它也将调用一些生命周期钩子，给自定义逻辑提供运行机会。

也有一些其它的钩子，在实例生命周期的不同阶段调用，如compiled、ready、destroyed。

这意味着所有的Vue.js模板都是可解析的有效的HTML，且通过一些特殊的特性做了增强。

数据绑定最基础的形式是文本插值，使用"Mustache"语法（双大括号）：

你也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：

在网站上动态渲染任意HTML是非常危险的，因为容易导致[XSS攻击]（https:

记住，只对可信内容使用HTML插值，**永不**用于用户提交的内容。

在Vue.js中，一段绑定表达式由一个简单的JavaScript表达式和可选的一个或多个过滤器构成。

一个限制是每个绑定只能包含单个表达式，因此下面的语句是无效的：

指令的值限定为绑定表达式，因此上面提到的JavaScript表达式及过滤器规则在这里也适用。

指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上。

有些指令可以在其名称后面带一个“参数”（Argument），中间放一个冒号隔开。

这里href是参数，它告诉v-bind指令将元素的href特性跟表达式url的值绑定。

可能你已注意到可以用特性插值{%raw%}href="{{url}}"{%endraw%}获得同样的结果：

修饰符（Modifiers）是以半角句号.开始的特殊后缀，用于表示指令应当以特殊方式绑定。

例如.literal修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式：

当然，这似乎没有意义，因为我们只需要使用href="/a/b/c"而不必使用一个指令。

当你需要在一些现有的HTML代码中添加动态行为时，这些前缀可以起到很好的区分效果。

但你在使用一些常用指令的时候，你会感觉一直这么写实在是啰嗦。

而且在构建单页应用时，Vue.js会管理所有的模板，此时v-前缀也没那么重要了。

它们看起来跟“合法”的HTML有点不同，但是它们在所有Vue.js支持的浏览器中都能被正确地解析，并且不会出现在最终渲染的标记中。

缩写语法完全是可选的，不过随着一步步学习的深入，你会庆幸拥有它们。

在模板表达式非常便利，但是它们实际上只用于简单的操作。