一直在路上，从未停止前进【一直在更新中。。。】

第一章：Vue组件化编程

一、区分 js 表达式和 js 代码（语句）

在这里插入图片描述

二、el 和 data 的两种写法

<script>
  Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
  // 创建Vue实例
  const app = new Vue({
    el:"#root", // element 挂载el，用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
    data:{
      message:"Hello Vuejs",
      age:18
    }

  })
</script>

1、el 挂载元素的两种写法

1、 el:"#root",
2、app.$mount("#root")

2、data 的两种写法

第一种：对象式

data:{
  message:"Hello 博客zhu虎康",
  age:18
}

第二种：函数式

data:function(){
data:(){
    console.log("this----",this)//此处的this是Vue实例对象
    return{
        message:"Hello 博客zhu虎康",
          age:18
    }
}

==注意1：在组件开发中，data 必须使用函数式，否则会报错==
==注意2：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this 就不再是Vue实例了==

三、数据代理

1、Objet.defineproperty方法

首先，我们来看以下一组图
在这里插入图片描述
在图中的两种定义方法，第一种明显比第一种要简单，但是在控制台打印查看的时候，发现两者定义的关键字是不一样的颜色。

两者的比较：Objet.defineproperty定义出来的变量是不可以被枚举的，即在遍历对象中的各个属性的时候，是无法将其定义的属性进行遍历输出。

要想让其Objet.defineproperty定义出来的方法中的属性被枚举得到，要对以下属性进行修改。
Objet.defineproperty中的其他方法：
在这里插入图片描述
getter 和 setter 方法：
将number定义在函数外，通过Objet.defineproperty设置age的值为number，当修改age属性时，就会自动修改number值，即get()和set()方法会被触发到

2、什么是数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读 / 写）
在这里插入图片描述

3、Vue中的数据代理

请添加图片描述
原理：

1.Vue中的数据代理;
    通过vm对象来代理data对象中属性的操作（读/写)
2.Vue中数据代理的好处:
    更加方便的操作data中的数据
3.基本原理:
    通过object.defineProperty()把data对象中所有属性添加到vm 上.
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作(读/写）data中对应的属性。
然后再 :  vm._data = data

四、响应式修改data中的数组中的项

const vm = new Vue({
    el:'#root',
    student:{
        hobbys:['吃饭','睡觉','打豆豆'],
        friends:[
            {name:'jerry',age:35},
            {name:'toney',age:36}
        ]
    }
})

要求：Vue 中有如上 data，要求对其数组 hobbys 更改：
将数组 hobbys中的第一项修改为 '开车'

methods:{
    updateHobby(){
    // 第一种修改方式，用数组的splice方法
        this.student.hobbys.splice(0,1,'开车');
    // 第二种方式，使用Vue.set()
        Vue.set(this.student.hobbys,0,'开车');
    /* 第三种方式，使用vm.$set()*/
        this.$set(this.student.hobby,0,'开车')
    }
}

其他方法

在这里插入图片描述

五、报错信息

1、Uncaught SyntaxError: Cannot use import statement outside a module

第2章：VueCLI 脚手架

一、安装

第一步（仅第一次执行）：全局安装 @vue/cli

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

第三步：启动项目

npm run serve

二、小Tips

如出现下载缓慢请配置 npm 淘宝镜像：

npm config set registry https://registry.npm.taobao.org

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，请执行如下命令。就会将脚手架的默认配置生成一个 output.js文件供你查看

 vue inspect > output.js

三、分析脚手架结构

当我们使用脚手架新建一个项目vue_demo时，目录结构如下

在这里插入图片描述

assets 存放 png、video等静态资源，
components 存放子组件
脚手架文件结构如下：

在这里插入图片描述

当我们运行npm run serve命令时，系统会去文件中寻找main.js入口文件，

/*
  该文件是整个项目的入口文件
 */
// 引入Vue
import Vue from 'vue'
// 引入APP组件，它是所有组件的父组件
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false
// 创建Vue实例对象—— —— vm
new Vue({
  // 下面这行运行代码完成这个功能，将App组件放入容器中
  render: h => h(App),
}).$mount('#app')
/*
* .$mount('#app') ==>  el:'#app'
*/

首先引入App.vue文件，在App.vue文件中再引入components文件夹下的其他vue文件，如下

在这里插入图片描述

在public文件夹下找到index.html，从而启动页面

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置，含义是让给IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置图标文件的引入，<%= BASE_URL %> ，表示 public目录下-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标题，<%= htmlWebpackPlugin.options.title %>表示package.json中的name -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- noscript 表示当浏览器不支持js时noscript钟的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

四、为什么使用render函数

在我们创建 vm时，使用的 new Vue时，使用常规的new Vue会出现以下错误

new Vue({
    el:'app';
    template:'<h1>你好啊！</h1>`;
    components:{
        App
    }    
})

错误信息中要求我们使用完整版的vue或者使用render函数，由于在开发中使用完整版的vue占用体积相对较大，因此使用render函数【render函数中必须要有返回值】

一般的render函数写为：
render(createElement){
    return createElement('h1','你好啊！')
}

经过使用箭头函数的缩写为：

render: h => h('h1','你好啊！')

即，也可以写为：
在这里插入图片描述

因此，总结如下

在这里插入图片描述

五、修改脚手架中的默认配置

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，请执行如下命令。就会将脚手架的默认配置生成一个 output.js文件供你查看

 vue inspect > output.js

使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

在这里插入图片描述

六、ref属性

当我们在 APP.vue中给各标签添加属性获取DOM值操作时，建议使用ref属性，来代替document,getElementById（‘title’）
通过 ref属性获取到的值我们进行打印输出，发现，组件的DOM是组件的实例对象，而标签的DOM是真实DOM

在这里插入图片描述

因此，ref

被用来给元素或子组件注册引用信息（id的替代者）

应用在HTML标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

使用方式：

打标识：<h1 ref="xxx">...<h1>或<School ref="xxx><School>
获取：this.$refs.xxx

七、配置项props

props 实现了父组件向子组件传递数据（或方法），父组件中绑定属性（或方法），子组件中利用props接受数据（或方法）。。。若想要子组件向父组件传递数据，可利用方法传递，将参数带到方法中递回给父组件
现在有这么一个需求：在复用组件时，组件内的数据可以动态的改变，传入什么就展示什么——这就要用到props配置属性

所以，配置项props的功能就是让组件接收外部传过来的数据。

props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么就要求复制props的内容到data中一份，然后去修改data中的数据。

接收数据的方式如下

第一种：简单的声明接收【常用，只接收，对数据无特别要求】

props:['name','age','sex']

第二种：接受的同时对数据进行类型限制

props:{
    name:String,
    age:Number,
    sex:String
}

第三种：接受的同时对数据：进行类型限制 + 默认值的指定 + 必要性的限制
注意：default 与 required不能同时出现

props:{
    name:{
        type:String, // name 的类型是字符串
        required:true, // name 是必要的
    },
    age:{
        type:Number,
        default:99 // 默认值
    },
    sex:{
        type:String,
        required:true
    }
}

八、mixin混入

1、功能：复用配置，可以把多个组件共用的配置提取成一个混入对象，即多个组件共享同一个配置。
2、使用方式：

将共用的内容抽取到一个js文件中

在这里插入图片描述

在需要用到的组件中进行引入——局部引入

在这里插入图片描述

在需要用到的组件中进行引入——全局引入

在这里插入图片描述

八、自定义插件

1、定义插件：在plugins.js文件中定义插件，install()的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据【可写】

在这里插入图片描述
2、使用插件：在main.js文件中引入插件：import，使用插件：Vue.use()

九、scoped样式管理

在新建组件时，会用到 style样式，scoped的作用就是让样式在局部生效，防止类名相同引起冲突

在这里插入图片描述

十、todo案例

1、思路

在这里插入图片描述

2、添加数据——Vue组件中按下回车键获取value值

==安装npm install nanoid，并在代码中导入并调用nanoid()函数可以生成随机的id值==

第一种：使用 event获取数据

<template>
    <div>
        <input type="text" placeholder="请输入你的信息，按回车键确认" v-model="title" @keyup.enter="add"/>
    <div/>
</template>

<script>
    import {nanoid} from 'nanoid'
    export default {
        name:'AddMessage',
        methods: {
            add(event){
            // 将用户的输入包装成一个todo对象
                const todoObj = {id:nanoid(),title:event.target.value,done:false)
            }
        }
    }
</script>

第二种：使用 v-model双向绑定数据

<template>
    <div>
        <input type="text" placeholder="请输入你的信息，按回车键确认" v-model="title" @keyup.enter="add"/>
    <div/>
</template>

<script>
    export default {
        name:'AddMessage',
        data(){
            return {
                title:''
            }
        },
        methods: {
            add(){
                // 校验数据
                if(!this.title.trim()) return alert('输入不能为空')
                // 将用户的输入包装成一个对象
                const todoObj = {id:nanoid(),title:this.title,done:false),
                // 将输入框的数据进行清除
                this.tite = '' 
            }
        }
    }
</script>

3、勾选与取消勾选

第一种写法：绑定点击事件

第二种方法：使用v-model布尔值的点击绑定修改，但是不推荐使用，因为修改掉了 props

4、删除

在这里插入图片描述

5、统计已完成与全部完成

在这里插入图片描述

第一种：使用foreach循环添加【不推荐使用】

第二种，使用reduce函数实现：reduce((函数)，初始变量接收值，类似于let i=0)
数组的长度为几，reduce中的函数部分就会调用几次。
pre：上一次的值
cuurrent：当前的值

使用v-model，但需要get()方法和set()方法同时使用

6、清除已完成的todo

在这里插入图片描述

7、总结TodoList案例

在这里插入图片描述
==注意：vc中data、props、methods、computed中的名字不能重名==

十一、浏览器本地存储WebStorage

在这里插入图片描述

首先，定义几个 button

1、location

在这里插入图片描述

2、session

在这里插入图片描述

十二、todoList案例中添加本地存储

在这里插入图片描述

十三、组件的自定义事件

在这里插入图片描述

1、自定义事件_绑定

组件的自定义事件需要子组件向父组件进行传递数据，父组件定义函数（带参），绑定在子组件上，子组件通过props去拿到父组件传递过来的函数进行调用并将参数传递出去，从而试下子——父组件之间的传递

父组件App.vue

除此之外还可以用ref去接受，并在mounted中去触发事件

子组件Student.vue

2、自定义事件_解绑

解绑哪个事件就需要在哪个事件应用的组件上绑定解绑事件

十三、事件总线

想要在兄弟组件中互相传递数据，得用到父组件，但是非常麻烦
因此，学习事件总线可以有效的传递兄弟组件间的数据

在这里插入图片描述

首先在main.js文件中的实例对象vm上绑定一个事件如下

第二步在兄弟组件1——Student组件中设置方法将name通过事件总线发射出去

第三步，在兄弟组件2——School组件中的bus总线上绑定事件去接收传过来的数据

十四、消息订阅与发布

1、定义：

是一种组件间通信的方式，使用于任意组件间的通信

2、使用步骤

安装pubsub：npm install pubsub-js
引入：import pubsub from 'pubsub-js'
接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
提供数据：pubsub.publish('xxx',数据)
最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)取消订阅

在这里插入图片描述

十五、nextTick

语法：this.$nextTick(回调函数)
作用：在下一次DOM更新结束后执行其指定的回调
什么时候用：当改变数据后，要基于更新后的DOM进行某些操作时，要在nextTick所指定的回调函数中执行
案例：在点击编辑下一任务时该任务取消焦点获取，下一任务获得焦点

十六、Vue中封装的过渡与动画

1、效果

向左向右过渡移动的效果
在这里插入图片描述

2、实现

<template>
  <div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition name="hello" appear>
      <h1 v-show="isShow">{{msg}}</h1>
    </transition>
  </div>
</template>
<script>
  export default {
    name: 'Test',
    data(){
      return{
        msg:'你好啊大家！',
        isShow:true
      }
    },
  }
</script>

2.1、第一种：使用动画效果实现

1、将要过渡的内容放在 <transition>标签中，添加 name，在使用时对 name进行过渡效果添加，添加 apper表示在页面加载时开始过渡
2、在css中设置 @keyframes中的移动效果
3、利用 .hello-enter-active{}和 .hello-leave-active{}添加进入，离开的效果

<style scoped>
  h1{
    background-color: orange;
  }
  .hello-enter-active{
    animation: tran 1s linear;
  }
  .hello-leave-active{
    animation: tran 1s linear reverse;

  }
  @keyframes tran {
    from{
      transform: translateX(-100%);
    }
    to{
      transform: translateX(0px);
    }    
  }
</style>

2.2、第二种：使用过渡方式

在这里插入图片描述

2.3、第三种：使用第三方库实现过渡效果

该库的官网
第一步：安装库：npm install animate.css
第二步：导入库：import 'animated'
第三步：使用：
在这里插入图片描述

十七、vue脚手架配置代理

在这里插入图片描述

1、方法一

在这里插入图片描述

2、方法二

在这里插入图片描述

6.6 路由守卫

1、作用：对路由进行权限控制

2、分类：全局守卫、独享守卫、组件内守卫

3、全局守卫

在这里插入图片描述

第3章：Vue中的ajax

3.1 解决开发环境Ajax跨域问题

发送Ajax请求的库一般有如下五种：
在这里插入图片描述

使用 vue-resource插件时，需要 npm install vue-resource安装，然后引入并使用

3.2 github用户搜索案例

3.2.1 效果

在这里插入图片描述

3.2.2 接口地址

https://api.giithub.com/search/users?q=xxx

3.2.3 案例实现

需要三个组件：App.vue、Search.vue、List.vue

Search.vue

<template>
  <section>
    <h3>Search Github users</h3>
    <div>
        <input type="text" placeholder="enter the name you seaerch" v-model="keyWord"/>&nbsp;
        <button @click="searchUsers">Search</button>
    </div>
      
  </section>
</template>

<script>
    import axios from 'axios'
    export default {
        name:'Search',
        data(){
            return {
                keyWord:''
            }
        },
        methods: {
            searchUsers(){
                // 请求前更新List的数据
                this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})
                axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                    response=>{
                        console.log('请求成功了')
                        // 请求成功后更新List的数据
                        this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:response.data.items})

                    },
                    error=>{
                        console.log('请求失败了',error.message)
                        // 请求失败后更新List的数据
                        this.$bus.$emit('updateListData',{isLoading:false,errMsg:err,users:[]})

                    }
                )
            }
        },
    }
</script>

List.vue

<template>
  <div class="row">
      <!--展示用户列表 -->
      <div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login">
          <a href="info.user.html_url" target="_blank">
              <img src="info.user.avatar_url" style="width:100px"/>
          </a>
          <p>{{info.user.login}}</p>
      </div>
      <!-- 展示欢迎词 -->
      <h1 v-show="info.isFirst">欢迎使用！</h1>
      <!-- 展示加载中 -->
      <h1 v-show="info.isLoading">正在加载中。。。</h1>
      <!-- 展示错误信息 -->
      <h1 v-show="info.errMsg">{{info.errMsg}}</h1>

  </div>
</template>

<script>
export default {
    name:'List',
    data(){
        return {
            info:{
                isFirst:true,//是否初次展示
                isLoading:false,//是否处于加载中
                errMsg:'',//展示错误信息内容
                users:[]
            }
        }
    },
    mounted() {
        this.$bus.$on('updateListData',(dataObj)=>{
            console.log('我是List组件，收到数据')
            this.info = {...this.info,...dataObj}
        })
    },
}
</script>

注意

3.3 slot插槽

第一版：https://blog.csdn.net/qq_53810245/article/details/121707098?spm=1001.2014.3001.5502

3.3.1 作用

让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ==> 子组件

3.3.2 分类：默认插槽、具名插槽、作用域插槽

3.3.3 使用方式

1.默认插槽：

在这里插入图片描述

2.具名插槽：

在这里插入图片描述

3.作用域插槽：

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定（games数据在Category组件中，但使用数据所遍历出来的结构由APP组件来决定）
在这里插入图片描述

第4章：vuex

4.1 理解vuex

4.1.1 vuex是什么

概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读 / 写），也是一种组件间通信的方式，且适用于任意组件间通信
Github地址：https://github.com/vuejs/vuex

4.1.2 什么时候使用Vuex

多个组件依赖于同一状态，多个组件需要共享数据时
来自不同组件的行为需要变更同一状态

在这里插入图片描述

4.1.3 搭建Vuex环境

见到store即见到了Vuex
在main.js文件中引入并使用，引入并使用后在vm中定义的store就会在vc、vm实例中展现
在这里插入图片描述

第一步，安装： npm install vuex@3
第二步，创建 src\store\index.js文件

    // 该文件用于创建 Vuex 中最为核心的store
    
    import Vue from 'vue'
    // 引入Vuex
    import Vuex from 'vuex'
    // 应用 Vuex 插件
    Vue.use(Vuex)
    
    // 准备actions——用于响应组件中的动作
    const actions = {}
    // 准备mutations——用于操作数据（state）
    const mutations = {}
    // 准备state——用于存储数据
    const state = {}
    
    // 创建并暴露store
    export default new Vuex.Store({
        actions,
        mutations,
        state,
    })

第三步，在 main.js中创建 vm 时传入 store 配置项

    // 引入 Vue
    import Vue from 'vue'
    // 引入 APP
    import App from './App.vue'
    // 引入 插件
    import vueResource from 'vuee-resource'
    // *****引入 store*****
    import store from './store/index'
    
    // 关闭 Vue 的生产提示
    Vue.config.productionTip = false
    // 使用插件
    Vue.use(vueResource)
    
    // 创建 vm
    new Vue({
      el:'#app',
      render: h => h(App),
      store,
      beforeCreate(){
        Vue.prototype.$bus = this
      }
    })

4.1.4 使用Vuex

第一步，初始化数据、配置 actions、配置 mutations，操作文件 store.js

// 该文件用于创建 Vuex 中最为核心的store

import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用 Vuex 插件
Vue.use(Vuex)

// 准备actions——用于响应组件中的动作
const actions = {
    jia:function(context,value){
        // console.log('action中的jia被调用',context,value)
        console.log(context.commit,value)
        context.commit('JIA',value)
    },
    jian:function(context,value){
        // console.log('action中的jia被调用',context,value)
        context.commit('JIAN',value)
    },
}
// 准备mutations——用于操作数据（state）
const mutations = {
    JIA(state,value){
        console.log('mutations中的JIA被调用',context,value)
        state.sum += value
    },
    JIAN(state,value){
        console.log('mutations中的JIAN被调用',context,value)
        state.sum -= value
    }
}
// 准备state——用于存储数据
const state = {
    sum:0 // 当前的和

}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

第二步，组建中读取vuex中的数据： $store.state.sum
第三步，组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或$store.commit('mutations中的方法名',数据)
备注：若没有网络请求或其他业务罗晋，组件中也可以越过actions，即不写dispatch，直接编写commit

4.2 vuex模块化管理 + namespace

1、目的：让代码更好维护，让多种数据分类更加明确
2、修改index.js，首先需要开启命名空间namespace

在 src\store\index.js文件中将 actions、 mutations、 state、 getters抽离在各自相关的配置中
在创建并暴露store时需要将其放在modules中
在 src\components\Count.vue文件中使用时， ...mapState中需要修改为如下

在这里插入图片描述

4.3 vuex核心概念和API

第5章：Vue UI组件库

5.1 移动端常用 UI 组件库

1、 Vant ：https://youzan.github.io/vant
2、 Cube UI ：https://didi.github.io/cube-ui
3、 Mint UI ：https://mint-ui.github.io

5.2 PC端常用 UI 组件库

1、 Element UI ：https://element.eleme.cn
2、IView UI ：https://www.iviewui.com

第6章：vue-router

6.1 相关理解

6.1.1 vue-router 的理解

vue的一个插件库，专门用来实现SPA应用

6.1.2 对SPA应用的理解

单页Web应用（single page web application，SPA）。
整个应用只有一个完整的页面（index.html）。
点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
数据需要通过 ajax 请求获取。

6.1.3 路由的理解

1. 什么是路由？

一个路由就是一组映射关系（key - value）
key 为路径， value 可能是 function 或 component

2.路由分类

后端路由：
1）理解：value是 function，用于处理客户端提交的请求。
2）工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。
前端路由：
1）理解：value 是 component，用于展示页面内容。
2）工作过程：当浏览器的路径改变时，对应的组件就会显示。

6.2 基本路由

1、基本使用

安装 vue-router，命令 npm i vue-router@3

注意：vue-router4只能用在vue3中，vue-router3才能用在vue2中

main.js文件中应用插件：Vue.use(VueRouter)

// 引入 Vue
import Vue from 'vue'
// 引入 APP
import App from './App.vue'
// 引入 VueRouter
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'

// 关闭 Vue 的生产提示
Vue.config.productionTip = false
// 应用插件
Vue.use(VueRouter)

// 创建 vm
new Vue({
  el:'#app',
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus = this
  },
  router:router
})

编写router配置项：src\router\index.js该文件专门用于创建整个应用的路由器

在这里插入图片描述

实现切换（active-class可配资高亮样式）

<router-link class="list-group-item" active-class="active" to="/about">About</router-link>

指定展示位置

<!-- 指定组件的呈现位置 -->
<router-view></router-view>

几个注意点：

路由组件通常放在pages文件夹，一般组件通常放在components文件夹。
通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
每个组件都有自己的$route属性，里面存储着自己的路由信息。
整个应用只有一个router，可以通过组件的$router属性获取到。

6.3 嵌套（多级）路由

在这里插入图片描述
1、配置路由规则，router\index.js中使用children配置项

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

// 创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },        
        {
            path:'/home',
            component:Home,
            children:[ // 通过children配置子路由
                {
                    path:'news', // 此处一定不要写：/news
                    component:News
                },
                {
                    path:'message', // 此处一定不要写：/message
                    component:Message,
                    children:[
                        {
                            name:'detail',
                            path:'detail',
                            component:Detail
                        }
                    ]
                }
            ]
        }    
    ]
})

2、跳转（要写完整路径）：
<router-link active-class="active" to="/home/news">News</router-link>

6.4 路由传参

1、路由的query参数

在这里插入图片描述

拿数据时需要在 Detail.vue组件中使用 $route.query.id

2、路由的params参数

2.1、配置路由

在这里插入图片描述

2.2、传递参数

在这里插入图片描述

2.3、接受参数

在这里插入图片描述

特别注意：路由携带 params参数时，若用到 to的对象写法，则不能使用 path配置项，必须使用 name配置项

6.5 命名路由

1、作用：可以简化路由的跳转

2、如何使用

在这里插入图片描述

6.6、路由的props配置

作用：让路有组件更加方便的收到参数

1、`router\index.js`中配置`props`

在这里插入图片描述

2、`Message.vue`中传递props

在这里插入图片描述

3、`Detail.vue`中使用props

在这里插入图片描述

6.7 `<router-link>`的replace属性

1、作用：控制路由跳转时操作浏览器历史记录的模式

2、浏览器的历史记录有两种写入方式

分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push

3、如何开启`replace`模式

<router-link replace ...>News<router-link/>

6.8 编程式路由导航

1、作用：

不借助<router-link>实现路由跳转，让路有跳转更加灵活

2、具体编码

push和replace方法调用一致

在这里插入图片描述

3、其他API

在这里插入图片描述

6.9 缓存路由组件

1、作用

让不展示的路由组件保持挂载，不被销毁。

2、具体编码

在哪里需要缓存路由，就在那个组件中加如下代码
在这里插入图片描述

6.10 两个新的生命周期钩子

1、作用

路由组件所独有两个钩子，用于捕获路由组件的激活状态。

2、具体名字

activated路由组件被激活时触发
deactivated路由组件失活时触发

3、案例

在这里插入图片描述

6.11 路由守卫

1、作用：对路由进行权限控制

2、分类：全局守卫、独享守卫、组件内守卫

3、全局守卫

文件 router\index.js，先在路由routes中的meta配置自定义内容

在这里插入图片描述

在判断当前路由是否需要权限控制时可使用:
if(to.name === 'news' || to.name === 'message')
if(to.path=== '/home/news' || to.path === '/home/message')

4、独享路由守卫

在想要实现独享路由守卫的路由中配置 beforeEnter独享路由守卫
独享路由守卫只有前置 beforeEnter无后置，要想配置后置路由，得配置全局后置路由

5、组件内路由守卫

在需要监听的组件内进行放置

通过路由规则进入的守卫，进入该组件时被调用
beforeRouterEnter(to,from,next){}
通过路由规则离开的守卫，进入该组件时被调用
beforeRouterLeave(to,from,next){}

6.12 路由器的两种工作模式

1、 hash模式：

在这里插入图片描述

1、对于一个url来说，什么是hash值？——#及其后面的内容就是hash值。
2、hash值不会包含在HTTP请求中，即：hash值不会带给服务器。
3、地址中永远带着#号，不美观。
4、若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记不合法。
5、兼容性较好
在这里插入图片描述

2、 history模式：

在这里插入图片描述

1、地址干净，美观。
2、兼容性和hash模式相比略差。
3、应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。解决方法如下：

解决history模式下刷新页面`服务端404`的问题

详情可见：https://www.npmjs.com/package/connect-history-api-fallback

第一步：安装npm的中间件 connect-history-api-fallback： npm install connect-history-api-fallback
第二步：引入并使用

3、使用：项目上线部署步骤

在router\index.js文件中配置mode
在这里插入图片描述
第一步：将vue项目打包生成dist文件夹：npm run build

第二步：打包出来的项目必须放在服务器上部署一遍才可打开

第三步：使用nodejs搭建本地微型服务器，将项目部署
新建一个空文件夹demo，
变成一个合法的包：npm init
安装express：npm install express
资源部署：新建一个文件夹demo\static，将vue项目中打包生成的文件放到static文件夹下
在这里插入图片描述

新建一个主文件demo\serve.js，写入如下内容：

// 引入 express
const express = require('express')
// 引入connect-history-api-fallback
const history = require('connect-history-api-fallback');

// 创建app服务于实例对象——直接调用expres()
const app = express()

// 使用connect-history-api-fallback，必须在传入指定资源之前使用
app.use(history())
// 传入指定资源
app.use(express.static(__dirname+'/static'))
// 配置后端路由
app.get('/person',(req,res)=>{
    // 给客户端返回数据
    res.send({
        name:'tom',
        age:18
    })
})

// 端口监听，(端口号,(错误信息)=>{})
app.listen(5005,(err)=>{
    if(!err) console.log('服务器启动成功了!')
})

启动服务器：node server
访问服务器：localhost:5005/person

下一篇：Vuejs项目练习

在这里插入图片描述

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Vuejs补充版

第一章：Vue组件化编程

一、区分 js 表达式和 js 代码（语句）

二、el 和 data 的两种写法

1、el 挂载元素的两种写法

2、data 的两种写法

三、数据代理

1、Objet.defineproperty方法

2、什么是数据代理

3、Vue中的数据代理

四、响应式修改data中的数组中的项

五、报错信息

1、Uncaught SyntaxError: Cannot use import statement outside a module

第2章：VueCLI 脚手架

一、安装

二、小Tips

三、分析脚手架结构

四、为什么使用render函数

五、修改脚手架中的默认配置

六、ref属性

七、配置项props

八、mixin混入

八、自定义插件

九、scoped样式管理

十、todo案例

1、思路

2、添加数据——Vue组件中按下回车键获取value值

3、勾选与取消勾选

4、删除

5、统计已完成与全部完成

6、清除已完成的todo

7、总结TodoList案例

十一、浏览器本地存储WebStorage

1、location

2、session

十二、todoList案例中添加本地存储

十三、组件的自定义事件

1、自定义事件_绑定

2、自定义事件_解绑

十三、事件总线

十四、消息订阅与发布

1、定义：

2、使用步骤

十五、nextTick

十六、Vue中封装的过渡与动画

1、效果

2、实现

2.1、第一种：使用动画效果实现

2.2、第二种：使用过渡方式

2.3、第三种：使用第三方库实现过渡效果

十七、vue脚手架配置代理

1、方法一

2、方法二

6.6 路由守卫

1、作用：对路由进行权限控制

2、分类：全局守卫、独享守卫、组件内守卫

3、全局守卫

第3章：Vue中的ajax

3.1 解决开发环境Ajax跨域问题

3.2 github用户搜索案例

3.2.1 效果

3.2.2 接口地址

3.2.3 案例实现

3.3 slot插槽

3.3.1 作用

3.3.2 分类：默认插槽、具名插槽、作用域插槽

1、`router\index.js`中配置`props`

2、`Message.vue`中传递props

3、`Detail.vue`中使用props

6.7 `<router-link>`的replace属性

3、如何开启`replace`模式