前端入门之VUE--ajax、vuex、router，最后的前端总结

前言

VUE是前端用的最多的框架；
这篇文章是本人大一上学习前端的笔记；
欢迎点赞 + 收藏 + 关注，本人将会持续更新。
本人不是学前端的，这个是大一的时候上学的和做的笔记，那个时候学的也蒙，故这里对前端做一个总结：

前端入门一之HTML知识讲解
前端入门一之CSS知识详解
前端入门一之JS最基础、最基础语法
前端入门一之JS对象、字符串对象、数组对象、Data()对象等
前端入门一之DOM、获取元素、DOM核心、事件高级、操作元素、事件基础、节点操作
前端入门一之BOM、window对象常见事件、定时器、JS执行机制、location对象、navigatior对象、history对象
前端入门一之ES6–面向对象、够着函数和原型、继承、ES5新增方法、函数进阶、严格模式、高阶函数、闭包
前端入门一之ES6–递归、浅拷贝与深拷贝、正则表达式、es6、解构赋值、箭头函数、剩余参数、String、Set
前端入门之VUE–基础与核心
前端入门之VUE–vue组件化编程
前端入门之VUE–vue脚手架编程

文章目录

- - 4、Vue中的Ajax
  - - - 4.1、Vue脚手架配置代理
    - 4.2、vue-resource
    - 4.3、slot插槽
  - 5.Vuex插件
  - - 5.1、理解vuex
    - - 5.1.1、Vuex是什么
      - 5.1.2、什么时候用vue
    - 5.2搭载Vuex环境
    - - 5.2.1、使用Vuex编写
    - 5.3、getters配置项
    - 5.4、四种方法
    - 5.5、模块化 + 命名空间
  - 6.Vue Router路由管理器
  - - 6.1、相关理解
    - 6.2、基本路由
    - 6.3、注意事项
    - 6.4、多级路由
    - 6.5、query()
    - 6.6、命名路由
    - 6.7、路由的params参数
    - 6.8、props配置
    - 6.9、路由跳转replace()

4、Vue中的Ajax

4.1、Vue脚手架配置代理

下载axios库：npm install axios

vue脚手架配置代理服务器：

方法一：在vue.config.js中添加如下配置
```
devServer: {proxy: "http://localhost:5000"
}
```
说明：
1. 优点：配置简单，请求资源时直接发给前端即可
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二：

devServer: {proxy: {'/api1': { // 匹配所有以 '/api1'开头的请求路径target: 'http://localhost:5000',// 代理目标的基础路径changeOrigin: true,pathRewrite: {'^/api1': ''}},'/api2': { // 匹配所有以 '/api2'开头的请求路径target: 'http://localhost:5001',// 代理目标的基础路径changeOrigin: true,pathRewrite: {'^/api2': ''}}}
}// changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
// changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080

优点：可以配置多个代理，且可以灵活的控制请求是否走代理

缺点：配置略微繁琐，请求资源时必须加前缀

4.2、vue-resource

下载 vue-resource库：npm i vue-resource

总结：

vue项目常用的两个Ajax库：

axios：通用的Ajax请求库，官方推荐，效率高
vue-resource：vue插件库，vue 1.x使用广泛，官方已不维护

4.3、slot插槽

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

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

使用方法：

默认插槽

父组件中：<Category><div>html结构1</div></Category>
子组件中：<template><div><slot>插槽默认内容</slot></div></template>

具名插槽

父组件中：<Category><template slot="center"><div>html 1</div></template><template v-solt:footer><div>html 2</div></template></Category>
子组件中：<template><solt name="center">默认卡槽内容</solt><solt name="footer">卡槽默认内容</solt></template>

作用域插槽

父组件中：<Category><template scope="scopeData"><!-- 生成的是ul列表 --><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template></Category><Category><template slot-scope="scopeData"><!-- 生成的是h4标题 --><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template></Category>
子组件中：<template><div><slot :games="games"></slot></div></template><script>export default {name:'Category',props:['title'],//数据在子组件自身data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽']}},}</script>

5.Vuex插件

5.1、理解vuex

5.1.1、Vuex是什么

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

在这里插入图片描述

5.1.2、什么时候用vue

多个组件依赖同一个状态
来自不同组件的行为需要变更同一状态

5.2搭载Vuex环境

下载Vuex：npm i vuex
创建src/store/index.js：

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)//准备action对象响应组件中用户的动作、处理业务逻辑
const active ={}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}//创建并暴露store
export default new Vuex.Store({actions,mutations,state
})

在src/main.js中创建 vm 时传入store配置项：

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store'Vue.config.productionTip = falseVue.use(Vuex)new Vue({el:"#app",render: h => h(App),store
})

5.2.1、使用Vuex编写

src/components/Count.vue:

<template><div><h1>当前求和为：{{$store.state.sum}}</h1><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>export default {name: 'Count',data() {return {n: 1,}},methods: {increment() {this.$store.commit('ADD',this.n)},decrement() {this.$store.commit('SUBTRACT',this.n)},increamOdd() {this.$store.dispatch('addOdd',this.n)},incrementWait()  {this.$store.dispatch('addWait',this.n)}}}
</script>

src/store/index.js:

//引入vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)//准备一个action对象
const active = {addOdd(context,value) {console.log("actions中的addOdd被调用了")if(context.state.sum%2){context.commit('ADD',value)}},addWait(context,value) {console.log("actions中addWait被调用了")setTimeout(() => {context.commit('ADD',value)},500)}
},
//准备mutations对象——修改state中的数据
const mutations = {ADD(state,value) {state.sum += value},SUBTRACT(state,value) {state.sum -= value
}
},
//准备state对象——保存具体的数据
const state = {sum: 0
}//创建并且暴露store
export default new Vuex.Store({actions,mutations,state
})

总结：

Vuex的基本使用：

1.初始化数据state，配置actions、mutations，操作文件store.js

//引入Vue核心库
import vue from 'vue'
//引入VUex
import vuex from 'vuex'
//引入Vuex
Vue.use(Vuex)const action = {//响应式添加动作jia(context,value) {context.commit('JIA',value)},
}const mutations = {//执行加jia(state,value) {state.sum += value}
}const state = {sum:0
}//创建并暴露store
export default Vuex.store({actions,mutations,state,
})

组件中读取vuex中的数据：$store.state.sum
组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

5.3、getters配置项

总结：

getters配置项的使用：

概念：当state中的数据需要经过加工后再使用时，可以使用getters加工
在store.js中追加getters配置

...
const getters = {bigSum(state){return state.sum * 10}
}//创建并暴露store
export default new Vuex.Store({...getters
})

3.组件中读取数据：$store.getters.bigSum

5.4、四种方法

mapState方法：用于帮助我们映射state中的数据

computed: {//借助mapState生成计算属性：sum、school、subject（对象写法）...mapState({sum:'sum',school:'school',subject:'subject'}),//借助mapState生成计算属性：sum、school、subject（数组写法）...mapState(['sum','school','subject']),
},

mapGetters方法：用于帮助我们映射getters中的数据

computed: {//借助mapGetters生成计算属性：bigSum（对象写法）...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性：bigSum（数组写法）...mapGetters(['bigSum'])
},

mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{//靠mapActions生成：incrementOdd、incrementWait（对象形式）...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})//靠mapActions生成：incrementOdd、incrementWait（数组形式）...mapActions(['jiaOdd','jiaWait'])
}

mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods:{//靠mapActions生成：increment、decrement（对象形式）...mapMutations({increment:'JIA',decrement:'JIAN'}),//靠mapMutations生成：JIA、JIAN（对象形式）...mapMutations(['JIA','JIAN']),
}

5.5、模块化 + 命名空间

目的：让代码更好维护，让多种数据分类更加明确

修改store.js：

const countAbout = {namespace: true,  //开启命名空间state: {x:1},mutation: {...},actions: {...},getters: {bigSum(state) {return state.sum * 10}}
}const personAbout = {namespace: true,state: {...},mutations: {...},actions: {...}
}const store = new Vuex.store({modules: {countAbout,personAboutx
}
})

开启命名空间，组件中读取state数据

//1.直接读取
this.$store.personAbout.list
//2.借助mapState读取
...mapState('countAbout',['sum','school','subject']),

开启命名空间后，组件中读取getters数据:

//1.自己直接读取
this.$store.getter['personAbout/firstPersonName']
//2.借助mapgetters读取
...mapGetters('sountAbount',['bigSum'])

开启命名空间后，组件中调用dispatch：

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后，组件中调用commit：

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

6.Vue Router路由管理器

6.1、相关理解

vue 的一个插件库，专门用来实现SPA 应用
- 整个页面只有一个完整的页面
- 点击页面的导航链接不会刷新页面，只会局部更新

6.2、基本路由

安装vue-router,命令:npm i vue-router
应用插件Vue.use(VueRouter)

编写router配置项：

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]
})//暴露router
export default router

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

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

指定展示位：

src/router/index.js:

//该文件专门用于创建整个路由
import VueRouter from "vue-router"
//引入组件
import Home from ''
import About from ''//创建并且暴露一个路由
export default new VueRouter({routes: [{path: '/about'component: About},{path: '/home'component: Home}]
})

src/main.js:

import Vue from 'vue'
import App from  './App.vue'
import VueRouter from 'vue-router'
import router from './router'Vue.use(VueRouter)new Vue({el:'#root',render: h => h(App)router
})

src/App.vue:

<template><div><div class="row"><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2></div></div></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!-- 原始html中我们使用a标签实现页面跳转 --><!-- <a class="list-group-item active" href="./about.html">About</a><a class="list-group-item" href="./home.html">Home</a> --><!-- Vue中借助router-link标签实现路由的切换 --><router-link class="list-group-item" active-class="active" to="/about"> 							About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!-- 指定组件的呈现位置 --><router-view></router-view></div></div></div></div></div>
</template><script>export default {name:'App',}
</script>

src/components/Home.vue:

<template><h2>我是Home组件的内容</h2>
</template><script>export default {name:'Home'}
</script>

src/components/About.vue:

<template><h2>我是About组件的内容</h2>
</template><script>export default {name:'About'}
</script>

6.3、注意事项

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹

6.4、多级路由

配置路由规则，使用children配置项：

routes: [{path: '/about',component: About,},{path: '/home'component: Home,children: [{path: 'news',  //注意此处一定不要写 ： /newscomponent: News},{path: 'message',component: Message}]}
]

跳转（要写完整的路径）：News

6.5、query()

传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link><!-- 跳转并携带query参数，to的对象写法 -->
<router-link :to="{path:'/home/message/detail',query:{id:666,title:'你好'}
}">跳转</router-link>

接受参数

$route.query.id
$route.query.title

src/router.index.js:

//引入路由
import VueRouter from "vue-router"
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//创建一个并且暴露一个路由器
export default VueRouter({routes: [{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News},{path:'message',component:Message,children:[{path:'detail',component:Detail}]}
]
})

src/pages/Detail.vue:

<template><ul><li>消息编号：{{$route.query.id}}</li><li>消息标题：{{$route.query.title}}</li></ul>
</template><script>export default {name:'Detail'}
</script>

6.6、命名路由

作用：简化路由的跳转

使用：

给路由命名：

{path: '/demo',component: Test,children: [{path: 'text',component: Text,children: [{name: 'hello'  //命名path: 'welcome',component: Hello}]}
]
}

简化跳转：

<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link><!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link><!--简化写法配合传递参数 -->
<router-link :to="{name:'hello',query:{id:666,title:'你好'}}"
>跳转</router-link>

6.7、路由的params参数

配置路由，声明接收params参数

{path:'/home',component:Home,children:[{path:'news',component:News},{component:Message,children:[{name:'xiangqing',path:'detail/:id/:title', //使用占位符声明接收params参数component:Detail}]}]
}

传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link><!-- 跳转并携带params参数，to的对象写法 -->
<router-link :to="{name:'xiangqing',params:{id:666,title:'你好'}}"
>跳转</router-link>

接收参数

$route.params.id
$route.params.title

6.8、props配置

作用：让路由组件方便收到参数

{name:'xiangqing',path:'detail/:id',component:Detail,//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件// props:{a:900}//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件props(route){return {id:$route.query.id,title:$route.query.title}}
}

6.9、路由跳转replace()

作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式：push和replace，其中push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push方式
开启replace模式：<router-link replace …>News