世界和我们都不该止步于此

目录全局前置路由守卫next函数三种调用方法Vue的导航守卫是什么？可以做什么？导航守卫可以控制路由的访问权限--什么意思呢？假如现在我们想要在某一个应用程序主页面点击对应路由链接跳转到后台的管理系统那么这时路由守卫就起到了一个检测的作用路由守卫的名字起的很形象，它其实就是充当了一个'保安'的职责只有你登录成功了，在localStorage本地存储中的token有值，守卫才会让你进入后台的管理系统如果没有路由守卫-不能控制访问权限的话，任何人点击路由链接就会跳转到后台管.

目录vue-router中的编程式导航API演示首先在Vue的学习中，我们会引出导航这么一个概念那么什么是导航呢？nav？----嗯~~好像也对，但我们今天说的不是nav我们点击链接切换组件，这就是导航，我更愿意称其为路径导航导航又分为俩种，就是我们标题所说的：声明式导航：我们在网页中点击<a>链接实现网页的切换；在Vue项目中点击<router-link></router-link>切换组件，这都属于声明式导航编程式导航：wo.

相信我们对于vue-router不陌生当我们打印当前的Vue实例的话，在Vue实例中是会有$route这样一个参数对象的非常的重要，我们来看一下都有哪些属性：常用的有fullPath、params、path以及queryfullPath：完整的哈希地址------我们可能会疑惑--这不是和path路径一样吗？当我们在Hash地址之后添加上一串查询字符串参数的话，我们就不会这么认为了：并且后面的查询参数也可以使用query来访问到params访问到的是路径参.

目录动态路由匹配操作方法1：在Vue实例中逐层寻找方法2：当前路由规则开启props传参，拿到动态参数值动态路由匹配可以提高路由规则的复用性什么意思呢？假如我们有很多的商品展示，每一个商品都需要有对应的详情展示页难道我们要写上万个甚至更多的路由规则吗？<!-- 假如现在有四个商品 --><router-link to="/Move/1">商品1</router-link><router-link to="/Move/2"&gt.

什么是嵌套路由？嵌套路由就是在父组件中的子组件路由里面又嵌套了一层子（孙子）组件路由就像这样：在App主组件中有三个子组件使用路由的方式进行切换，以达到SPA功能但同时又在子组件关于页面中又使用了一层路由实现了一个Tab栏切换的功能这就是嵌套路由---目录嵌套路由的使用默认子路由我们在使用嵌套路由的时候，大体操作和基本路由一致，需要注意的是要通过children属性来声明子路由规则就像这样---嵌套路由的使用在路由模块中我们先导入需要的组件// 导.

vue-router是Vue官方给我们的路由解决方案，方便我们管理SPA项目中组件的切换目录一.安装vue-router包二.创建路由模块三.导入-挂载路由模块四.定义路由规则和占位符重定向路由规则一.安装vue-router包npm i vue-router -S二.创建路由模块我们需要在src源代码目录下新建一个router文件夹在router文件夹下新建index.js路由模块然后我们初始化一下index.js路由模块：// 导入Vue.

目录三个问题了解前端路由前端路由工作流程了解前端路由原理——自己实现一个基本的前端路由三个问题了解前端路由路由（router）是什么？---router就是对应关系给我一个路径---我返回一个响应根据路径来判断应该把该请求分发给哪个模块谁和谁的对应关系？单页面应用程序（SPA）与前端路由的一个对应关系在Vue前端路由中也就是Hash地址与组件的对应关系，我们可以通过location.hash拿到hash地址，根据不同的Hash地址，来对应的显示不同的

如果我们在进行Vue项目开发的时候，有俩个或者更多的组件中使用到了ajax请求那么我们每一个组件都需要注册导入axios模块并发起很多次的请求目录Vue原型文件全局挂载axios自定义属性Vue原型文件全局配置axios请求根路径就像这样：// 组件1import axios from 'axios'export default { methods: { async getInfo () { const { data: res } = await axi

Vue中有很多的指令，例如v-bind、v-on、v-slot等等现在我们甚至可以自定义指令来对元素进行操作Vue自定义指令又分为私有自定义指令和全局自定义指令他们的区别就是当前组件使用----全局使用（和过滤器filter很是相似）不过我们应该不会常用到私有自定义指令，如果我们需要自定义一个指令的话，那么我想复用性会很高，那么我们将使用全局自定义指令目录私有自定义指令全局自定义指令私有自定义指令在每一个组件中，我们可以在directives节点下声明私有自定义指令.

<slot></slot>是Vue为组件封装者提供的一个功能开发者在封装组件的时候，把不确定的希望由用户指定的部分定义为插槽也就是说插槽部分可以由用户自定义UI结构<slot name="default"></slot>每一个slot插槽都会有一个name属性来指定其名称当然我们可以省略--因为Vue会默认为我们的插槽添加一个默认name属性：default当插槽有了name属性，那么这个插槽也相应的变为一个具名插槽具名插槽和

当我们需要在组件之间切换的时候，可能会想到v-if或者v-show但是这俩个并不会保持组件的状态，比如v-if：我们每次隐藏显示切换的时候都会动态的去删除或者渲染组件，得到的组件是一个初始状态的，我们没有办法保持距离上次的状态于是——我们可以使用动态组件经过以上的叙述，我们不难直到什么是动态组件它就是动态的去切换组件的显示与隐藏目录component组件keep-alive-怎么保留状态？keep-alive的一些附带功能component组件那么我们该怎么实现动态

ref属性是什么？可以辅助开发者获取DOM元素或者组件的引用什么意思？我们可以使用jQuery的$来获取DOM元素，或者在原生中使用querySelector等获取到DOM元素并对其做出相应的操作在Vue中，我们可以使用ref属性来获取DOM元素甚至组件引用来做出相应的操作所以在Vue项目中，我们不会去使用jQuery，这也是jQuery慢慢淡出人们视线的主要原因之一目录ref引用DOM元素ref定义ref引用组件实例Son.vue:App.vue:ref引.

案例思路：点击搜索按钮-->搜索按钮消失、文本框显示并自动获取焦点点击其他区域-->文本框失去焦点-->文本框消失，搜索按钮显示<template> <div id="app"> <p>我是App.vue文件</p> <div class="serach"> <input type="text" v-if="inputSet" @blur="inputRemove" r..

在Vue2中，兄弟组件之间的数据共享方案是EventBus什么是EventBus方案？EventBus本质就是链接兄弟组件之间的一个桥梁具体来说EventBus.js模块会向外共享一个Vue实例对象发送方组件会将数据通过EventBus的Vue实例触发$.emit方法触发一个自定义事件此时这个自定义事件是可以被外界（导入EvnetBus的组件）使用$.on()方法接收到的目录Son.vue：Son_2.vue:EventBus.js:Son.vue：..

父组件向子组件共享数据使用的是自定义属性而子组件向父组件共享数据使用的是自定义事件也就是说连接共享数据关系链的是一个事件：我们需要在子组件中使用$emit方法来创建一个自定义的事件，在父组件中使用该方法（也就是通过调用子组件的$emit方法触发了父组件中所使用的方法），父组件会通过事件的调用--使用参数接收到子组件中的数据：可能这样说有点难以理解，我们通过代码实践一下：目录整体运行过程：1.首先，我们在子组件中定义一个数据num，通过触发点击事件改变数据的同时调用了$emit()

一句话：父组件向子组件共享数据需要使用自定义属性也就是在父组件中定义数据，绑定给子组件在子组件中使用props来接收到数据进行使用tips：这里需要注意的是props是只读的，通过props接收的数据不可以在子组件中直接修改值，子组件接收到的值只是一个引用，不过可以修改成功，只是会报错，我们有需求在子组件中修改值的话，可以先转存一下再进行修改现在我们有这样一个App.vue的组件，它的子组件为Son.vue我们想要让子组件来使用App.vue父组件中的数据：1.我们想要关联这俩个

我们首先来看一下Vue官方给出的生命周期图介绍：Vue说：你不需要立马弄明白所有的东西，不过随着你不断的学习和使用，它的参考价值会越来越高可见生命周期图的作用的大小我们先了解一下什么是生命周期？Life Cycle指的是一个组件从创建--->运行--->销毁的整个阶段既然是周期，那么所强调的就是一个时间段Vue又引出了生命周期函数，是Vue框架提供的内置函数，会伴随着组件的生命周期，按顺序自动执行接下来我们来对生命周期图做出理解---...

props是Vue实例上的一个属性是组件的自定义属性，我们在封装通用组件的时候合理使用props可以很大限度的提高组件的一个复用性目录了解与使用propsprops的default属性props的type属性prop的required必填项我们想要使用data来进行交互-->（点击按钮加1）：<template> <div id="app"> <p>{{ num }}</p> <butto...

每当我们创建封装好一个组件后，这些组建彼此之间并没有联系，都是独立的组件main.js文件中render节点指向着一个组件（比如App.vue这个组件）既然前端工程化推荐模块化、组件化，那么我们就需要创建多个组件并建立它们之间的联系一起渲染完成整个项目的搭建我们可以根据彼此之间的嵌套，形成父子、兄弟关系我们建立关系时可以有俩种方案选择：私有子组件---全局组件当一个组件复用次数很多的话，我们可以使用全局组件相反：如果一个组件只需要使用1~2次的话，我们可以选择注册私有子组件私

首先我们需要知道什么是组件化开发？前端工程化包含这么四个方针：模块化、组件化、规范化、自动化具体可以查看：了解前端工程化其中就有我们的组件化 ，它指的就是根据封装这么一个思想概念，将页面上可以重复使用的UI结构封装为组件，也叫做复用，可以大大的方便我们项目的开发以及维护Vue中的组件化开发首先我们要知道Vue是一个支持组件化开发的前端框架那么哪个文件是Vue的组件呢？没错，就是以.Vue后缀结尾的文件就是Vue的组件vue组件中有三个部分，分别是：template-.

vue-cli是一个Vue.js开发的可以快速创建工程化项目的标准工具，我们在创建Vue项目时就不需要自己手动配置webpack了，所以说vue-cli简化了我们基于webpack创建工程化的Vue项目的过程不过在之前我们需要了解一下什么是单页面应用程序：单页面程序（Single Page Application），简称SPA它指的是一个Web网站中只有唯一的一个HTML页面，所有的功能于交互都在这个唯一的HTML页面内完成，单页面应用程序的搭建就需要用到vue-cli目录安装配置了解v

计算属性指的是通过一系列运算之后最终得到的一个属性值这个动态计算出来的属性值可以被模板结构或者methods方法使用这些话都太官方了----什么意思呢或者说有什么作用呢？其实计算属性就是存放到一个固定地点的JavaScript表达式，存放起来就是为了代码复用，并且当计算属性中依赖的数据源发生了变化，计算属性会自动重新求值这样的话，就实现了动态计算渲染，代码复用使用： 所有计算属性需要放在computed节点中：<div id="app"> <div :

watch侦听器是我们监视数据变化的一种函数，并可以针对数据的变化来做出对应的操作与Vue2的过滤器相似，watch侦听器也需要在Vue实例对象中添加一个watch节点<div id="app"> <input type="text" v-model="test"></div>const vm = new Vue({ el:'#app', data:{ test:'hello Vue' }, wat

Vue2中有过滤器（Filters）这样一个函数，不过在Vue3中被取消掉了现在市面上还是有很多的公司都在使用Vue2的，所以过滤器我们有必要去了解一下：它常用于文本的格式化（可以在插值表达式{{}}或者v-bind属性绑定中使用）我们简单的了解了一下过滤器，那么怎么使用呢？目录私有过滤器全局过滤器私有过滤器<div id="app"> <p :id="val | call">{{val | call}}</p> &.

在Vue中我们都知道有数据驱动视图（单向数据绑定）和双向数据绑定这俩个特性我们今天着重阐述一些常用指令（Directives）那么第一个问题来了--什么是指令？它是Vue为我们开发者提供的模板语法，辅助我们渲染页面基本结构其中属于单向数据绑定指令的有：内容渲染指令--属性绑定指令--事件绑定指令目录一.内容渲染指令1.v-text2.{{}}3.v-html二.属性绑定指令三.JavaScript表达式四.事件绑定指令五.常用事件修饰符六.键盘...

目录了解VUE基础MVVM编程思想简单玩玩Vue---Hello Vue直接先放一张图片——希望在以后的日子里也可以向他一样做出优异的贡献了解VUE基础Vue是什么？一套用于构建用户界面的前端框架什么是构建用户界面？简单说就是向UI界面、向HTML页面中增添数据我们之前使用DOM来构建用户界面--可是现在不同了--我们不需要什么是框架？框架是一种解决方案、是一种简化方案或者说是一种懒人方案我们需要去遵守框架的规范去编写我们的业务功能或项目vue..