Vue简介和知识体系

Vue是做什么的

• Vue(读音 /vjuː/，类似于 view) 是用于构建用户界面的渐进式JavaScript 框架

Vue的核心库只关注视图层，更像一个视图模板引擎，采用模板语法来声明式地将数据渲染进 DOM 的系统。通过安装插件，可以扩展Vue的功能，如路由插件，状态管理插件等等。

Vue采用MVVM的设计模式，其中的ViewModel是Vue的一个实例对象（VM），Vue的核心思想是数据驱动和组件化。

• 数据驱动（响应式）指的是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。
• 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

PS:Vue响应式原理

Vue的版本

Vue已经有了三个版本，目前最常用的是Vue2

Vue的安装

• 在网页中用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• 命令行工具
  Vue.js 提供一个官方命令行工具 Vue cli，可用于快速搭建大型单页应用。

Vue.js 起步，实例化 Vue

实例化一个 Vue 应用，其参数是一个选项对象

new Vue({
  options
})

其中:

• el: 指定Vue根组件的挂载点，将页面上已存在的DOM元素作为Vue根组件的挂载的地方
• data：声明需要响应式绑定的数据对象
• template:指定用于挂载元素的字符串模板

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"></div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  template: `<div>{{message}}</div>`
})
</script>

Vue实例的配置参数options

PS:只有根实例有el选项

• 根组件以外的Vue实例（组件）中，应将 data 作为一个函数返回一个对象，见下：
  因为 data 作为对象属于引用类型，当修改其中的一个属性时，会影响到所有Vue实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了

  data：function(){
    return {}
  }
  

模板

Vue模板对应的就是Vue中的View（视图）部分，不指定模板的情况下挂载点内部的内容就是模板；
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
模板虽然看起来很像HTML ，但其本质是字符串，Vue通过编译将模板转换成渲染函数(render函数),执行渲染函数可以得到一个虚拟DOM树vnode,再经过算法把vnode渲染成真实的DOM。
模板的渲染经历这样的过程：模板 → 渲染函数 → 虚拟DOM树 → 真实DOM
Vue模板语法

定义模板的方式

• 字符串模板
• render函数
• 单文件组件

PS： 定义模板的方式

模板语法

数据绑定

在Vue模板中绑定数据，当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom，根据响应的方式分为单向绑定和双向绑定；

• 单向绑定指的是把数据绑定到视图，更新数据时，视图自动更新。
• 双向绑定是把数据绑定到视图的同时也将视图绑定到数据上，一方面更新数据时，视图自动更新，另一方面，如果用户更新了视图，数据也自动更新。

具体分为三种方法：

1. 插值形式单向绑定数据
   插值（Mustache）是Vue 实现数据绑定中最常见的一种形式，是使用双大括号{{}}的文本插值，插值语法支持JS表达式，且只支持单个表达式。
2. 指令形式单向绑定数据
   指令是Vue 提供的 HTML 标签的自定义属性，属性节点中不能使用插值表达式，为属性节点动态绑定数据，要用指令动态绑定，如v-bind、v-text、v-html等。
3. v-model形式双向绑定数据
   v-model指令主要是用在表单元素中,这个指令实际上是帮助我们更方便的监听事件和更新视图。v-model它会根据元素类型自动选取正确的方法来更新元素。
   v-model指令实际仅是一个语法糖，如：

   <input v-model="message">
   

   本质上是绑定了单向绑定了属性和input事件监听器

   <input v-bind:value="message" v-on:input="message= $event.target.value">
   

插值与表达式

<p>length属性：{{ str.length }}</p>
<p>字符串连接：{{ num1 + '2'}}</p>
<p>三目运算符:{{ num1 > num2 ? "是" : "否" }}</p>
<p>四则运算：{{ num1+num2 }}</p>
<p>比较运算符：{{ num1 > num2 }}</p>
<p>数值类型的内置方法：{{ num1.toFixed(2) }}</p>
<p>布尔值:{{ flag }}</p>
<p>数组（转成了字符串）:{{ arr }}</p>
<p>数组长度:{{ arr.length }}</p>
<p>数组的索引取值:{{ arr[0] }}</p>
<p>对象属性：{{ obj.name }}</p>

指令和修饰符

指令是 Vue 提供的 HTML 标签的自定义属性，Vue中的指令带有v-前缀，通过这些属性能够操作页面元素。

常用指令：

v-text

用于渲染普通文本，和{{}}表达式作用一样

v-html

用来渲染带html标签的文本

v-pre

不进行编译渲染，跳过此标签，渲染原始数据

v-bind

动态绑定DOM元素的属性 动态绑定属性，如属性class,href,style,src

v-bind指令用冒号连接属性名，“v-bind”本身可以省略

v-model

实现数据和视图的双向绑定

可以和.lazy、.trim和.number修饰符一起使用

v-show

根据表达式的真假值(true/false)来显示或隐藏元素,表达式为true时，元素显示，为false时，元素被隐藏

v-if v-else-if和v-else

根据表达式的真假值（true/false）在DOM中生成或移除元素。

v-else-if，v-else指令需要和v-if结对出现，即要求前一个 兄弟节点必须要使用 v-if 指令。

v-for

专门用于迭代的指令,根据变量的值来循环渲染元素，可以迭代数组、字符串、数值、对象

v-on

用来监听dom事件，实现交互。

用冒号连接要监听的数据类型,“v-on：” 可以简写为@；表达式可以是一个方法名或一个内联js语句

可以和事件修饰符一起使用，.stop .prevent .capture .self .once

指令的参数

一些指令能够接收一个“参数”，在指令名称之后以冒号(:)表示。例如，v-bind 指令、 v-on指令。

<a v-on:click="doSomething"> ... </a>

动态参数

可以用方括号括起来的js表达式作为一个指令的参数

<a v-on:[eventName]="doSomething"> ... </a>

自定义指令

• 注册全局自定义指令：Vue.directive(“指令名”,options对象）
• 注册局部自定义指令：配置组件的directives属性

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

在Vue中自定义指令

指令修饰符

Vue中修饰符 (modifier) 是以半角句号（ . ）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

• 表单修饰符 如：v-model的修饰符 .lazy、.trim、.number
• 事件修饰符 v-on的修饰符 .stop、 .prevent 、.capture、.self、.once 、.passive、.native
• 鼠标按钮修饰符 如：.left 左键点击 .right 右键点击 .middle 中键点击
• 键值修饰符

在模板中引用组件

在模板中引用组件，被引用的组件会称为当前实例的子组件

组件

组件是可复用的 Vue 实例，组件可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签。
Vue构建的用户界面由相互独立的组件树构成，一个vue组件主要包括3个部分：界面展示代码template、业务实现代码script、界面布局代码style。

组件注册

注册全局组件

利用Vue的静态方法component(),可以全局注册一个组件，相当于扩展了Vue构造器；
全局组件能在任何地方应用；
全局组件必须写在Vue实例创建之前。

Vue.component('组件名', {
  // ... 选项 ...
})

局部组件注册

在实例的 components 选项中注册的组件。components 中的组件以键值对的形式存在，键名是局部注册的组件名，键值是组件的选项。

//...
components: {
   //局部注册组件ComponentB
   'ComponentB': {
     template: `<input v-model="title">`,
     data() {
       return {
         title: '这是组件B'
       }
     }
   }
 }

常用选项：

• methods、computed、filters、watch、props
• 生命周期钩子选项

PS：Vue实例的配置参数options

动态组件&异步组件

动态组件：多个组件使用同一个挂载点,并动态切换
异步组件：异步组件是定义的时候什么都不做，只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存，以备下次访问。

Vue 的内置组件

component组件

动态绑定组件,根据数据不同更换不同的组件,component通过属性is的值可以渲染不同的组件。

<component :is="currentTabComponent"></component>

transition组件

为组件的载入和切换提供动画效果

transition-group组件

作为多个元素/组件的过渡效果

keep-alive组件

能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
属性：

• include: 字符串或正则表达式。只有匹配的组件会被缓存。
• exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

  <!-- 失活的组件将会被缓存！-->
  <keep-alive>
   <component v-bind:is="currentTabComponent"></component>
  </keep-alive>
  

  <keep-alive> 与 <transition>相似，只是一个抽象组件，它不会在DOM树中渲染。

slot组件

slot又称插槽，在父组件中使用子组件时，在子组件中使用slot组件，可以向子组件插槽传递父组件的模板内容，slot组件相当于子组件留给父组件的占位符。

父组件

<template>
  <div>
    <son>
      <p>我是父组件插槽内容</p>
    </son>
  </div>
</template>

子组件(son)

<template>
  <div>
    <slot></slot>
  </div>
</template>

• 默认插槽
  不带name属性的slot,一个不带 name 的 出口会带有隐含的名字“default”
• 具名插槽
  带name属性的slot，可以用来定义额外的插槽
• 作用域插槽
  作用域插槽内，父组件可以拿到子组件的数据。子组件可以在slot标签上绑定属性值

组件通信

父向子传值 Prop

子组件的模板内不能直接引用父组件的数据，父组件的数据需要通过 Prop（组件上注册的一些自定义属性） 才能下发到子组件中，子组件用props选项接收来自父组件的数据。

props: ['propA', 'propB', 'propC', 'propD', 'propE']

如果要在子组件中对接收到的数据做验证，可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

子向父传值 $emit

用$emit方法触发子组件的自定义事件，在父组件中用v-on指令监听事件，并指定事件处理函数。

Vuex

Vuex是在组件外部管理状态，是用来管理组件之间通信的一个插件。

插件化

Vue是一个渐进式框架，它本身的核心是解决视图渲染的问题，其它的能力就通过插件的方式来解决。

Vue.use(plugin)

Vue.use()方法用于安装Vue.js 插件。如果插件(plugin)是一个对象，必须提供install方法。如果插件是一个函数，它会作为install方法。

• install方法调用时，会将Vue作为参数传入。
• use方法需要在调用New Vue()之前被调用。
• 当install方法被同一个插件多次调用，插件将只会被安装一次。

Vue router

路由是什么

路由是根据不同的url地址展现不同的内容或页面。在传统的多页面应用中，当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的处理逻辑。
前端路由不会涉及到服务器，是用JS技术来实现不同内容的展示和切换的。使用前端路由时，不同的url地址同样展现不同的内容，但不会像服务器发起请求。

路由配置

用new VueRouter(options)创建一个router实例，router实例的构建选项有routes、mode、base、linkActiveClass、linkExactActiveClass等等。

mode 配置路由模式

Vue-Router的前端路由有两个模式"hash"和"history"

routes 配置多个路由对象

routes选项配置一组路由对象，是一个数组，数组的每一项表示一条路由记录route，用一个对象表示

{
  path: string,  //1、路由匹配的路径
  component?: Component, //2、路由映射的组件
  name?: string, // 3、命名路由
  components?: { [name: string]: Component }, // 4、配置命名视图组件
  redirect?: string | Location | Function,  //5、路由重定向
  props?: boolean | Object | Function,  //6、路由组件传递参数
  alias?: string | Array<string>,  //7、路由别名
  children?: Array<RouteConfig>, // 8、嵌套子路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void,  //9、 配置路由独享的守卫
  meta?: any,  // 10、自定义标签属性，比如：是否需要登录
}  

嵌套路由

在模板中使用 组件能够渲染通过路由映射过来的组件,想要在哪里显示路由对应的组件 ，就在哪里写<router-view> 标签。
嵌套路由就是路由的多层嵌套，在一个被路由过来的页面（组件）下使用<router-view> 标签映射其他的组件。
如果不使用嵌套路由，应用的模板中只有一个，如果使用嵌套路由，那么在一个组件中还有<router-view>，这也就构成了嵌套。
实现嵌套路由的方法：

• 在配置配置中为父级的路由配置children属性，children属性值是一个数组，数组中的项和前面讲的路由对象几乎没有区别，但子路由中的path不需要加’/’，因为以“/”开头的嵌套路径会被当作根路径。
• 在需要子路由vue组件中使用<router-view>

当前路由对象

Vue项目中如果引入了Vue router实例,就可以在Vue实例中通过$route访问到当前匹配到的路由对象。

path

String,当前路由对象的名称|当前路由对象的路径，会被解析为绝对路径

query

Object,路由中携带的查询参数

params

Object,包含路由中的动态片段和全匹配片段的键值对。

matched:

Array,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。即匹配到的所有的 RouteRecord 对象

fullPath

String,当前路由完整的路径值

hash

当前路径的哈希值，带#

meta

Object,当前路由元信息

name:

String,当前路径的名字，如果没有使用具名路径，则名字为空。

Vue router提供的组件

router-view组件

在模板中使用 组件用来渲染通过路由映射过来的组件

router-link组件

在模板中组件用来定义导航链接。在其to属性中指定目标地址，to的属性可以是字符串也可以是对象，触发（默认click触发）导航会立刻把to的值传送给router.push()方法。

路由导航

vue-router路由两种实现途径

声明式的导航<router-link>

根据标签的to属性对比路由配置，从而找到匹配的组件，并把组件渲染到<router-view> 标签所在的地方。

编程式导航

通过Vue Router的实例方法router.push()，router.replace()，router.go()，router.back()，router. forward()可以实现编程式导航。
传递参数的方法：

传递参数

无论哪种路由导航方式都经常会需要传递参数

• params传参：要求在配置路由的时候给路由配置name属性
• 通过查询参数query传参：使用query传参时地址栏后面带上参数，和传统的url参数一致的，这种方式必须配合path来使用，而不能使用name。
• url传参 ： 要求路由配置时配置name属性，并在path中携带动态路径参数，以：开头

路由守卫

在Vue项目中，路由跳转前经常要做一些验证，如登录验证，权限验证等，可以通过导航守卫来实现。导航守卫也叫路由守卫，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
守卫的应用场景有全局守卫、路由独享的守卫 、组件内的守卫。常有3个参数：
1、to 路由对象，要进入的目标路由对象
2、from 路由对象 ，要离开的路由对象
3、next 函数, 用于结束当前钩子

全局守卫

路由实例的原型上有两个钩子beforeEach和afterEach

路由独享的守卫

单个路由有个钩子beforeEnter

组件内的守卫

Vue组件内，利用钩子beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave定义组件内的守卫

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件。采用集中式存储管理应用所有组件的状态（数据）。
Vuex是在组件外部管理状态，是用来管理组件之间通信的一个插件。
每一个Vuex应用的核心就是store（仓库）。store可以看成一个容器，通过new Vuex.Store()实例化一个store。

new Vuex.Store({
  state: {},
  getters:{},
  mutations:{},
  actions:{},
  modules:{}
});

state

存储状态（数据）

getters

从 state 中可以派生出一些状态，可以理解为state的计算属性。

mutations

mutations中定义同步修改状态state的方法，也是更改 Vuex 中state的唯一方法

actions

Action用于提交 mutation，而不是直接变更状态，异步操作。从store的外部看action方法和mutation方法都用于修改state，但在store内部，实际上action不能直接操作state，在其内部需要去触发mutation方法来实现修改State。

modules

为方便状态管理，将store分成一个个的模块，在每一个module中写state, getters, mutations, actions等。
给每个模块添加namespaced: true, 命名空间区分模块。

Axios实现前后端数据交互

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Axios 不是Vue.js的插件，不能通过Vue.use()安装，经常被挂在到Vue的原型上全局使用。

Vue.prototype.$http = axios;

发送请求

axios(config)

参数：config是一个对象，保存着HTTP请求的配置选项,其中只有url是必选项。
返回值：是一个promise对象，axios中习惯用then和catch方法处理异步成功和失败。
常用配置选项：

• url 用于请求的服务器URL，必选
• method 是发出请求时使用的请求方法 默认为get
• baseURL 将被添加到url前面，除非url是绝对的。
• headers 是要发送的自定义 headers
• params 是要与请求一起发送的URL参数,必须是纯对象或URLSearchParams对象
• data 是要作为请求主体发送的数据,适用于请求方法“PUT”，“POST”和“PATCH”
• timeout 指定请求超时之前的毫秒数。
  PS:为了方便axios为所有支持的请求方法均提供了别名。

接受响应

Axios发送的某个请求，请求成功时then方法接受的响应包含以下信息

{
  data: {}, //服务器提供的响应数据
  status: 200, //服务器响应的 HTTP 状态码
  statusText: 'OK', //服务器响应的 HTTP 状态信息
  headers: {}, //服务器的响应头
  config: {}, //为请求提供的配置信息，未设置的话Axios使用默认值
  request: {} //生成此响应的请求,是一个XMLHttpRequest对象
}

请求失败时，catch方法接受的响应是个Error对象
Error对象的response属性有可能是undefined，这种情况下一般通过响应拦截器来给response重新赋值一下，方便后续处理。

拦截请求和响应

axios的interceptors实现拦截请求，拦截分为请求拦截和响应拦截，用于在发出请求前对请求进行统一的处理，接到响应后对响应的数据进行统一的处理。
如在请求时设置拦截为所有的请求头加上token，请求成功时（指HTTP请求成功）根据服务器返回的数据做相应处理，请求失败时返回错误提示。

下面是个简单的例子，真实的业务场景可能会复杂的多。

axios.interceptors.request.use(req => {
  req.headers['Authorization'] = '123456';  //一般token会被保存到客户端
  return req;
})

axios.interceptors.response.use(
	res=>{
		if (res.status === 200) {
			return Promise.resolve(res.data)
		}else{
			return Promise.reject(res)
		}
	},
	error => {
		return Promise.reject(error.response);
	}
)

vue-cli

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。可以轻松的创建新的应用程序，而且可用于自动生成vue和webpack的项目模板。

windows系统搭建VUE环境(安装vue-cli)