Vue的简单介绍与使用

一、Vue基础简介

1.1、前端开发模式的发展

1.1.1、静态页面

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

1.1.2、异步刷新，操作DOM

● 1995年，网景工程师Brendan Eich花了10天时间设计了JavaScript语言。随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。
● ajax盛行:
▶ 2005年开始， ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果。
▶ 此时的开发人员不仅仅要编写HTML样式，还要懂ajax与后端交互，然后通过JS操作Dom元素来实现页面动态效果。比较流行的框架如jQuery就是典型代表。

1.1.3、MVVM，关注模型和视图

● 2008年，google的Chrome发布，随后就以极快的速度占领市场，超过IE成为浏览器市场的主导者。
● 2009年，Ryan Dahl在谷歌的Chrome V8引擎基础上，打造了基于事件循环的异步IO框架: Node.js。
▶ 基于时间循环的异步I0
▶ 单线程运行，避免多线程的变量同步问题
▶ JS可以编写后台diamante，前后台统一编程语言
● node.js的伟大之处不在于让JS迈向了后端开发，而是构建了一个庞大的生态系统。
● 2010年，NPM作为node,js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块, 然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。
● 随后，在node的基础上，涌现出了一大批的前端框架:

MVVM模式
● M：即Model，模型，包括数据和- -些基本操作
● V：即View，视图，页面渲染结果
● VM：即View-Model，模型与视图间的双向操作(无需开发人员干涉)

在MWM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Mode|渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。
而MVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Mode|和View之间是如何互相影响的：
▶ 只要Model|发生了 改变，View 上自然就会表现出来。
▶ 当用户修改了View, Model中的数据也会跟着改变。
把开发人员从繁琐的DOM操作中解放出来，把关注放在如何操作Model上。

1.2、概念

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

前端框架三巨头: Vue.js、React.js、AngularjS，vue.js以其轻量易用著称，vue.js和Reactjs发展速度最快。

渐进式:可以选择性的使用该框架的一个或一些组件，这些组件的使用也不需要将框架全部组件都应用;而且用了这些组件也不要求你的系统全部都使用该框架。

官网: https://cn.vuejs.org/
参考: https://cn.vuejs.org/v2/guide/

1.3、下载安装

vue是一个前端框架 ,也是其实是一个js文件 ;下载vue.js文件并在页面中引入该]s文件。
vue.js的下载方式:
● 可以引用在线的vue.js

● 可以离线下载vue.js：https://github.com/vuejs/vue
● npm包资源管理器,可以下载vue.js：
在idea的左下角，有个Terminal按钮，点击打开控制台:

二、基本使用

2.1、双向绑定与事件处理

2.2、Vue实例生命周期

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

2.2.1、模板或元素

每个Vue实例都需要关联一段Html模板, Vue会基于此模板进行视图渲染;可以通过el属性来指定。
例如一段htmI模板，然后创建Vue实例，关联这个div

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

2.2.2、数据

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是"响应式"系统。

● name的变化会影响到input的值
● input中输入的值，也会导致vm中的name发生改变

2.2.3、方法

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

2.3、生命周期钩子

2.3.1、生命周期

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

所有的生命周期钩子自动绑定this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos(O)。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同，this. fetchTodos的行为未定义。
生命周期:

beforeCreate
在实例初始化之后，数据观测(dataobserver)和event/watcher事件配置之前被调用。
created
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置:数据观测(data observer)。属性和方法的运算，watch/ event事件回调。然而，挂载阶段还没开始。$el属性目前不可见。\ast \ast beforeMount\ast \ast ：在挂载开始之前被调用:相关的render函数首次被调用。\ast \ast Mounted：\ast \ast el被新创建的vm.$el替换，并挂载到实例，上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内
beforeUpdate：
数据更新时调用。发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。
beforeDestroy：
实例销毁之前调用。在这一-步，实例仍然完全可用。
updated
由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子，当这个构子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作，然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或watcher取而代之。
destroyed
Vue实列销毁后调用。调用后，Vue实例指示的所有东西都会解邻定，所有的事件监听器会被移除，所有的子实例也会被销毁。

如果使用构建步骤，模板编译会提前执行:例如单文件组件
vm.$ el : Vue 实例使用的很DOM元素
vm.$ root :当前组件树的根Vue实例。如果当前实例没有父实例，此实例将会是其自己。

2.3.2、钩子函数

例如: created代表在vue实例创建后;
可以在Vue中定义一个created函数，代表这个时期的构造函数。
钩子函数不要使用箭头函数的方式编写

2.5、指令

2.5.1、概念

指令(Directives)是带有V- 前缀的特殊属性。例如在之前案例中的v-model，代表双向绑定。

2.5.2、花括号

格式:
{{表达式}}
说明:
● 该表达式支持JS语法，可以调用js内置函数(必须有返回值)
● 表达式必须有返回结果。例如1 + 1，没有结果的表达式不允许使用， 如: vara= 1 + 1;
● 可以直接获取Vue实例中定义的数据或函数
示例:

2.5.3、插值闪烁

使用{0}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数居，称为插值闪烁。类似如下的效果(最新vue是几乎没有此问题)。
插值可以使用在有需要显示vue实例数据的地方，可以在插值表达式中调用实例的数据属性和函数。

2.5.4、v-text和v-html

使用v-text和v-html指令来替代{{}}
说明:
● v-text:将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出。
● v-html:将数据输出到元素内部,如果输出的数据有HTML代码，会被渲染。

2.5.5、v-model

刚才的v-text和v-htm可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。
v-model是双向绑定，视图(View) 和模型(Model) 之间会互相影响。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有:
● input
● select
● textarea
● checkbox
● radio
● components (Vue中的自定义组件)
基本上除了最后一项，其它都是表单的输入项。

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

2.5.6、v-on

v-on指令用于给页面元素绑定事件。
格式： v-on:xxxx.修饰符 = ””
简写： @xxxx.修饰符 = ””

事件修饰符
在事件处理程序中调用event.preventDefault()或event.stoppropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑而不是去处理DOM事件细节。为了解决这个问题，Vue.js为v-on提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
● .stop：阻止事件冒泡
● .prevent：阻止默认事件发生
● .capture：使用事件捕获模式
● .self：只有元素自身触发事件才执行。(冒泡或捕获的都不执行)
● .once:只执行一次

2.5.7、v-for

可以在vue实例化的时候指定要遍历的数据,然后通过v-for指令在模板中遍历显示数据。一般情况下 ,要遍 历的数据可以通过钩子函数created发送异步请求获取数据。
遍历数组格式：

遍历对象格式：

● 一个特殊语法: :key=""它可以让你读取vue中的属性，并赋值给key
● 这里绑定的key是数组的索引，应该是唯一的
● 如果遍历的时候需要使用到索引号 ,可以在循环遍历的位置添加一个参数;该索引号是从0开始的。

2.5.8、v-if和v-show使用

● v-if :通过一个按钮的点击，实现遍历数组结果的显示存在与否，并在遍历过程中使用v-if对数据进行判断处理
● v-show :实现文本内容的隐藏和显示

2.5.9、v-if和v-show 与 v-for结合

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

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

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

2.5.10、v-band使用

语法：

简写：
直接加 ：

class属性的特殊用法：
可以传给:class一个对象，以动态地切换class:

● 对象中，key是已经定义的class样式的名称，如本例中的: red和blue
● 对象中，value是一个布尔值，如果为true,则这个样式会生效，如果为false, 则不生效。
之前的案例可以改写成这样: .

2.5.11、计算属性的使用

在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，有一个日期的数据，但是是毫秒值：

在页面渲染，希望得到yyy-MM-dd的样式则需要如下处理:

原生JS写法：

VUE写法：

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

2.5.12、watch基本和深度监控

在vue实例中数据属性;因为在页面中修改而产生了变化。可以通过watch监控获取其改变前后的值。
如果是修改的对象数据属性,可以开启深度监控获取修改后最新的对象数据。如: person.name

2.5.13、组件使用

可以将通用或者公用的页面模块抽取成vue组件,在vue实例中引用。

● 组件其实也是一个Vue实例，因此它在定义时也会接收：data、 methods、 生命周期函数等。
● 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
● 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
● 全局组件定义完毕,任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
● data的定义方式比较特殊，必须是一个函数。

2.5.14、局部注册

一旦全局注册，就意味着即便以后你不再使用这个组件,它依然会随着Vue的加载而加载。
因此，对于一些并不频繁使用的组件，会采用局部注册。
先在外部定义一个对象，结构与创建组件时传递的第二个参数一致:

2.5.15、父组件向子组件传输信息（待做）

通常一个单页应用会以一棵嵌套的组件树的形式来组织：
● 页面首先分成了项部导航，左侧内容区、右侧边栏三部分。
● 左侧内容区又分为上下两个组件。
● 右侧边栏中又包含了3个子组件。
各个组件之间以账套的关系组合在一起，那么这个时候不可避免的会有组性间通信的需求。

2.6、Vuejs ajax 概述

Vuejs并没有直接处理ajax的组件，但可以使用axios或vue-resource组件实现对异步请求的操作。

2.6.1、vue-resource

● vue-resource是Vue.js的插件提供了使用XMLHttpRequest或ISONP进行Web请求和处理响应的服务。当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐axios。
● vue-resource的github地址:
https://github.com/pagekit/vue-resource

2.6.2、axios简介

Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。
axios的github地址: https://github.com/axios/axios
方法说明
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]])
  config请求配置
  这些是创建请求时可以用的配置选项。只有url是必需的。如果没有指定method ，请求将默认使用get方法。
  
  
  
  
  

响应结构


使用then时，将接收下面这样的响应:

在使用catch 时，或传递rejection callback作为then 的第二个参数时， 响应可以通过error对象可被使用。
2.6.3、axios方法及get、post方法使用