vue的简单速过

我们的vue的js配置是export default{}，{}内是我们通常写js的地方，内有name变量是我们代表着我们的vue文件的名，components变量是注册引入的组件的名，所有变量后都要用逗号开。data函数是存放数据的地方，内部return一个{数据}。method对象是存放方法函数的地方。

computed是计算属性，watch对象是监听属性，computed和watch的不同是watch在数据改变时进行监听。script内还有常用的生命周期属性。

style标签就是写样式的地方，有scoped属性是只在本页面起作用的属性

vue的v-指令

v-bind指令

可以用于动态绑定属性，例如v-bind:style="{color:'red'}"，可以简写问:style=“{color:’red’}”

v-on指令

一般用于事件的绑定，可以简写为@，例如我们绑定点击事件v-on:click=“点击事件”，可以简写成@click=“点击事件”

v-model指令

双向绑定，绑定的是数据，绑定的数据一边改变数据则另一边也会改变

v-show指令

用于显示和隐藏，仅仅是对于标签的显示隐藏进行渲染，相当于display:none，display:black。v-show=“true/false”，会重绘

v-if指令

用于显示和隐藏，是对于标签是否渲染，是否执行此代码。会回流

v-else指令

用于显示和隐藏，有v-if命令v-else指令才可使用

v-for指令

循环渲染数据，在严格模式下需要绑定key才能使用

v-html指令

富文本可以通过它渲染页面

vue的生命周期

四大生命周期，八大钩子函数，什么时vue的生命周期呢，vue的生命周期时指vue项目在创建到销毁的过程。

（该图采自vue官网）

生命周期

创建（create）

挂载（mount）

更新（update）

销毁（Destroyed）

钩子函数

new Vue()实例化一个vue实例，然后init初始化event 和 lifecycle，其实这个过程中分别调用了3个初始化函数（initLifecycle(), initEvents(), initRender()），分别初始化了生命周期，事件以及定义createElement函数，初始化生命周期时，定义了一些属性，比如表示当前状态生命周期状态得isMounted ，isDestroyed ，isBeingDestroyed，表示keep-alive中组件状态的inactive，而初始化event时，实际上就是定义了once、off、emit、on几个函数。而createElement函数是在初始化render时定义的（调用了initRender函数）执行beforeCreate生命周期函数 beforeCreate执行完后，会开始进行数据初始化，这个过程，会定义data数据，方法以及事件，并且完成数据劫持observe以及给组件实例配置watcher观察者实例。这样，后续当数据发生变化时，才能感知到数据的变化并完成页面的渲染执行created生命周期函数，所以，当这个函数执行的时候，我们已经可以拿到data下的数据以及methods下的方法了，所以在这里，我们可以开始调用方法进行数据请求了 created执行完后，我们可以看到，这里有个判断，判断当前是否有el参数(这里为什么需要判断，是因为我们后面的操作是会依赖这个el的，后面会详细说)，如果有，我们再看是否有template参数。如果没有el，那么我们会等待调用$mount(el)方法(后面会详细说)。

确保有了el后，继续往下走，判断当有template参数时，我们会选择去将template模板转换成render函数（其实在这前面是还有一个判断的，判断当前是否有render函数，如果有的话，则会直接去渲染当前的render函数，如果没有那么我们才开始去查找是否有template模板），如果没有template，那么我们就会直接将获取到的el（也就是我们常见的#app，#app里面可能还会有其他标签）编译成templae, 然后在将这个template转换成render函数。之后再调用beforMount，也就是说实际从creted到beforeMount之间，最主要的工作就是将模板或者el转换为render函数。并且我们可以看出一点，就是你不管是用el，还是用template, 或者是用我们最常用的.vue文件(如果是.vue文件，他其实是会先编译成为template)，最终他都是会被转换为render函数的。 beforeMount调用后，我们是不是要开始渲染render函数了，首先我们会先生产一个虚拟dom（用于后续数据发生变化时，新老虚拟dom对比计算），进行保存，然后再开始将render渲染成为真实的dom。渲染成真实dom后，会将渲染出来的真实dom替换掉原来的vm.el（这一步我们可能不理解，请耐心往下看，后面我会举例说明）,然后再将替换后的elappend到我们的页面内。整个初步流程就算是走完了之后再调用mounted，并将标识生命周期的一个属性_isMounted 置为true。所以mounted函数内，我们是可以操作dom的，因为这个时候dom已经渲染完成了。

再之后，只有当我们状态数据发生变化时,我们在触发beforeUpdate，要开始将我们变化后的数据渲染到页面上了（实际上这里是有个判断的，判断当前的isMounted是不是为ture并且isDestroyed是不是为false，也就是说，保证dom已经被挂载的情况下，且当前组件并未被销毁，才会走update流程） beforeUpdate调用之后，我们又会重新生成一个新的虚拟dom(Vnode)，然后会拿这个最新的Vnode和原来的Vnode去做一个diff算，这里就涉及到一系列的计算，算出最小的更新范围，从而更新render函数中的最新数据，再将更新后的render函数渲染成真实dom。也就完成了我们的数据更新然后再执行updated，所以updated里面也可以操作dom，并拿到最新更新后的dom。不过这里我要插一句话了，mouted和updated的执行，并不会等待所有子组件都被挂载完成后再执行，所以如果你希望所有视图都更新完毕后再做些什么事情，那么你最好在mouted或者updated中加一个nextTick（），然后把要做的事情放在netTick()中去做（至于为什么，以后讲到$nextTick再说吧）再之后beforeDestroy没啥说的，实例销毁前，也就是说在这个函数内，你还是可以操作实例的之后会做一系列的销毁动作，解除各种数据引用，移除事件监听，删除组件watcher，删除子实例，删除自身self等。同时将实例属性isDestroyed置为true 销毁完成后，再执行destroyed

beforeCreate创建前钩子函数

created创建后钩子函数

beforemount挂载前钩子函数

mounted挂载后钩子函数

beforeupdate更新前钩子函数

updated更新后钩子函数

beforedestroy销毁前钩子函数

destroyed销毁后钩子函数

vue组件化

组件化是将页面分化为各个组件，输入框可以是组件，导航栏可以是组件，所有的东西都可以是组件包括我们的页面，然后进行复用。接下来我们就了解下自定义组件，也可以是页面。

vue自定义组件

我们将自定义组件和页面如何写放在一起。

我们的组件大小顺序是这样的，App.vue文件>layout文件>views文件>compoents文件。

那么我们如何写组件呢？

先将几个页面相同的部分找出，然后封装在layout中作为布局，然后将不同部分封装在页面级文件中。最后将常用的组件封装在components文件夹中，

只需将组件的名字抛出，然后在需要的地方引入，注册便可以以标签的形式使用组件

vue的组件传值

组件不在同一个文件中，那么组件如何之间的值如何互通呢？我们现在可以通过组件传值进行互通。

父传子

父传子通过props进行传值，我们可以在父组件中的子组件身上绑定一个属性例如<children :msg="msgs"></children>,msg是绑定的属性名，msgs是要传的值。在子组件中使用props进行接收，然后使用。props有两种写法

第一种：props{

数据名:{

type:类型,

default:默认值,

required:是否必传

}

第二种：props:[“第一个值”,”第二个值”,“第三个值”]

父组件：

子组件：

子传父

使用this.emit()进行传值，this.emit(“绑定的属性”,属性值)进行传值，在子组件中使用this.$emit()，在父组件中的子组件身上绑定属性<children @msg="msgs"></children>,这里的msg是事件，在js中使用msg(msgs){获取传值}

父组件：

子组件：

兄弟传值

兄弟之间传值使用eventBus事件车配合emit()on()进行传递,首先要在main.js中注册事件车Vue.prototype.eventBus=new Vue()。然后在要传递值的组件中使用this.eventbus.emit(),在接收的组件中使用this.eventBus.on()进行接收，在这里emit(“事件名”,值)，$on(”事件名“,函数)，前后事件名要一致，函数是回调函数，在里面我们可以取到传递过来的值。

main.js文件

要传值的组件

要接收值的组件

vue三大件

vue-Router

什么是vue-Router呢，vue-Router时用来干什么的呢？

vue-Router简介

vue-router是vue.js的官方路由，使vue构建单页面更加方便，也就是说vue-router是vue的单页面跳转组件

vue-router的使用

vue-router的下载安装

vue-router可以通过node.js使用npm命令（npm install vue-router）进行下载,还可以在vue-router的官网（Vue Router）查看可以使用的api和使用方法

1.使用npm或者yarn进行下载，这里我们使用npm进行下载，npm install vue-router,下载前先查看自己的node版本号，使用npm -V，如果是npm 6x则可以直接使用，如果是npm 7x则需要在命令后面需要加上--legacy-peer-deps

2.在src下创建router文件夹，在router文件夹下创建index.js文件

3.在index.js文件中分别引入vue和vue-router，然后vue对vue-router进行使用，Vue.use(vueRouter)

4.在App.vue中使用<router-view></router-view>的标签就可以使用了

注：直接下载router是下载高版本的router，vue2.6.11的版本要下载3.0.1版本的router（npm install vue-router@3.0.1）

vue-router的标签

router-view标签

<router-view></router-view>标签使用于显示路由子对象，我们的最高级路由对象便是App.vue。

router-link标签

<router-link></router-link>标签用于跳转路由，router-link标签有to属性用于路由的跳转。<router-link to="路径"></router-link>

vue的路由信息配置

我们的路由信息都在routes中进行配置，routes是数组形式，我们的路由信息对象都是以数组套用对象的形式进行显示。

<script> 
const routes=[{ 
//第一个路由
 },{
 //第二个路由
 }]
</script>

我们的路由信息配置会配置很多的路由信息，如name路由名，path路由路径，component路由的引用组件注册，redirect路由重定向，children路由子对象，在这里我们的路由子对象也是数组套用对象的形式。

路由懒加载

我们知道，在写路由配置信息的时候，在配置路由之前我们需要将配置的子路由需要的组件引入进来，然后在进行使用，这样，无论我们引入的组件使用与否，都会先进行加载，但是这样的话就会浪费很多资源。所以我们提出了路由懒加载这个概念，路由懒加载是指我们在使用到这个路由时才会去引入加载这个组件。那么路由懒加载如何写呢？

<script>
    import 组件名 from "组件路径"//必填
    const routes=[{
        name:"路由名",//必填
        path:"路由路径",//必填，形式是/路由名的形式
        component:组件名,//必填
        redirect:重定向到的路由名,//选填
        //路由自定义信息
        meta:{自定义信息}
        //路由子对象
        children:[{//选填
            路由配置
        }]
    }]
</script>

this.router和this.route

this.route是路由信息，this.router是路由跳转方法

<script>
    const routes=[{
        name:"路由名",
        path:"路径",
        component:()=>import("组件路径")//路由懒加载
    }]
</script>

路由传值

<script>
    //我们通过this.$router.push()进行传值
    //1.使用path跳转，
    //（1）使用query传值
    this.$router.push({
        path:"路径",
        query:{参数名:参数值}
    })
    //2.使用name跳转，
    //（1）使用query传值
    this.$router.push({
        name:"路由名",
        query:{参数名:参数值}
    })
    //（2）使用params传值
    this.$router.push({
        name:"路由名",
        params:{参数名:参数值}
    })
    //query传值刷新页面后不消失而且传的值可以在导航栏看见，params传值刷新页面后消失
    //在另一个子路由中使用this.$route接收
    //通过this.$route的params和query方法可以分别获取传来的值
    //params传来的值
    console.log(this.$route.params)
    //query传来的值
    console.log(this.$route.query)
</script>

动态路由传值

所谓的动态路由是我们可以在传值的时候直接在路径名后添加要传递的值，首先，我们要在路由信息配置中配置，直接在路径名后夹/?参数名即可，然后拼接即可。

路由信息配置：

<script>
    const routes=[{
        name:'路由名',
        path:"路径名/?参数",
        component:组件
    }]
</script>

拼接：

<script>
    this.$router.push({
        path:"路径?参数值=参数名"
    })
</script>

动态路由配置

动态路由配置和动态路由没有关系，我们的动态路由配置指的是什么呢？这样，举个例子，例如我们在写后台管理的时候，我们需要使用路由控制页面的跳转，这时候我们的路由需要按照登陆人员的身份信息来配置路由信息。这时候我们的路由信息是不固定的，需要我们的后端来提供。那么后端提供过来的路由如何添加到已经写好的路由中呢？

我们通过router.addRoute()方法和router.removeRoute()方法进行路由信息的配置和删除

路由守卫

什么是路由守卫呢？守卫顾名思义就是对路由的一个守卫。用于通过或者重定向路由。

那么路由守卫如何写呢？我们的路由守卫有全局路由守卫，有单个路由守卫，还有组件级路由守卫，我们要学的是全局路由守卫中的前置路由守卫：router.beforeEach(),beforeEach()内是回调函数，回调函数内是判断

<script>
    import Vue from "vue"
    import vueRouter from "vue-router"
    Vue.use(vueRouter)
    const routes=[{
        name:"路由名1",
        path:"路径1",
        component:组件1
    },{
        name:"路由名2",
        path:"路径2",
        component:组件2
    }]
    const router=new vueRouter({
        routes
    })
    //beforeEach内是回调函数，内设有to，from，next等方法，我们的from方法是值来自哪里，to是指要去哪里，next是放行或者重定向
    router.beforeEach((to,from,next)=>{
        //to.path是要去路径名为路径名1的子路由
        if(to.path==="路径1"){
            //重定向到路径2的子路由
            next({path:"路径2"})
        }else{
            //放行
            next()
        }})
    export default router
</script>

axios

axios简介：

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。官方资料和介绍

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

axios使用

axios下载和安装

axios的使用node下载，我们使用npm包管理器进行下载（npm install axios --legacy-peer-deps）

axios实例化配置

首先在utils文件夹中创建config.js文件，config文件是存放网络地址的地方例如：(http://localhost:3000)，然后抛出，在utils文件夹中创建request.js请求文件，然后实例化axios请求。

<script>
    import axios from "axios"
    import baseURL from "./config.js"
    const request=(config)=>{
        const instance=axios.create({
            baseURL,
            method:config.method,
            timeout:3000
        })
        instance(config)
    }
    export default request
</script>

这就是一个简单的实例化请求。然后在src文件夹中创建api文件夹用于存储和放置请求api，然后根据各种请求按照分类放置在不同文件中。

<script>
    import request from "../utils/request.js"
    const url="接口"
   	export const getToken=(config)=>{
       return request({
           baseURL:url,
           method:"get",
           data:config.data||undefined,
           params:config.params||undefined
       })
    }
</script>

axios拦截器

axios的拦截器分两个，一个是axios请求拦截器，一个是axios响应拦截器

axios那么怎么分辨是请求拦截器还是响应拦截器呢？

假设我们实例化的axios叫做instance，则instance.interceptors是拦截器，到底是什么拦截器就要看后面跟的是什么，如果是request就是请求拦截器，如果是responce则是响应拦截器。在请求拦截器中可以在我们的请求发出之前对请求配置进行设置，在响应拦截器中可以在我们的请求响应后对响应返回的数据进行第一步处理

那么拦截器如何写呢

<script>
    //引入axios请求
 	import axios from "axios"
    //引入配置的基础网络地址
    import baseURL from "./config.js"
    //声明request函数封装axios请求
    const request=(config)=>{
        //实例化创建axios请求给到声明的instance变量
        const instance=axios.create({
            //网络地址
            baseURL,
            //请求方式
            method:config.method,
            //请求超时时间
            timeout:3000
        })
        //请求拦截器
        instance.interceptors.request.use((config)=>{//在这里可以设置请求头
            //抛出axios的配置
            return config
        })
        //响应拦截器
        instance.interceptors.responce.use(()=>{//在这里可以剥一层data
            //抛出promise抛出函数
            return Promise.resolve(response)
        })
        //抛出instance实例化请求
        retrun instance(config)
    }
    //抛出request请求
    export default request
</script>

vuex

vuex简介：

vuex是vue的全局状态管理组件。单一状态树，单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

vuex下载和安装

我们通过node进行对vuex下载，在控制台输入npm install vuex@3x -save进行下载安装

注：直接使用npm install vuex进行下载会下载到高版本，用以导致报错。

vuex的使用

在src文件夹下创建store文件夹，在此文件夹下创建index.js文件，然后引入vuex和vue，最后在mian.js中挂载。

<script>
    //引入vuex
    import vuex from "vuex"
    //引入vue
    import Vue from "vue"
    //注册使用vuex
    Vue.use(vuex)
    //实例化vuex给到store
    const store=new vuex.Store({
        state:{
          //存储状态  
        },
        getters:{
          //计算属性  
        },
        motation:{
          //同步操作
        },
        action:{
          //异步操作
        },
        module:{
          //模块化
        }
    })
    //抛出store
    export default store
</script>

mian.js配置：

<script>
import Vue from 'vue'
import App from './App.vue'
    //引入store
import store from "./store/index.js"
Vue.config.productionTip = false
new Vue({
    //挂在store
  store,
  render: h => h(App),
}).$mount('#app')
</script>

vuex配置

我们来了解下vuex的store里的配置。共有五个对象，分别是state，getters，motations，actions，modules

<script>
    const store=new vuex.Store({
        //配置
        state:{
            //state是存放我们的状态的地方，通常会以键值对的形式进行存储，例如toKen
            token:true
        },
        getters:{
            //计算属性定义函数用于计算状态使用,通常有一个参数默认为state是获取state中状态的地方,例如:
            changeToken(state){
                //token取反
                window.localstorage.setItem("token",state.token)
            }
        },
        motations:{
            //同步属性，定义函数改变state中的状态，定义下的函数同步改变state的状态，定义的函数有两个载荷，其实就是参数，第一个			载荷是state，第二个载荷是我们要传过来的值,通常我们使用commit进行使用
            setToken(state,newState){
                state.token=newState
            }
        },
        actions:{
            //异步属性，定义异步执行的函数，用于执行同步的方法来修改state的状态，同样有两个载荷，第一个是context,第二个是要传		过来的值，通常通过dispatch进行分发
            setToken(context,newState){
                context.commit("setToken",newState)
            }
        },
        modules:{
            //模块化，用于大项目，多人共用vuex时
        }
    })
</script>

vuex的调用

<script>
    export default {
        name:"index",
        cretaed(){
         	//调用state中定义的状态   
            console.log(this.$store.state.token)
            //调用getters中的方法
            this.$store.getters.changeToken
            //调用motations中的方法 我们通过commit调用motations的方法。this.$store.commit("方法名",要传递的状态值)
            this.$store.commit("setToken",false)
            //调用actions中的方法 我们通过dispatch调用motations的方法。this.$store.dispatch("方法名",要传递的状态值)
            this.$store.dispatch("setToken",fasle)
        }
    }
</script>

vuex的语法糖

我们重点讲几个语法糖，分别是关于state,getters,motations和actions的语法糖。

当我们在有些时候会发现直接使用this.$staore的方法会使代码冗余，所以有时候我们会发现这些语法糖在这时候就很好用。我们使用展开运算符对语法糖进行展开，然后进行使用

mapState

<script>
    //引入语法糖
    import {mapstate} from "vuex"
    export default{
        name:"index",
        data(){
            return{
                //数据
            }
        },
        getters:{
            //（1）对象形式展开
            ...mapSate({
                token:state=>state.token
            })
            //（2）数组形式展开
            ...mapState(["token"])
        },
        methods:{
        },
        created(){
            //对展开获取到的状态进行使用
            console.log(token)
        }
    }
</script>

mapGetters

<script>
    //引入语法糖
    import {mapGetters} from "vuex"
    export default{
        name:"index",
        data(){
            return{
                //数据
            }
        },
        getters:{
        },
        methods:{
            //对语法糖进行展开
			...mapGetters(["changeToken"])
            changes(){
        //对展开的方法进行使用
        		this.changeToken
    		}
        },
        created(){
            //对展开获取到的状态进行使用
            console.log(token)
        }
    }
</script>

mapMotations

<script>
    //引入语法糖
    import {mapMotations} from "vuex"
    export default{
        name:"index",
        data(){
            return{
                //数据
            }
        },
        getters:{
        },
        methods:{
            //对语法糖进行展开
			...mapMotation(["changeToken"])
            changes(){
        //展开后的方法进行使用
        		this.changeToken(false)
    		}
        },
        created(){
            //对展开获取到的状态进行使用
            console.log(token)
        }
    }
</script>

mapActions

<script>
    //引入语法糖
    import {mapstate} from "vuex"
    export default{
        name:"index",
        data(){
            return{
                //数据
            }
        },
        getters:{
        },
        methods:{
            //对语法糖进行展开
			...mapAction(["changeToken"])
            changes(){
        //展开后的方法进行使用
        		this.changeToken(false)
    		}
        },
        created(){
            //对展开获取到的状态进行使用
            console.log(token)
        }
    }
</script>

vuex的模块化

模块化是对于大型多人合作项目进行使用的，一般来说是多人共同完成项目时要使用同一个状态时使用。首先我们要在index.js文件中对自己要使用的状态进行模块化封装，例如

<script>
    import vuex from "vuex"
    import vue from "vue"
    vue.use(vuex)
    const user1={
        namespaced:true,//使其成为带命名的模块
        state:{
            num:1
        },
        getters:{
            //计算方法
        },
        motations:{
            //同步方法
        },
        actions:{
            //异步方法
        }
    }
    const store=new vuex.store({
        ......
        module:{
            user1
        }
    })
</script>

然后我们借用语法糖进行使用，也可以用this.$store的方法进行使用

<script>
    import {mapSate} from "vuex"
    export default{
        name:"index",
        computed:{
            //展开mapState的时候第一个参数是我们的模块名   对向形式展开
            ...mapState("user1"{
                        num:state=>state.num
                        })
        //数组形式展开
            ...mapState("user1",["num"])
        },
        created(){
            //对展开的状态进行使用
            console.log(num)
        }
    }
</script>

vue插槽

默认插槽

<slot></slot>匿名插槽，可以用于子组件向父组件展示信息

children子组件：

<template>
    <div>
		<header><slot>我是默认插槽</slot></header>        
    </div>
</template>

在父组件中即可展示。

具名插槽

用于父组件向子组件传递值。

children子组件：

<template>
    <div>
        //默认插槽，也是匿名插槽
        <slot name="myslot"></slot>
    </div>
</template>
<script>
    export default{
        name:"children",
    }
</script>

father父组件：

<template>
    <div>
        <children>
            //匿名插槽的使用使用v-slot绑定插槽名
        	<template v-slot:myslot>我想给子组件插槽的值</template>
        </children>
    </div>
</template>

作用域插槽

如果需要用一句话去总结作用域插槽，那就是在父组件中访问子组件的数据，或者从数据流向的角度来讲就是`将子组件的数据传递到父组件

children子组件：

<template>
    <div>
        //作用域插槽
        <slot :obj="childrenObj"></slot>
    </div>
</template>
<script>
	export default{
        name:"children",
        data(){
            return:{
                childrenObj:{
                    name:"我是children的作用域插槽"
                }
            }
        }
    }
</script>

father父组件：

<template>
    <div>
        //作用域插槽传递数据使用v-slot获取scoped
        <template v-slot="scoped">
            {{scoped.obj.name}}
        </template>
    </div>
</template>