Vue简介和知识体系

本是古典何须时尚 2022-12-03 15:52 229阅读 0赞

# Vue是做什么的 #

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

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

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

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

PS:[Vue响应式原理][Vue]

# Vue的版本 #

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

# Vue的安装 #

*  在网页中用

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

# Vue.js 起步，实例化 Vue #

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

new Vue({ 
      options
    })

其中:

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

[Vue实例的配置参数options][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： [定义模板的方式][Link 1]

## 模板语法 ##

### 数据绑定 ###

在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指令。

##### 动态参数 #####

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

#### 自定义指令 ####

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

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

[在Vue中自定义指令][Vue 1]

#### 指令修饰符 ####

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
 *  [生命周期钩子选项][Link 2]

PS：[Vue实例的配置参数options][Vue_options]

## 动态组件&异步组件 ##

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

## Vue 的内置组件 ##

### component组件 ###

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

### 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)

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

## [组件通信][Link 3] ##

### 父向子传值 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地址同样展现不同的内容，但不会像服务器发起请求。

## [路由配置][Link 4] ##

用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>

## [当前路由对象][Link 5] ##

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] #

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)][windows_VUE_vue-cli]

[Vue]: https://cn.vuejs.org/v2/guide/reactivity.html
[Vue_options]: https://blog.csdn.net/dreamingbaobei3/article/details/103286992
[Link 1]: https://blog.csdn.net/dreamingbaobei3/article/details/108415185
[Vue 1]: https://blog.csdn.net/dreamingbaobei3/article/details/119947301
[Link 2]: https://blog.csdn.net/dreamingbaobei3/article/details/103477214
[Link 3]: https://blog.csdn.net/dreamingbaobei3/article/details/103513204
[Vue router]: https://blog.csdn.net/dreamingbaobei3/article/details/103852646
[Link 4]: https://blog.csdn.net/dreamingbaobei3/article/details/89000872
[Link 5]: https://blog.csdn.net/dreamingbaobei3/article/details/108246356
[Axios]: https://blog.csdn.net/dreamingbaobei3/article/details/103761216
[windows_VUE_vue-cli]: https://blog.csdn.net/dreamingbaobei3/article/details/88824366