导图社区 Vue
- 412
- 24
- 6
- 举报
Vue
Vue，包括：学习目标，Vue概述，Vue实例，指令 ，组件化，Vuejs-ajax...... 通过克隆查看注释（包含代码和部分其他笔记）。 关注wry，查看更多笔记。
编辑于2022-01-19 00:20:11
- linux
Linux是一套不用付费使用和自由传播的类Unix操作系统，是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。专业性强，主要用于服务器，嵌入式系统，移 动终端系统等
- Thymeleaf
Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码，开发者只需将标签属性添加到模板中即可。
- Nginx
这是一篇关于Nginx的思维导图，主要内容有1.目标、2.Nginx的安装与启动、3.Nginx静态网站部署、4.Nginx反向代理与负载均衡。
Vue
社区模板帮助中心，点此进入>>
- linux
Linux是一套不用付费使用和自由传播的类Unix操作系统，是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。专业性强，主要用于服务器，嵌入式系统，移 动终端系统等
- Thymeleaf
Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码，开发者只需将标签属性添加到模板中即可。
- Nginx
这是一篇关于Nginx的思维导图，主要内容有1.目标、2.Nginx的安装与启动、3.Nginx静态网站部署、4.Nginx反向代理与负载均衡。
- 相似推荐
- 大纲
Vue
0. 学习目标
会创建Vue实例，知道Vue的常见属性
会使用Vue的生命周期的钩子函数
能够使用vue常见指令
能够使用vue计算属性和watch监控
能够编写Vue组件
能够使用axios发送异步请求获取数据
1. Vue概述
目标
MVVM模式应用特点，Vue概念
1.1. 前言
先了解一下前端开发模式的发展。
静态页面
最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务端到客户端单向流通。开发人员 也只关心页面的样式和内容。
异步刷新，操作DOM
1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。 随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。
ajax盛行：
2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果。
此时的开发人员不仅仅要编写HTML样式，还要懂ajax与后端交互，然后通过JS操作Dom元素来实现页面动态效果。比较流行的框架如jQuery就是典型代表。
MVVM，关注模型和视图
2008年，google的Chrome发布，随后就以极快的速度占领市场，超过IE成为浏览器市场的主导者。
2009年，Ryan Dahl在谷歌的Chrome V8引擎基础上，打造了基于事件循环的异步IO框架：Node.j
基于时间循环的异步IO
单线程运行，避免多线程的变量同步问题
JS可以编写后台diamante，前后台统一编程语言
node.js的伟大之处不在于让JS迈向了后端开发，而是构建了一个庞大的生态系统。
2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。
随后，在node的基础上，涌现出了一大批的前端框架：
MVVM模式
M：即Model，模型，包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）
在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中
而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：
只要Model发生了改变，View上自然就会表现出来
当用户修改了View，Model中的数据也会跟着改变。
把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上
今天要学习的，就是一款MVVM模式的框架：Vue
1.2. 认识Vue
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以其轻量易用著称，vue.js和React.js发展速度最快
渐进式：可以选择性的使用该框架的一个或一些组件，这些组件的使用也不需要将框架全部组件都应用；而且用了这些组件也不要求你的系统全部都使用该框架。
官网：
参考：
Git地址：
尤雨溪，Vue.js 创作者，Vue Technology创始人，致力于Vue的研究开发。
小结
MVVM通过视图与模型的双向绑定，简化前端操作。Vue是一款前端渐进式框架，可以提高前端开发效率。
2. 快速入门
2.1. 创建工程
创建一个新的工程；选择静态web类型工程：
2.2. 安装vue
目标
使用IDEA创建示例工程并在工程中通过npm安装下载vue.js
分析
vue是一个前端框架，也是其实是一个js文件；下载vue.js文件并在页面中引入该js文件。
vue.js的下载方式：
可以引用在线的vue.js；
可以离线下载vue.js；
npm包资源管理器，可以下载vue.js
2.2.1. 下载安装
下载地址
可以下载2.6.10版本https://github.com/vuejs/vue/archive/v2.6.10.zip 或 资料 文件夹中也已下载
下载解压，在 dist 可得到vue.js文件。
2.2.2. 使用CDN
或者也可以直接使用公共的CDN（内容分发网络）服务：
<!-- 开发环境版本，包含了用帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
<!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.2.3. npm安装(推荐)
在idea的左下角，有个Terminal按钮，点击打开控制台：
或者使用cmd进入E:\IdeaProject\wry-vuejs
先输入：
npm init -y
对项目进行初始化
此时，会在项目目录下出现一个package.json文件。
这是对项目的基本描述信息。例如名称、版本等，有点类似java中的pom文件。
安装Vue，输入命令：
# save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖
npm install vue --save
使用管理员身份进入到项目路径下执行上述命令：
然后就会在项目目录发现一个node_modules目录，并且在下面有一个vue目录。
node_modules是通过npm安装的所有模块的默认位置。
此时再查看package.json，会发现有了变化：
会发现，刚刚安装的vue依赖再这里出现了描述信息。是不是跟pom文件很像？
小结
使用了npm的方式安装vue模块：
#初始化 npm init -y #下载vue模块 npm install vue --save
2.3. vue入门案例
目标
创建01-demo.html页面并初始化Vue实例，通过console修改Vue数据实现双向绑定效果和创建按钮实现点击即自增创建01-demo.html页面并初始化Vue实例，通过console修改Vue数据实现双向绑定效果和创建按钮实现点击即自增
分析
1. 创建页面，初始化vue；
2. {{}}获取显示数据；
3. v-model实现双向绑定；
4. v-on演示事件处理
2.3.1. HTML模板
在项目目录新建一个HTML文件 01-demo.html
2.3.2. vue渲染
01-demo.html内容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>{{name}}</h2> 非常666！ </div> <script type="text/javascript"> var app = new Vue({ el:"#app",//el即element，要渲染的页面元素 data:{ name: "wry" } }); </script> </body> </html>
首先通过 new Vue()来创建Vue实例
然后构造函数接收一个对象，对象中有一些属性：
el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
name：这里指定了一个name属性
页面中的 h2 元素中，通过{{name}}的方式，来渲染刚刚定义的name属性。
打开页面查看效果：
更神奇的在于，当你修改name属性时，页面会跟着变化：
app.name="后端开发"
更改name属性后回车，属性更改成功，页面跟着变化
2.3.3. 双向绑定
对刚才的案例进行简单修改：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="num"> <h2>{{name}} 非常666！熟悉{{num}}种java后端开发技术</h2> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { name: "wry", num: 30 } }); </script> </body> </html>
在data添加了新的属性： num 在页面中有一个 input 元素，通过 v-model 与 num 进行绑定。 同时通过 {{num}} 在页面输出
效果：
可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。
input与num绑定，input的value值变化，影响到了data中的num值 页面 {{num}} 与数据num绑定，因此num值变化，引起了页面效果变化。
没有任何dom操作，这就是双向绑定的魅力。
2.3.4. 事件处理
在页面添加一个按钮：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="num"><button v-on:click="num++">点我+1</button> <h2>{{name}} 非常666！熟悉{{num}}种java后端开发技术</h2> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { name: "wry", num: 30 } }); </script> </body> </html>
这里用 v-on 指令绑定点击事件，而不是普通的 onclick ，然后直接操作num 普通onclick是无法直接操作num的
效果：
点击一次按钮后
3. Vue实例
3.1. 创建Vue实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vm = new Vue({ // 选项 })
在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：
el
data
methods
...
接下来一 一介绍。
3.2. 模板或元素
每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染；可以通过el属性来指定
例如一段html模板：
<div id="app"> </div>
然后创建Vue实例，关联这个div
var vm = new Vue({ el:"#app" })
这样，Vue就可以基于id为 app 的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
3.3. 数据
当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。
html：
<div id="app"> <input type="text" v-model="name"/> </div>
js:
var vm = new Vue({ el:"#app", data:{name:"黑马" } })
name的变化会影响到 input 的值
input中输入的值，也会导致vm中的name发生改变
3.4. 方法
Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用
html:
<div id="app"> <button v-on:click="add">点我</button> </div>
js:
var vm = new Vue({ el:"#app", data:{ },methods:{ add:function(){ console.log("点我了...233") } } })
3.5. 生命周期钩子
目标
了解Vue实例生命周期，生命周期的钩子函数及created函数常用场景
分析
在创建vue实例的时候可以指定模板id、数据和方法；而如果要在实例化、模板渲染的过程中需要执行一些其它操作的话；那么可以使用钩子函数。
3.5.1. 生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数））。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用
所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos() )。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同， this.fetchTodos 的行为未定义。
生命周期：
vm.$el ：Vue 实例使用的根 DOM 元素
vm.$root ：当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。
3.5.2.钩子函数
例如：created代表在vue实例创建后；
可以在Vue中定义一个created函数，代表这个时期的构造函数
创建示例html页面02-lifecycle.html如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{msg}} </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { //从初始化为空 msg: "" }, //钩子函数 created() { this.msg = "hello msg,created."; } }); </script> </body> </html>
结果：
3.5.3.this
可以看下在vue内部的this变量是谁，在created的时候，打印this
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{msg}} </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { //从初始化为空 msg: "" }, //钩子函数 created() { this.msg = "hello msg,created."; console.log(this); } }); </script> </body> </html>
控制台的输出：
总结： this 就是当前的Vue实例，在Vue对象内部，必须使用 this 才能访问到Vue中定义的data内属性、方法等。
**小结**：
钩子函数会在vue实例的各个生命周期阶段自动调用；具体有：beforeCreate，created,beforeMount,mounted,updated,beforeUpdate，destroyed，beforeDestroy
created钩子函数常用场景：用于初始化数据
钩子函数不要使用箭头函数的方式编写。
4. 指令
什么是指令？
指令 (Directives) 是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。
4.1. 插值表达式
目标
插值使用场景和要求；v-text和v-html的作用
4.1.1. 花括号
格式：
{{表达式}}
说明：
该表达式支持JS语法，可以调用js内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
可以直接获取Vue实例中定义的数据或函数
4.1.2. 插值闪烁
使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的 {{}} ，加载完毕后才显示正确数据，称为插值闪烁。类似如下的效果（最新vue是几乎没有此问题）：
4.1.3. v-text和v-html
使用v-text和v-html指令来替代 {{}}
说明：
v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> v-text：<span v-text="msg"></span><br> v-html：<span v-html="msg"></span><br> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { //从初始化为空 msg: "<h2>hello,vue</h2> " } }); </script> </body> </html>
效果：
并且不会出现插值闪烁，当没有数据时，会显示空白
小结
**插值**可以使用在有需要显示vue实例数据的地方，可以在插值表达式中调用实例的数据属性和函数。
v-text和v-html的作用：可以将数据在模板中进行显示；**区别**：v-html会对内容中出现的html标签进行渲染，而v-text会将内容当做普遍文本输出到元素里面。
4.2. v-model
目标
使用v-model指令实现复选框的双向绑定
刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：
input
select
textarea
checkbox
radio
components（Vue中的自定义组件）
基本上除了最后一项，其它都是表单的输入项。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="checkbox" value="Java" v-model="languages">Java<br> <input type="checkbox" value="JavaScript" v-model="languages">JavaScript<br> <input type="checkbox" value="Vue" v-model="languages">Vue<br> <h2> 你选择了:{{languages.join(",")}} </h2> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { languages: [] } }); </script> </body> </html>
多个 checkbox 对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
radio对应的值是input的value值
input 和 textarea 默认对应的model是字符串
select 单选对应字符串，多选对应也是数组
效果：
小结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="checkbox" value="Java" v-model="languages">Java<br> <input type="checkbox" value="JavaScript" v-model="languages">JavaScript<br> <input type="checkbox" value="Vue" v-model="languages">Vue<br> <h2> 你选择了:{{languages.join(",")}} </h2> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { languages: [] } }); </script> </body> </html>
多个 checkbox 对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
radio对应的值是input的value值
input 和 textarea 默认对应的model是字符串
select 单选对应字符串，多选对应也是数组
4.3. v-on
目标
了解v-on指令的语法实现按钮点击后的递增和递减
分析
在没有使用vue之前；页面标签可以通过设置onXXX响应事件；在vue中可以通过v-on指令响应事件。
4.3.1. 基本用法
v-on指令用于给页面元素绑定事件。
语法：
v-on:事件名="js片段或函数名"
简写语法：
@事件名="js片段或函数名"
例如 v-on:click='add' 可以简写为 @click='add'
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--直接写js片段--> <button v-on:click="num++">增加</button> <!--使用函数名，该函数必须要在vue实例中定义--> <button @click="decrement">减少</button> <h2> num = {{num }} </h2> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { num: 1 }, methods: { //递减 decrement() { this.num--; } } }); </script> </body> </html>
效果：
4.3.2. 事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们 可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop ：阻止事件冒泡
事件冒泡
子组件被点击，子组件和父组件都执行。在这个事件中，父组件执行被称为事件冒泡
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--直接写js片段--> <button v-on:click="num++">增加</button> <!--使用函数名，该函数必须要在vue实例中定义--> <button @click="decrement">减少</button> <h2> num = {{num }} </h2> <hr> 事件冒泡测试：<br> <div style="background-color: lightpink; width: 100px; height: 100px" @click="print('div被点击了')"> <button @click="print('点击了button')">点我试试</button> </div> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { num: 1 }, methods: { //递减 decrement() { this.num--; }, //打印 print(str) { console.log(str); } } }); </script> </body> </html>
效果
阻止事件冒泡
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--直接写js片段--> <button v-on:click="num++">增加</button> <!--使用函数名，该函数必须要在vue实例中定义--> <button @click="decrement">减少</button> <h2> num = {{num }} </h2> <hr> 事件冒泡测试：<br> <div style="background-color: lightpink; width: 100px; height: 100px" @click="print('div被点击了')"> <button @click.stop="print('点击了button')">点我试试</button> </div> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { num: 1 }, methods: { //递减 decrement() { this.num--; }, //打印 print(str) { console.log(str); } } }); </script> </body> </html>
效果
.prevent ：阻止默认事件发生
默认事件
点击超级链接，跳转到超级链接的页面
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--直接写js片段--> <button v-on:click="num++">增加</button> <!--使用函数名，该函数必须要在vue实例中定义--> <button @click="decrement">减少</button> <h2> num = {{num }} </h2> <hr> 事件冒泡测试：<br> <div style="background-color: lightpink; width: 100px; height: 100px" @click="print('div被点击了')"> <button @click.stop="print('点击了button')">点我试试</button> </div> <br> 阻止默认事件：<br> <a href="https://www.baidu.com/" @click="print('点击了超链接')">百度</a> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { num: 1 }, methods: { //递减 decrement() { this.num--; }, //打印 print(str) { console.log(str); } } }); </script> </body> </html>
效果
阻止默认事件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--直接写js片段--> <button v-on:click="num++">增加</button> <!--使用函数名，该函数必须要在vue实例中定义--> <button @click="decrement">减少</button> <h2> num = {{num }} </h2> <hr> 事件冒泡测试：<br> <div style="background-color: lightpink; width: 100px; height: 100px" @click="print('div被点击了')"> <button @click.stop="print('点击了button')">点我试试</button> </div> <br> 阻止默认事件：<br> <a href="https://www.baidu.com/" @click.prevent="print('点击了超链接')">百度</a> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { num: 1 }, methods: { //递减 decrement() { this.num--; }, //打印 print(str) { console.log(str); } } }); </script> </body> </html>
效果
.capture ：使用事件捕获模式v
.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once ：只执行一次
小结
v-on的使用：
**事件修饰符**：语法v-on:xxxx.修饰符，常用的修饰符有：
.stop ：阻止事件冒泡
.prevent ：阻止默认事件发生
.capture ：使用事件捕获模式
.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once ：只执行一次
4.4. v-for
目标
了解v-for指令语法实现对数组、对象的遍历
分析
实现：可以在vue实例化的时候指定要遍历的数据，然后通过v-for指令在模板中遍历显示数据。一般情况下，要遍历的数据可以通过钩子函数created发送异步请求获取数据。
4.4.1. 遍历数组
语法
v-for="item in items"
items：要遍历的数组，需要在vue的data中定义好。
item：循环变量
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="user in users"> {{user.name}}--{{user.age}}--{{user.gender}} </li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { users:[ {"name":"wry","age":22,"gender":"男"}, {"name":"chm","age":22,"gender":"男"}, {"name":"aa","age":22,"gender":"男"} ] } }); </script> </body> </html>
效果：
4.4.2. 数组角标
在遍历的过程中，如果需要知道数组角标，可以指定第二个参数：
语法
v-for="(item,index) in items"
items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从0开始。
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(user,index) in users"> {{index}}--{{user.name}}--{{user.age}}--{{user.gender}} </li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { users:[ {"name":"wry","age":22,"gender":"男"}, {"name":"chm","age":22,"gender":"男"}, {"name":"aa","age":22,"gender":"男"} ] } }); </script> </body> </html>
效果：
4.4.3. 遍历对象
v-for除了可以迭代数组，也可以迭代对象。语法基本类似
语法
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
1个参数时，得到的是对象的值
2个参数时，第一个是值，第二个是键
3个参数时，第三个是索引，从0开始
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(user,index) in users"> {{index}}--{{user.name}}--{{user.age}}--{{user.gender}} </li> </ul> <hr> <ul> <li v-for="(value,key,index) in person"> {{index}}--{{key}}--{{value}} </li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { users:[ {"name":"wry","age":22,"gender":"男"}, {"name":"chm","age":22,"gender":"男"}, {"name":"aa","age":22,"gender":"男"} ], person:{"name":"ccc","age":22,"gender":"男" } } }); </script> </body> </html>
效果
4.4.4. key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
如果使用key这个功能可以有效的提高渲染的效率；key一般使用在遍历完后，又增、减集合元素的时候更有意义。
但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。 也就是key是该项的唯一标识。
示例：
<ul><li v-for="(item,index) in items" :key="index"></li> </ul>
这里使用了一个特殊语法： :key="" 后面会讲到，它可以让你读取vue中的属性，并赋值给key属性
这里绑定的key是数组的索引，应该是唯一的
小结
可以使用v-for遍历数组、对象：
如果遍历的时候需要使用到索引号，可以在循环遍历的位置，添加一个参数；该索引号是从0开始的。
4.5.v-if和v-show
目标
说出v-if与v-show的区别；通过一个按钮的点击，实现遍历数组结果的显示存在与否并在遍历过程中使用v-if对数据进行判断处理；实现文本内容的隐藏主题
分析
v-if：通过一个按钮的点击，实现遍历数组结果的显示存在与否并在遍历过程中使用v-if对数据进行判断处理
v-show：实现文本内容的隐藏
4.5.1. 基本使用
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
语法：
v-if="布尔表达式"
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="show=!show">点我</button> <h2 v-if="show">条件判断v-if</h2> <ul> <li v-for="(user,index) in users" v-if="user.gender=='女'"> {{index}}--{{user.name}}--{{user.age}}--{{user.gender}} </li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { show: true, users: [ {"name": "wry", "age": 22, "gender": "男"}, {"name": "chm", "age": 22, "gender": "女"}, {"name": "aa", "age": 22, "gender": "女"} ] } }); </script> </body> </html>
效果：
点击按钮后
4.5.2. 与v-for结合
当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="show=!show">点我</button> <h2 v-if="show">条件判断v-if</h2> <ul> <li v-for="(user,index) in users" v-if="user.gender=='女'"> {{index}}--{{user.name}}--{{user.age}}--{{user.gender}} </li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { show: true, users: [ {"name": "wry", "age": 22, "gender": "男"}, {"name": "chm", "age": 22, "gender": "女"}, {"name": "aa", "age": 22, "gender": "女"} ] } }); </script> </body> </html>
效果：
点击按钮后
4.5.3. v-else
可以使用 v-else 指令来表示 v-if 的“else 块”：
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(user,index) in users" v-if="user.gender=='女'" style="background-color: pink"> {{index}}--{{user.name}}--{{user.age}}--{{user.gender}} </li> <li v-else style="background-color: green"> {{index}}--{{user.name}}--{{user.age}}--{{user.gender}} </li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { show: true, users: [ {"name": "wry", "age": 22, "gender": "男"}, {"name": "chm", "age": 22, "gender": "女"}, {"name": "aa", "age": 22, "gender": "女"} ] } }); </script> </body> </html>
效果：
v-else-if ，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
类似于 v-else ， v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
示例：
4.5.4. v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样
示例：
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 只是简单地切换元素的 CSS 属性 display 。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="show=!show">展示或者隐藏正文的按钮</button> <h2 v-show="show"> v-show展示 </h2> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { show: true } }); </script> </body> </html>
效果：
点击按钮可以展示或者隐藏正文
小结
v-if在条件不满足的时候元素不会存在；v-show条件不满足的时候只是对元素进行隐藏。
4.6. v-bind
目标
了解v-bind语法和作用；实现点击不同按钮切换不同的属性值；使用class属性中的特殊用法实现一个按钮切换背景色
分析
<img src="" height=""/> 其中src和height的值如果不想写死，而是想获取vue实例中的数据属性值的话；那可以通过使用v-bind实现：
<img v-bind:src="vue实例中的数据属性名" :height="vue实例中的数据属性名"/>
4.6.1. 属性上使用vue数据
解读
页面有两个按钮，点击时，会改变Vue实例中的color值，这个值与前面定义的CSS样式一致。
目前div的class为空，希望实现点击按钮后，div的class样式会在.red和.blue之间切换
该如何实现？
大家可能会这么想，既然color值会动态变化为不同的class名称，那么我们直接把color注入到class属性就好了，于是就这样写：
<div class="{{color}}"></div>
这样写是错误的！因为插值表达式不能用在标签的属性中。
此时，Vue提供了一个新的指令来解决：v-bind，语法：
v-bind:属性名="Vue中的变量
例如，在这里我们可以写成：
<div v-bind:class="color"></div>
不过，v-bind太麻烦，因此可以省略，直接写成： :属性名='属性值' ，即：
<div :class="color"></div>
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <style> div{ width: 100px; height: 100px; color: yellow; } .blue{ background-color:blue; } .red{ background-color:red; } </style> <body> <div id="app"> <button @click="color='blue'">蓝色</button> <button @click="color='red'">红色</button> <div :class="color">点击按钮切换背景色</div> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { color:"blue" } }); </script> </body> </html>
效果
点击按钮切换背景色
4.6.2. class属性的特殊用法
上面虽然实现了颜色切换，但是语法却比较啰嗦。
Vue对class属性进行了特殊处理，可以接收数组或对象格式
对象语法
可以传给 :class 一个对象，以动态地切换 class：
<div :class="{ red: true,blue:false }"></div>
对象中，key是已经定义的class样式的名称，如本例中的： red 和 blue
对象中，value是一个布尔值，如果为true，则这个样式会生效，如果为false，则不生效
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <style> div{ width: 100px; height: 100px; color: yellow; } .blue{ background-color:blue; } .red{ background-color:red; } </style> <body> <div id="app"> <button @click="bool=!bool">点击改变背景色</button> <div :class="{red:bool,blue:!bool}">点击按钮切换背景色</div> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { bool:true } }); </script> </body> </html>
首先class绑定的是一个对象： {red:bool, blue: !bool}
red和blue两个样式的值分别是bool和!bool，也就是说这两个样式的生效标记恰好相反，一个生效，另一 个失效。
bool默认为true，也就是说默认red生效，blue不生效
现在只需要一个按钮即可，点击时对bool取反，自然实现了样式的切换
效果
点击按钮切换背景色
小结
v-bind的作用：可以对所有元素的属性设置vue实例的数据。
4.7. 计算属性
目标
计算属性的应用场景，实现将一个日期时间值转换为yyyy-MM-dd格式字符串
分析
一个日期的毫秒值要显示为格式化（yyyy-MM-dd）的日期字符串的话；可以使用computed计算属性里面的方法进行处理。
在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，有一个日期的数据，但是是毫秒值
在页面渲染，希望得到yyyy-MM-dd的样式则需要如下处理：
Vue中提供了计算属性，来替代复杂的表达式：
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2> 你的生日是：{{birth}} </h2> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { birthday:1429032123201 }, computed:{ birth(){ const date = new Date(this.birthday); return date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate(); } } }); </script> </body> </html>
计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。
效果：
小结
computed计算属性的应用场景：可以应用在插值或者指令表示式复杂的时候。可以将一些属性数据经过方法处理之后返回。
4.8.watch
目标
watch的使用场景；并使用其监听简单属性值及其对象中属性值的变化
分析
在vue实例中数据属性；因为在页面中修改而产生了变化；可以通过watch监控获取其改变前后的值。
如果是修改的对象数据属性，可以开启深度监控获取修改后最新的对象数据。如：person.name
4.8.1. 监控
watch可以让我们监控一个值的变化。从而做出相应的反应
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message"> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { message:"wry" }, watch:{ message(newValue,oldValue){ console.log("新值："+newValue+"；旧值："+oldValue); } } }); </script> </body> </html>
效果
4.8.2. 深度监控
如果监控的是一个对象，需要进行深度监控，才能监控到对象中属性的变化，例如
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="person.name"><br> <input type="text" v-model="person.age"><button @click="person.age++">+</button> <br> <h2> 姓名为：{{person.name}}；年龄为：{{person.age}}； </h2> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { person: {"name":"wry","age":23} }, watch:{ person:{ //开启深度监控，可以监控到对象属性值的变化 deep: true, //监控的处理方法 handler(obj){ console.log("name="+obj.name+";age="+obj.age); } } } }); </script> </body> </html>
变化
以前定义监控时，person是一个函数，现在改成了对象，并且要指定两个属性：
handler：就是以前的监控处理函数
效果
点击按钮
小结
watch使用场景：可以监控视图中数据的变化而做出响应；如：下拉框列表中，当如果选择了对于的下拉框选项之后，要根据最新的值去加载一些其它数据的话。
5. 组件化
目标
了解组件的使用场景；定义点击则计数的组件并使用全局注册和局部注册方式
分析
可以将通用或者公用的页面模块抽取成vue组件，在vue实例中引用。
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发，这无疑增加了开发的成本。所以会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
5.1. 定义全局组件
通过Vue的component方法来定义一个全局组件。
组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
data的定义方式比较特殊，必须是一个函数。
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--使用定义好的全局组件--> <counter></counter> </div> <script type="text/javascript"> //定义组件 const counter = { template: "<button @click='num++'>你点击了{{num}}次</button>", data() { return{num: 0} } }; //全局注册组件；参数1：组件名称，参数2：组件 Vue.component("counter",counter); var app = new Vue({ el: "#app" }); </script> </body> </html>
效果
5.2. 组件的复用
定义好的组件，可以任意复用多次：
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--使用定义好的全局组件--> <counter></counter> <counter></counter> <counter></counter> </div> <script type="text/javascript"> //定义组件 const counter = { template: "<button @click='num++'>你点击了{{num}}次</button>", data() { return{num: 0} } }; //全局注册组件；参数1：组件名称，参数2：组件 Vue.component("counter",counter); var app = new Vue({ el: "#app" }); </script> </body> </html>
效果
你会发现每个组件互不干扰，都有自己的num值。怎么实现的？
组件的data属性必须是函数！
当定义这个 <counter> 组件时，它的data 并不是像这样直接提供一个对象：
取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
如果 Vue 没有这条规则，点击一个按钮就会影响到其它所有实例！
5.3. 局部注册
一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。
因此，对于一些并不频繁使用的组件，会采用局部注册。
先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：
然后在Vue中使用它：
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--使用定义好的全局组件--> <counter></counter> </div> <script type="text/javascript"> //定义组件 const counter = { template: "<button @click='num++'>你点击了{{num}}次</button>", data() { return {num: 0} } }; var app = new Vue({ el: "#app", //局部注册组件 components: { counter: counter } }); </script> </body> </html>
components就是当前vue对象子组件集合。
其key就是子组件名称
其值就是组件对象的属性
效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用
小结
组件使用场景：在项目需要重用某个模块（头部、尾部、新闻。。。）的时候，可以将模块抽取成组件，其它页面中注册组件并引用。
全局注册：在任何vue实例中都可以引用，如：一般网站的头部导航菜单
局部注册：可以在有需要的页面引入组件，如：商城网站首页页面中各种活动模块
5.4. 组件通信
通常一个单页应用会以一棵嵌套的组件树的形式来组织
页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
左侧内容区又分为上下两个组件
右侧边栏中又包含了3个子组件
各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。
5.4.1. 父向子传递props
目标
父组件与子组件通信的意义；实现父组件将简单字符串和对象更新到子组件
比如有一个子组件：
这个子组件中要使用title属性渲染页面，但是自己并没有title属性
通过props来接收父组件属性，名为title
父组件使用子组件，同时传递title属性：
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--使用组件--> <introduce :title="msg"></introduce> </div> <script type="text/javascript"> //定义组件 const introduce = { template: "<h2>{{title}}</h2>", //定义接受父组件的属性 props:["title"] }; //全局注册组件 Vue.component("introduce",introduce); var app = new Vue({ el: "#app", data:{ msg:"父组件的msg属性数据内容" } }); </script> </body> </html>
效果
5.4.2. 传递复杂数据
定义一个子组件：
这个子组件可以对 items 进行迭代，并输出到页面。
但是组件中并未定义items属性。
通过props来定义需要从父组件中接收的属性
items：是要接收的属性名称
type：限定父组件传递来的必须是数组，否则报错；type的值可以是Array或者Object（传递对象的 时候使用）
default：默认值，
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--使用组件--> <my-list :items="skills"></my-list> </div> <script type="text/javascript"> //定义组件 const myList = { template:` <ul> <li v-for="item in items" :key="item.id">{{item.id}}--{{item.name}}</li> </ul> `, //定义接受父组件的属性 props:{ items:{ //必须为数组类型 type:Array, //默认为空数组 default:[] } } }; var app = new Vue({ el: "#app", data:{ msg:"父组件的msg属性数据内容", skills:[ {"id":1,"name":"java"}, {"id":2,"name":"Vue"}, {"id":3,"name":"Linux"} ] }, components:{ myList } }); </script> </body> </html>
效果
小结
组件通信意义：父子组件之间数据的交换，能够及时更新组件内容。
5.5.3. 子向父的通信
目标
在子组件中点击对应按钮实现父组件中属性数据的改变
子组件接收父组件的num属性
子组件定义点击按钮，点击后对num进行加或减操作
子组件接收到父组件属性后，默认是不允许修改的。怎么办？
既然只有父组件能修改，那么加和减的操作一定是放在父组件：
但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？
可以通过v-on指令将父组件的函数绑定到子组件上：
然后，当子组件中按钮被点击时，调用绑定的函数：
vue提供了一个内置的this.$emit函数，用来调用父组件绑定的函数
子组件不能直接修改父组件传递参数的引用或者基本类型参数值
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>{{num}}</h2> <!--使用组件--> <counter :snum="num" @plus="numPlus" @reduce="numReduce"></counter> </div> <script type="text/javascript"> //定义组件 const counter = { template:` <div> <button @click="increNum">+</button> <button @click="decrNum">-</button> </div> `, //定义接受父组件的属性 props:["snum"], methods:{ //递增 increNum(){ //调用父组件中的方法 return this.$emit("plus"); }, //递减 decrNum(){ //调用父组件中的方法 return this.$emit("reduce"); } } }; var app = new Vue({ el: "#app", //局部注册组件 components:{ counter }, data:{ num:0 }, methods: { numPlus(){ this.num++; }, numReduce(){ this.num--; } } }); </script> </body> </html>
效果
点击按钮实现数字的加减
6. Vuejs ajax
Vuejs 并没有直接处理ajax的组件，但可以使用axios或vue-resource组件实现对异步请求的操作
6.1 vue-resource
vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新 到2.0之后，作者就宣告不再对vue-resource更新，而是推荐axios。
vue-resource的github地址：
6.2 axios简介
目标
axios的用途及了解常见方法
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
axios的github地址：
# 如果使用npm则可以如下安装
npm install axios
或者也可以直接使用公共的CDN（内容分发网络）服务
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
小结
axios的作用：**发送异步请求获取数据**。常见的方法：**get、post**；在发送的时候可以指定参数（地址、请求方式和请求头部信息）；返回数据结构（**data**/status/statusText/headers/config）
6.3 axios应用
目标
使用axios方法获取数据并在页面中将数据遍历显示；切换改为get/post方法实现数据加载
6.3.1 方法说明
axios可以使用的方法有：
axios(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
1）config请求配置
2）响应结构
使用 then 时，你将接收下面这样的响应：
在使用 catch 时，或传递 rejection callback 作为 then 的第二个参数时，响应可以通过 error 对象可被使用。
6.3.2 axios方法示例
注意：如果使用axios访问跨域数据的时候，只需要在服务提供方中，在方法上面使用SpringMVC的跨域注解即可解决数据跨域问题。如在方法上添加：@CrossOrigin(origins = "http://localhost:10000")
如果请求的地址是使用了网关，那么在网关服务器上配置跨域就可以了；不能同时在网关服务器和服务提供服务工程中同时配置。
可以通过向 axios 传递相关配置来创建请求
axios(config)
实例
data.json
[ {"name": "wry","age": 18,"gender": "male"}, {"name": "aa","age": 18,"gender": "male"}, {"name": "chm","age": 18,"gender": "female"} ]
axios.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> <script src="js/axios.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(user,index) in users"> {{index}}--{{user.name}}--{{user.age}}--{{user.gender}} </li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { users:[] }, created(){ //初始化加载数据 axios({ url:"data.json", method:"get" }).then(res=>{ console.log(res); //将数据赋值到vue实例中的数据属性users； //不能使用this，在axios回调函数中表示窗口，不是vue实例 app.users = res.data; }).catch(err => alert(err)); } }); </script> </body> </html>
效果
6.3.3 get方法示例
将上述示例中的axios操作部分修改为如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue测试</title> <script src="node_modules/vue/dist/vue.js"></script> <script src="js/axios.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(user,index) in users"> {{index}}--{{user.name}}--{{user.age}}--{{user.gender}} </li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: "#app",//el即element，要渲染的页面元素 data: { users:[] }, created(){ //初始化加载数据 axios.get("data.json").then(res=>{ console.log(res); //将数据赋值到vue实例中的数据属性users； //不能使用this，在axios回调函数中表示窗口，不是vue实例 app.users = res.data; }).catch(err => alert(err)); } }); </script> </body> </html>
效果
6.3.4 post方法示例
将示例中的axios操作部分修改为如下：
效果
小结
可以使用axios获取对应服务器数据；如果不是同一个服务的数据则可能会出现跨域请求；需要在响应的服务器上配置跨域。
跨域：在前端js中如果发送异步请求的话，请求的地址与当前服务器的ip或者端口号不同都是跨域请求，可以使用如下方式在服务器端进行配置：
小结
1、Vue概述
前端开发模式的发展
静态页面
jQuery
vue.js
vue.js是一个渐进式前端框架，可以提高前端开发效率
2、快速入门
搭建示例工程
安装下载vue.js
测试
3、vue实例
创建vue实例
绑定一个模板
设置数据
设置方法
钩子函数
beforeCreate
created 一般使用它来进行初始化加载数据
mount
update
destroy
4、vue指令
插值表达式：能够设置有返回值的表达式；{{}}
v-model 双向绑定
v-on 绑定事件
语法
v-on:click
@click
事件修饰符
在v-on:click之后添加 修饰符，如 .stop
v-for 遍历集合、对象
v-for="循环遍历 in 数组或者集合"
v-if 或 v-show
v-bind 可以对元素的任何属性设置vue实例的数据
计算属性：可以使用方法对数据进行处理
watch 监控数据属性的变化
5、组件
可以将通用、公用的模块抽取成组件，在vue实例中引用
全局注册：在任何实例中都可以使用
局部注册：在vue实例中使用
组件通信
父向子传递数据props
子向父传递数据可以使用 $emit
6、vue ajax- axios
axios可以实现异步请求操作
安装下载axios js文件
axios方法使用
axios
get
post