肥林の仓库

命名路由 作用:用于简化路由的跳转(简化path和url的编写) 使用流程: 1.首先给路由添加name属性(给指定路由添加一个名字)// 一级路由routes:[ { //设置管理路由:Home path:'/home', component: Home, // 二级路由(children属性) children:[//通过children配置子级路由 { // 使用二级路由过后的path不需要再加上"/" path:'message', component: Message, // 使用三级路由 children:[ { // 给这个三级路由命 ...

Vue路由-多级(嵌套)路由 多级路由的使用其实与一级路由是十分相似的,但是有以下几个注意点: 在一级路由下(父级路由下)添加一个受其管理的二级路由需要用到children属性如下: router-index.js// 创建并向外暴露路由器export default new VueRouter({    // 一级路由    routes:[        {               //设置管理路由:About            path:'/about',            component: About        },        {               //设置管理路由:Home            path:'/home',            component: Home,                        // 二级路由(children属性)            children:[//通过children配置子级路由            ...

Vue路由（route）[一级路由]的基本使用环境搭建 由于2022年2月起发布了Vue3.0过后,我们每一次全局安装的vue-router就是默认的4.0版本,但是使用Vue2来搭建项目就必须使用vue-router3.0版本,所以这是就看我们自己所需要搭建的项目是使用什么Vue版本了,使用Vue2开发项目就安装vue-router3版本,使用Vue3开发项目就使用vue-router4版本 安装vue-router 3版本$npm i vue-router@3 安装vue-router 4版本$npm i vue-router 搭建vue-router开发环境 官网推荐格式:首先在项目的src文件夹当中,创建一个名为 router 的文件夹,里面新建一个index.js文件用于创建创建整个页面的路由器 代码如下： Index.js //引入VueRouterimport VueRouter from 'vue-router'//引入Luyou 组件import About from '../components/About'impor ...

Vue-理解路由（route） 在真正学习Vue里面的路由(route)之前我们不妨看看现实生活中的路由,我们日常上网都会用到路由器, 图解如下: 日常生活中的路由器是用来上网的,电脑设备通过网线接口链接到路由器上就能上网了,这里的电脑设备就相当于value,网线接口就相当于key,两者一一对应其实就是一种对应关系,由此可见映射到Vue里面,所谓路由其实也就是一种对应关系(路由[router]),而集中管理这些对应关系的就是路由器(router). 我们也可以将路由简单的理解为“指向”,在网页开发当中,当我们点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 什么是路由? 1.一个路由就是一组映射关系（key - value） 2.key为路径,value可能是function（一般是后端） 或2.co ...

Vuex的模块化和命名空间（namespace） 目的：让代码更好维护，让多种数据分类更加明确。 我们可以在项目的src文件夹里面的store文件夹中新建每个组件对应的vuex.js文件夹 基本使用： 1.修改store.js，将每一个组件对应的module分开，每一个module都有对应的state，mutations，actions和getter，并且给每一个module都开启namespace（命名空间） //方式一：自己直接读取 this.$store.state.personAbout.list //方式二：借助mapState读取： ...mapState('countAbout',['sum','school','subject']), 2.开启命名空间后，组件中读取state数据： //方式一：自己直接读取 this.$store.state.personAbout.list //方式二：借助mapState读取： ...mapState('countAbout',[& ...

gatter(相当于computed) 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。(需求逻辑复杂斌且要求复用) 使用流程 1.在store.js中追加getters配置 2.组件中读取数据：$store.getters.bigSum 代码解析:(给求和案例添加一个sum*10并显示,在getters里面实现) index.js(store)代码片段//准备state——用于存储数据const state = {    sum:0 //当前的和}// 配置vuex中的配置向gatter(相当于computed)// 用于将state中的数据进行加工const getters = {    // 这里接收一个参数就是state    tenSum(state){        // 这就显示出与计算属性非常的相像,都是需要返回值返回数据的        return state.sum*10    }}//创建并暴露storeexport default new Vuex.Store(&# ...

vuex的基本使用1.环境搭建 由于2022年2月起发布了Vue3.0过后,我们每一次全局安装的vuex就是默认的4.0版本,但是使用Vue2来搭建项目就必须使用vuex3.0版本,所以这是就看我们自己所需要搭建的项目是使用什么Vue版本了,使用Vue2开发项目就安装vuex3版本,使用Vue3开发项目就使用vuex4版本 安装vuex 3版本$npm i vuex@3 安装vuex 4版本$npm i vuex 搭建vuex开发环境 官网推荐格式:首先在项目的src文件夹当中,创建一个名为 store 的文件夹,里面新建一个index.js文件用于创建全局仓库(store) 代码如下: Index.js// 创建vuex中最核心的部分--store(只要我们看见store文件夹就知道是vuex)// 引入vueimport Vue from 'vue'// 引入vueximport Vuex from 'vuex'// 创建actionsconst actions = {//写业务逻辑}// 创建mutationscon ...

什么是Vuex?（共享数据） 1.概念：专门在Vue 中实现集中式状态（数据）管理的一个Vue 插件，对vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。(就相当于一个集中的数据管理仓库,任何组件都可以读/写仓库中的胡数据) Github 地址 图解： 假设我们A组件当中有一个x属性（数据），其他的组件也想用(读/写,改),,那么此时A组件当中的x属性(数据)就有点共享单车的意思了,每个人都想用,每个人都能用(多组件共享数据)1.使用全局事件总线来实现:(编码很麻烦且复杂,代码复用率不高)2.使用vuex来实现: Vuex不属于任何一个组件,它的本身是一个插件,需要用到Vue.use()来所调用,在共享单车(多组件当中都想用的属性[数据])的场景当中就相当于共享单车的停放区域,每个人(组件)都能调用(读/写,改). 什么时候去使用这个vuex呢?(共享状态[数据]的时候) 1.多个组件依赖于同一状态 2.来自不同组件的行为需要变更同一状态 Vuex的工作原理: 由上图，我们可以看出 ...

Vue中的插槽 我们已经了解到父组件是可以通过 props 将数据传给子组件的，它可以是任何类型的 JavaScript 值。但是 模板内容（html片段）呢？在某些情况下，我们可能希望将模板片段传递给子组件，并让子组件在其自己的模板中渲染该片段,由此引出 插槽。 slot（插槽）是 vue 为 组件的封装者 提供的能力。允许开发者在封装组件时，把 不确定的、希望由用户指定的部分 定义为插槽（即父组件向子组件传递带数据的标签，当一个子组件有不确定的结构时，就需要用到插槽了[slot]）。可以把插槽认为是组件封装期间，为用户预留的内容的占位符。 注意:插槽内容是在父组件中编译后,在传递给子组件的. 作用： 作用：一般用于让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。 图解： 插槽的分类：1.默认插槽（简单） 通常来说我们组件中内的标签是无法放任何外部组件内容的，如果想子组件中的内容, 由外部的组件来决定我们可以使用默认插槽,在组件内声明 slot 标签 代码解析： App父组件（省略 ...

Vue中配置代理服务器解决跨域问题首先复习一下同源策略和跨域请求 同源策略规定发送网络请求必须有三个一致,协议名,主机名和端口号=>例如:http//:localhost:8081 协议名为http,主机名为localhost,端口号为8081,那么你就只能通过ajax联系协议名为http,主机名为localhost,端口号为8081的服务器 解决跨域有以下几种方法: 1.cors:这是真正意义上的解决跨域,它通过给服务器设置一些跨域响应头的方法来解决跨域,响应返回数据的同时也会返回这些特殊的响应头,但是真正开发当中很少使用,这会造成所有人都能获取到你的数据,这也是后端的事 2.Jsonp:通过借助script标签里面的src属性来引入外部资源的时候不受同源策略限制的这样一个特点办到的,但是jsonp巧妙归巧妙,真正开发用得微乎其微,因为它是需要前端和后端一起努力才能做到的事,最致命的是它只能解决get请求的跨域问题 3.代理服务器(开发中用的最多):代理服务器就相当于我们日常生活中的”房屋中介”,它最厉害的地方在于,它所处的位置跟我们是一样的(端 ...