VUE学习文档

回顾：

1、什么是ES6，ES和JS的关系

2、var、let、const

3、字符串函数

• indexOf

• lastIndexOf

• charAt

• substr

• substring

• concat

• includes

• startswith

• endswith

• 模板字符串 在这个里面写什么格式，最终就显示什么格式

4、解构表达式：将数组的值或者对象的属性 赋值给 变量

5、函数的简写方式：箭头函数

​ var print1 = a => a+b

​ var print2 = (a,b) => { console.log(a); console.log(b) }

6、对象中方法的简写方式

​ let person = {

​ name:“xxx”,

​ eat1:function(food){},

​ eat2(food){},

​ eat3: food => {}

​ }

总结

1 Vue是一个MVVM框架，什么是MVVM，

MVVM是MVC的升级，MVVM比MVC多了一个双向绑定

2 什么是双向绑定？

• 修改数据，页面会自动发生改变
• 修改页面，也会同步到数据

3、Vue中有哪些指令？

• v-for
• v-model
• v-bind
• v-show
• v-if
• v-text
• v-html
• v-on
• {{}}插值表达式

4、Vue生命周期的钩子函数有哪些？

• beforeCreate：创建前
• Created：创建完成(!!!)
• beforeMount：双向绑定前
• Mounted：双向绑定完成(!!!)
• beforeUpdate：更新前
• Updated：更新完成
• beforeDestory：销毁前
• Destoryed：销毁完成

5、什么是js的冒泡事件？（这是问题，得解决）

• 当事件发生后，这个事件就要开始传播(从里到外或者从外向里)，会触发所有父层或者子层的方法
• 解决方式：采用事件修饰符.stop解决

6、计算属性computed

7、watch监控某个属性的值发生改变的时候，做做件事情

0 目标

1. Vue基础语法
   • Vue的指令
   • Vue的动画
   • Vue的组件
   • Vue路由
   • Vue中组件生命周期
   • Vue中使用 axios 发起Ajax数据请求
2. Vue项目

1.前言

前端开发模式的发展。

静态页面

• 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。

异步刷新，操作DOM

• 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.

  随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。

• ajax盛行：

  • 2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果。
  • 此时的开发人员不仅仅要编写HTML样式，还要懂ajax与后端交互，然后通过JS操作Dom元素来实现页面动态效果。比较流行的框架如Jquery就是典型代表。

MVVM，关注模型和视图–相当于后端的MVC，但是前端的MVVM比MVC强大

• 2008年，google的Chrome发布，随后就以极快的速度占领市场，超过IE成为浏览器市场的主导者。

• 2009年，Ryan Dahl在谷歌的Chrome V8引擎基础上，打造了基于事件循环的异步IO框架：Node.js。

  • 基于时间循环的异步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上。

注：所有的获取页面元素或者给页面元素赋值的操作都是DOM操作

而我们今天要学习的，就是一款MVVM模式的框架：Vue

面试题1：解释一下MVVM？

M：model数据层

V：view视图层

VM：将model层和view层绑定在一起的层，这一层vue已经自动完成好了

面试2：MVC和MVVM的区别是什么？

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。

而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

• 只要我们Model发生了改变，View上自然就会表现出来。
• 当用户修改了View，Model中的数据也会跟着改变。

2.认识Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

渐进式：

1 我们可以像使用jQuery一样，使用vue – 熟悉vue的基础语法

2 采用node的方式去使用vue --企业级开发模式 – 掌握vue企业级开发模式

前端框架三巨头：Vue.js（155k）、React.js（118k）、AngularJS（45k），vue.js以其轻量易用著称，vue.js和React.js发展速度最快，AngularJS已经是老三，而且还在继续下降。

官网：https://cn.vuejs.org/

参考：https://cn.vuejs.org/v2/guide/

Git地址：https://github.com/vuejs

尤雨溪，Vue.js 创作者，Vue Technology创始人，致力于Vue的研究开发。

总结：

1 vue是一个mvvm框架，就是后端的MVC框架，但是功能更强大

2 vue的最全面的文档是官方文档

3 vue现在很火

3.快速入门

接下来，我们快速领略下vue的魅力

3.1.创建工程

创建一个maven工程：

位置信息：

3.2.安装vue

3.2.1.下载安装

下载地址：https://github.com/vuejs/vue

​ https://github.com/vuejs/vue/blob/dev/dist/vue.js

可以下载2.6.10版本https://github.com/vuejs/vue/archive/v2.6.10.zip

下载解压，得到vue.js文件。

3.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>

3.3.vue入门案例

3.3.1.HTML模板

在vue-demo目录新建一个HTML

在hello.html中，我们编写一段简单的代码：

h2中要输出一句话：xx 非常帅。效果图如下所示：

3.3.2.vue渲染

然后我们通过Vue进行渲染：

<!-- 引入vue -->
<script src="vue-2.6.10.js"></script>
<!-- 1 必须要有父容器,所有内容只能写在这个父容器中父容器一定要有id属性，id的值自定义，但是一般叫 app-->
<div id="app"><!-- 此处需要获取Vue对象中的name{{}}两个大括号获取data中的属性的值--><h2>{{name}}很帅</h2><h2>有{{num}}位女神为之倾倒</h2>
</div>
<!-- 通过vue控制x显示的内容 -->
<script>// 方向一：当改变data.属性内容的时候,view中自动更新// 方向二：当在页面改变name的时候，data中的name也会自动更新var vm = new Vue({el:"#app",//el就是element的简写，指向父容器的iddata:{// data 专门用来存放数据name:"奇哥",num:100}});</script>

• 首先通过 new Vue()来创建Vue实例
• 然后构造函数接收一个对象，对象中有一些属性：
  • el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
  • data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
    • name：这里我们指定了一个name属性
• 页面中的h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。

打开页面查看效果：

更神奇的在于，当你修改name属性时，页面会跟着变化：

3.3.3.双向绑定

方向一：当改变data中的属性的值，页面也会发生改变
方向二：当改变页面 文本框内容 的时候，data中的值也会自动改变input文本框

我们对刚才的案例进行简单修改：

<div id="app"><input type="text" v-model="num"><h2>{{name}} 非常帅,有{{num}}位女神为他着迷。</h2>
</div>
<script src="vue-2.6.10.js"></script>
<script type="text/javascript">// 生成一个Vue实例var app = new Vue({el:"#app", // el,即element。要渲染的的页面元素data:{ // 数据name:"奇哥",num:1}})
</script>

• 我们在data添加了新的属性：num
• 在页面中有一个input元素，通过v-model与num进行绑定。
• 同时通过{{num}}在页面输出

效果：

我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。

• input与num绑定，input的value值变化，影响到了data中的num值
• 页面{{num}}与数据num绑定，因此num值变化，引起了页面效果变化。

没有任何dom操作，这就是双向绑定的魅力。

3.3.4.事件处理

我们在页面添加一个按钮：

<input type="button" value="+" v-on:click="num++">
<input type="button" value="-" v-on:click="num--">

• 这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num
• 普通click是无法直接操作num的。

效果：

4.Vue实例

4.1.创建Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({// 选项
})

在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：

• el
• data
• methods
• …

等等

接下来我们一 一介绍。

4.2.模板或元素

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。

我们可以通过el属性来指定。

例如一段html模板：

<div id="app"></div>

然后创建Vue实例，关联这个div

var vm = new Vue({el:"#app"
})

这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

4.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发生改变

4.4.方法

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。

html:

<div id="app">{{num}}<button v-on:click="add">加</button>
</div>

js写法一：

<div id="app">{{num}}<button v-on:click="add">加</button>
</div>
<script src="vue-2.6.10.js"></script>
<script>var vm = new Vue({el:"#app",data:{num:0},methods:{add:function(){this.num++;}}});
</script>

js写法二：

<div id="app">{{num}}<button v-on:click="add">加</button>
</div>
<script src="vue-2.6.10.js"></script>
<script>var vm = new Vue({el:"#app",data:{num:0},methods:{add(){this.num++;}}});</script>

4.5.生命周期钩子 函数

回顾：servlet的生命周期–生老病死

4.5.1.生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期：

生命周期的流程：–每个流程对应一个函数，当vue处于某个阶段的时候，会自动触发该阶段的函数

1 初始化前 --BeforeCreate

2 初始化完成 —发送ajax --created

3 双向数据绑定前/挂载前 —BeforeMount

4 双向数据绑定完成/挂载完成 --Mounted

5 更新前 --BeforeUpdate

6 更新完成–updated

7 销毁前–BeforeDestroy

8 销毁完成–Destroyed

4.5.2.钩子函数

• 例1：created代表在vue实例创建后；

我们可以在Vue中定义一个created函数，代表这个时期的构造函数：

html:

<div id="app">{{hello}}
</div>

js:

<script src="vue-2.6.10.js"></script>
<script>var vm = new Vue({el:"#app",data:{hello:''},created(){this.hello = 'czdx,一统江湖，千秋万代'}});
</script>

结果：

• 例2：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="vue-2.6.10.js"></script><div id="app">{{msg}}</div>
<script>var vm = new Vue({el:"#app",data:{msg:'传智大学，一统江湖，千秋万代'},methods:{},// 创建前beforeCreate(){showData("创建前",this);},created(){showData("创建完成",this);},// 双向数据绑定前beforeMount(){showData("双向数据绑定前",this)},// 双向数据绑定完成mounted(){showData("双向数据绑定完成",this)},beforeUpdate(){showData("更新前",this)},updated(){showData("更新完成",this)},beforeDestroy(){showData("销毁前",this)},destroyed(){showData("销毁完成",this)}});// 打印 "创建前" 这几个字// 打印msg的值// 打印 页面id=app的div中的内容// 第一个参数：创建前   创建完成   销毁前   销毁后  ......function showData(process,obj){console.log(process);console.log(obj.msg);console.log(document.getElementById("app").innerHTML)console.log("----------------------------------")}// 更新数据//vm.msg="good. good study   day  day  up."// 销毁数据vm.$destroy();
</script>
</body>
</html>

总结：

1 vue的生命过程很丰富的，每个过程都有要完成的事情

2 created的生命周期：vue已经创建完成，数据已经有了—>通过ajax向后台

往后操作就是进行双向数据绑定

4.5.3.this

我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this

var vm = new Vue({el:"#app",data:{hello: '' // hello初始化为空},created(){this.hello = "czdx,一统江湖，千秋万代";console.log(this);}
})

控制台的输出：

总结：

this就是代表当前的vue对象

5.指令

什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

例如我们在入门案例中的v-model、v-on…，都是指令。

5.1.插值表达式

5.1.1.大括号

格式：

{{表达式}}

说明：

• 该表达式支持JS语法，可以调用js内置函数（必须有返回值）
• 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
• 可以直接获取Vue实例中定义的数据或函数

示例：

HTML：

<div id="app">{{name}}</div>

JS:

var app = new Vue({el:"#app",data:{name:"奇哥"}
})

5.1.2.插值闪烁

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。

我们将网速调慢一些，然后试试看刚才的案例：

刷新页面：

5.1.3.v-text和v-html

使用v-text和v-html指令来替代{{}}

作用：用来进行数据呈现的，可以代替{{}}，可以有效的解决插值表达式的闪烁问题

说明：

• v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
• v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

示例：

HTML:

<div id="app"><span v-text="hello"></span><br><span v-html="hello"></span></div>

JS:

var vm = new Vue({el:"#app",data:{hello:'大家好，我是奇哥'}});

效果：

并且不会出现插值闪烁，当没有数据时，会显示空白。

5.2.v-model

刚才的插值表达式、v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

• input-text
• input-password
• select
• textarea
• checkbox
• radio
• components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

5.2.1 input

Html:

<div id="app"><input type="text" v-model="num"><h2>{{num}}</h2><input type="button" value="+" v-on:click="num++"><input type="button" value="-" v-on:click="num--">
</div><script>var vm = new Vue({el:"#app",data:{num:1}});</script>

效果：

5.2.2 checkbox

html：

<div id="app"><input type="checkbox" v-model="language" value="Java" />Java<br/><input type="checkbox" v-model="language" value="PHP" />PHP<br/><input type="checkbox" v-model="language" value="Swift" />Swift<br/><h1>你选择了：{{language.join(',')}}</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">var vm = new Vue({el:"#app",data:{language: []}})
</script>

• 多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
• radio对应的值是input的value值
• input 和textarea 默认对应的model是字符串
• select单选对应字符串，多选对应也是数组

效果：

5.2.3 radio

html：

<div id="app"><input type="radio" value="male" v-model="sex">男<input type="radio"  value="female" v-model="sex">女<h2>{{sex}}</h2>
</div><script src="vue-2.6.10.js"></script>
<script>var vm = new Vue({el:"#app",data:{sex:'male'}});
</script>

效果：

5.2.4 textarea

html：

<div id="app"><input type="radio" value="male" v-model="sex">男<input type="radio"  value="female" v-model="sex">女<h2>{{sex}}</h2><textarea v-model="sex"></textarea>
</div><script src="vue-2.6.10.js"></script>
<script>var vm = new Vue({el:"#app",data:{sex:'male'}});
</script>

效果：

5.2.5 select–需要结合属性绑定v-bind和循环v-for

html：

<div id="app"><input type="radio" value="male" v-model="sex">男<input type="radio"  value="female" v-model="sex">女<h2>{{sex}}</h2><textarea v-model="sex"></textarea><br><select v-model="favor"><option v-for="item in items" :value="item">{{item}}</option></select></div><script src="vue-2.6.10.js"></script>
<script>var vm = new Vue({el:"#app",data:{sex:'male',favor:'弹琴',items:['唱歌','跳舞','弹琴']}});
</script>

效果：

5.3.v-on

5.3.1v-on：click基本用法，简写@click

v-on指令用于给页面元素绑定事件。语法：

v-on:事件名="js片段或函数名"

示例：

<div id="app"><!--事件中直接写js片段--><button v-on:click="num++">增加</button><br/><!--事件指定一个回调函数，必须是Vue实例中定义的函数--><button v-on:click="decrement">减少</button><br/><h1>num: {{num}}</h1>
</div>
<script src="vue-2.6.10.js"></script>
<script type="text/javascript">var app = new Vue({el:"#app",data:{num:1},methods:{decrement(){this.num--;}}})
</script>

效果：

另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

5.3.2 v-on:keydown

表示键盘按下事件。

http://tool.oschina.net/commons?type=4

ascii码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="vue-2.6.10.js"></script>
<div id="app"><input type="text" v-model="name" v-on:keydown="show($event)"></div>
<script>new Vue({el:"#app",data:{name:""},methods:{show(e){var keyCode = e.keyCode;console.log(keyCode)}}})</script></body>
</html>

5.3.3 v-on:mouseover和v-on：mouseout

鼠标移入和移出事件区域事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="vue-2.6.10.js"></script>
<div id="app"><div style="width: 100px;height: 100px; border: 1px solid red" @mouseover="show()" @mouseout="go()"></div></div>
<script>new Vue({el:"#app",data:{name:""},methods:{show(){console.log("进来了")},go(){console.log("出来了")}}})</script></body>
</html>

5.3.4 js冒泡–是一个问题，需要解决

概念：

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)，会触发所有父层或者子层的方法

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="vue-2.6.10.js">
</script>
<div id="app"><div style="width: 100px;height: 100px; border: red 1px dashed"@mouseover="over()" @mouseout="out()"><textarea @mouseover="myover($event)"></textarea></div></div>
<script>var vm = new Vue({el:"#app",methods:{over(){console.log("进来了")},out(){console.log("出去了")},myover(e){console.log("进入txt了");// js中冒泡的解决方案// 阻止事件的传播行为e.stopPropagation();}}});</script></body>
</html>

5.3.5 事件修饰符–vue中解决冒泡等问题的方案

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop // 停止触发，阻止冒泡修饰符

.prevent // 阻止事件发生，阻止事件默认行为
.capture // 捕获
.self //只点自己身上才运行
.once // 只执行一次

案例1：

<script src="vue-2.6.10.js">
</script>
<div id="app"><div style="width: 100px;height: 100px; border: red 1px dashed"@mouseover="over()" @mouseout="out()"><textarea @mouseover.stop="myover($event)"></textarea><form @submit.prevent action="http://www.czxy.com"><input type="submit" value="提交"></form></div></div>
<script>var vm = new Vue({el:"#app",methods:{over(){console.log("进来了")},out(){console.log("出去了")},myover(e){console.log("进入txt了");// js中冒泡的解决方案// 阻止事件的传播行为//e.stopPropagation();}}});</script>

案例2：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="vue-2.6.10.js"></script>
<div id="app"><form @submit.prevent action="http://www.czxy.com"><input type="submit" value="提交"></form></div>
<script>new Vue({el:"#app",data:{name:""},methods:{}})</script></body>
</html>

5.3.6 按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

全部的按键别名：

.enter  // 表示键盘的enter键
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

案例：

<script src="vue-2.6.10.js"></script><div id="app"><!-- 随意按什么键都显示ascii码 -->
<input type="text" @keydown="show($event)"><br><!-- 判断是否是enter键 -->
<input type="text" @keydown.13="show($event)"><br><!-- 判断是否是enter键 -->
<input type="text" @keydown.enter="show($event)"></div><script>var vm = new Vue({el:"#app",methods:{show(e){console.log(e.keyCode)}}});
</script>

作业1：只允许文本框中输入0-9数字

5.4.v-for

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

5.4.1.遍历数组

语法：

v-for="item in items"

• items：要遍历的数组，需要在vue的data中定义好。
• item：迭代得到的数组元素的别名

示例：ul显示

<div id="app"><ul><li v-for="user in users">{{user.name}} : {{user.gender}} : {{user.age}}</li></ul></div>
<script src="vue-2.6.10.js"></script>
<script>var vm = new Vue({el:"#app",data:{users:[{name:"张三",gender:"男",age:21},{name:"李四",gender:"男",age:22},{name:"王二",gender:"女",age:23},{name:"赵六",gender:"男",age:24},{name:"孙七",gender:"男",age:25}]}});
</script>

效果：

示例：表格显示

html代码：

<table border="1" cellpadding="0" cellspacing="0" width="300" height="200"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr v-for="user in users"><td>{{user.name}}</td><td>{{user.gender}}</td><td>{{user.age}}</td></tr></table>

效果：

5.4.2.数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法

v-for="(item,index) in items"

• items：要迭代的数组
• item：迭代得到的数组元素别名
• index：迭代到的当前元素索引，从0开始。

示例

    <div id="app"><ul><li v-for="(user,index) in users">{{index}} - {{user.name}} : {{user.gender}} : {{user.age}}</li></ul></div>

效果：

5.5.v-if和v-show

共同点：都是条件判断

v-if：移除元素

v-show：只是简单的加display:none

5.5.1.基本使用

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

语法：

v-if="布尔表达式"

示例：

<script src="vue-2.6.10.js"></script>
<div id="app"><input type="button" @click="show = !show" value="点我切换"><h1 v-if="show">你好</h1></div>
<script>new Vue({el:"#app",data:{show:true},methods:{}})
</script>

效果：

5.5.2.与v-for结合

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

示例：筛选出所有性别为女的人

<script src="vue-2.6.10.js"></script>
<div id="app"><ul><li v-for="(user,index) in users" v-if="user.gender==='女'">{{index}} - {{user.name}} : {{user.gender}} : {{user.age}}</li></ul></div>
<script>new Vue({el:"#app",data:{users:[{name:"tom",gender:"男",age:21},{name:"meiei",gender:"男",age:21},{name:"lily",gender:"女",age:21},{name:"jack",gender:"男",age:21},{name:"lucy",gender:"女",age:21}]},methods:{}})
</script>

效果：

5.5.3.v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”：

<div v-if="Math.random() > 0.5">Now you see me
</div>
<div v-else>Now you don't
</div>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div v-if="type === 'A'">A
</div>
<div v-else-if="type === 'B'">B
</div>
<div v-else-if="type === 'C'">C
</div>
<div v-else>Not A/B/C
</div>

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

5.5.4.v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

示例：

    <div id="app"><!--事件中直接写js片段--><button v-on:click="show = !show">点击切换</button><br/><h1 v-if="show">你好</h1></div><script src="vue-2.6.10.js"></script><script type="text/javascript">var app = new Vue({el:"#app",data:{show:true}})</script>

代码：

5.6.v-bind

页面的HTML标签有很多属性，如果属性想获取vue中的data的值，怎么处理？

5.6.1.绑定class样式

假如我们想动态的修改页面元素的属性，比如class属性，这样写是错误的：

<div class="{{mystyle}}"></div>

因为插值表达式不能用在属性的值中。

案例：

    <script src="vue-2.6.10.js"></script>
<div id="app"><span v-bind:class="a">传智大学</span><br><span v-bind:class="b">传智大学</span><br><span :class="c">传智大学</span><br>
</div>
<script>new Vue({el:"#app",data:{a:"a",b:"b",c:"c"},methods:{}})</script>
<style>.a{color: red;}.b{color: yellow;} .c{color: orchid;}</style>

课堂代码：

<script src="vue-2.6.10.js"></script>
<div id="app"><!--学习过的指令v-onv-modelv-textv-htmlv-forv-ifv-showv-else{{}}--><!-- 对于属性的值，插值表达式是无法获取的 --><!--错误的方式：<a href="{{url}}">百度</a><br>-->正确的方式：<a v-bind:href="url">百度</a><!-- class是标签的属性，属性如何从vue中获取值呢？ --><div :class="mydiv"></div>
</div>
<script>var vm = new Vue({el:"#app",data:{url:"http://www.czxy.com",mydiv:"redDiv"}});
</script><style type="text/css">.redDiv{width: 100px;height: 100px;border: 1px solid red;}.greenDiv{width: 100px;height: 100px;border: 1px solid green;}</style>

5.6.2.简写

v-bind:class可以简写为:class

• 综合案例：下拉列表框改变div样式

<script src="vue-2.6.10.js"></script>
<div id="app"><!-- 当下拉列表框改变的时候，div的样式要发生改变也就是要将下拉列表框新选中的样式作用div，也就是将值给mydiv--><select v-model="mydiv"><!-- value是option的HTML属性  v-for是vue指令，两者能直接互相访问吗？答：不可以 --><option v-for="style in myStyles" v-bind:value="style">{{style}}</option></select><!-- class是标签的属性，属性如何从vue中获取值呢？ --><div :class="mydiv"></div>
</div>
<script>var vm = new Vue({el:"#app",data:{mydiv:"redDiv",myStyles:['redDiv','greenDiv','blackDiv','yellowDiv'],mySelectValue:''}});
</script><style type="text/css">.redDiv{width: 100px;height: 100px;background: red;}.greenDiv{width: 100px;height: 100px;background: green;}.blackDiv{width: 100px;height: 100px;background: black;}.yellowDiv{width: 100px;height: 100px;background: yellow;}</style>

5.7.计算属性–本质是方法，写的时候是方法，用的时候是属性

在插值表达式中使用js表达式是非常方便的，而且也经常被用到。

但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，需要显示在页面，默认的显示方式是：

如果只想显示年月日呢？

<body><script src="vue-2.6.10.js"></script>
<div id="app">{{birthday.getFullYear() +"-" + birthday.getMonth() + "-" +birthday.getDate()}}
</div>
<script>new Vue({el:"#app",data:{birthday:new Date()},methods:{}})</script>

虽然能得到结果，但是非常麻烦。

Vue中提供了计算属性，来替代复杂的表达式：

<script src="vue-2.6.10.js"></script>
<div id="app">您的生日是： {{birth}}
</div>
<script>new Vue({el:"#app",data:{birthday:new Date()},methods:{},computed:{birth(){return this.birthday.getFullYear() +"-" + this.birthday.getMonth() + "-" +this.birthday.getDate();}}})
</script>

• 计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。

页面使用：

效果：

6 VueJS ajax

6.1 axios-发送ajax的js技术

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

axios的github:https://github.com/axios/axios

6.2 引入axios

可以用script引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

引入axios-0.18.0.js

6.3 案例

6.3.1 get请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345').then(function (response) {console.log(response);
}).catch(function (error) {console.log(error);
});// 可选地，上面的请求可以这样做
axios.get('/user', {params: {ID: 12345}
}).then(function (response) {console.log(response);
}).catch(function (error) {console.log(error);
});

6.3.2 post请求

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'
}).then(function (response) {console.log(response);
}).catch(function (error) {console.log(error);
});

为方便起见，为所有支持的请求方法提供了别名

axios.request(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]])

6.4 代码：

【需求】：创建data/user.json文件----获取所有用户

使用axios读取user.json文件的内容，并在页面上输出内容。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>vuejs中axios数据调用</title><script src="vue-2.6.10.js"></script><script src="axios-0.18.0.js"></script>
</head><body>
<div id="app">{{message}}
</div>
</body>
<script>var vm = new Vue({el: "#app",data: {message: ''},methods: {init: function(){axios.get("./data/user.json").then(function(response){// alert(response);alert(JSON.stringify(response))alert(response.data[0].username);})}},created: function(){this.init();}});
</script></html>

创建data目录，创建user.json

[{"username":"张三","age":22},{"username":"李四","age":21},{"username":"王五","age":20},{"username":"赵六","age":23}
]

7 Vue结构的总结

<head><meta charset="UTF-8"><title>Title</title><script src="../vue-2.6.10.js"></script>
</head>
<body>
<div id="app"></div>
<script>var vm = new Vue({el:"#app",data:{users:[],// 定义数组user:{},//定义对象username:'',//定义string类型的属性num:10// 定义int类型的属性},methods:{},created(){},//计算属性computed:{}})</script>

2w多字总结的VUE学习文档相关推荐

1. NodeJS-001-Nodejs学习文档整理(转-出自http://www.cnblogs.com/xucheng)

   Nodejs学习文档整理 http://www.cnblogs.com/xucheng/p/3988835.html 1.nodejs是什么: nodejs是一个是javascript能在后台运行的平 ...

2. C和C++编程和学习文档

    C和C++编程和学习文档 C和C++编程和学习文档   1 :指针变量名称以p为首字符,这是程序员通常在定义指针时的一个习惯 2 :har * p;    (int *)p 把p强制转换为int型  ...

3. 安卓学习文档收集汇总

   安卓学习文档收集汇总 https://www.jianshu.com/p/86aed183ce6c?utm_campaign=maleskine&utm_content=note&ut ...

4. Hadoop大数据平台实践（二）：Hadoop生态组件的学习文档

   Hadoop基础组件学习-Yzg-2019-03-06 Hadoop基础组件学习文档.. 1 简介.. 4 HDFS. 5 HDFS读文件.. 6 HDFS写文件.. 7 Mapreduce 8 单词 ...

5. 部署springboot+vue项目文档（若依ruoyi项目部署步骤）

   部署springboot+vue项目文档(若依ruoyi项目部署步骤) 一:部署linux + nginx 二:部署windows + tomcat(无nginx) 三:解决调用第三方api如百度地图 ...

6. linux个人学习文档

   Linux系统基础 第1章 Linux简介 1.1开源的力量 1.1.1 我们已经用过的开源软件 1.1.2 开源软件领域的旗帜:Linux 1.1.3 软件开源的好处 1.2 Linux的来历 1. ...

7. IntelliJ IDEA 14,15 使用教程，实战总结，倾囊相授，内附PDF学习文档

   转载博文,尊重原创,感谢前辈分享,原文地址:"请叫我大师兄__"的CSDN博客主页 文章目录 前言 一.安装 二.使用 1.Debug 2.修改内存 3.一般设置 4.高级设置 5 ...

8. 100个Java项目解析，带源代码和学习文档！

   前言 你是否正在寻找带有源代码的Java项目的免费集合?你的搜索到这里结束,我为你提供了近100多个Java项目. 想要成为一个优秀的程序员写项目是绕不开的,毕竟工程学的最终目标都是要创造东西,所以, ...

9. FreeMarker中文帮助手册API文档,基础入门学习文档

   FreeMarker中文帮助手册API文档,基础入门学习文档 分类: 编程技术 发布: bywei 浏览: 7 日期: 2011年5月28日 分享到: QQ空间 新浪微博 腾讯微博 人人网 什么是Fr ...

最新文章

1. Javascript数组操作（转）
2. oracle 修改数据表结构常用sql
3. OpenCV用方形棋盘进行相机校准
4. 安全：incaseformat蠕虫病毒来袭，你中招了吗？
5. onSaveInstanceState与onRestoreInstanceState何时调用、如何使用
6. JavaScript学习 第一课（一）
7. 电脑不启动任务管理器时cpu使用率很高，短时间内不使用电脑时启动为什么能耗可下降到15%以下？
8. 齐次坐标和单应性矩阵
9. CORS基础要点：关于dataType、contentType、withCredentials
10. 火狐浏览器怎么支持html5,支持HTML5/CSS技术火狐浏览器8
11. iis打不开php,php出现404找不到网页错误 iis配置问题解决
12. android缓存bilibili,bilibili缓存姬
13. ipmitool 远程操作BMC控制服务器
14. 中国猫道系统市场趋势报告、技术动态创新及市场预测
15. Windows下winrm的网络类型公用的问题解决
16. matlab确定分段函数的间断点,分段函数必有间断点（ ）
17. Redis 的过期策略是如何实现的？
18. python通过ssh通道连接PostgreSQL数据库(mysql等类同)
19. 搜狗输入法 linux 17.04,Ubuntu17.04 安装搜狗中文输入法的方法
20. PAZU WEB打印控件

热门文章

1. k近邻算法python解读_Python3《机器学习实战》学习笔记（一）：k-近邻算法(史诗级干货长文)...
2. 我的世界java1.14刷铁机_我的世界1.14版刷铁机怎么做？
3. 数据库——数据库的创建
4. 如何让家里的电脑，外网也能访问
5. 好工具推荐系列：看图软件irfanview/Honeyview/pineapple-pictures
6. 微信小程序制作看图工具
7. API测试接口使用指南-获得JD商品详情
8. shell脚本小工具之万能解压和压缩器---实现思路
9. 996普遍吗_网络常识不是太普遍
10. oracle_sod,sod: PDF.NET 的追求：代码的精简，开发、维护的简单与极致的运行效率！...