前言
- 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" }说明：
- 优点：配置简单，请求资源时直接发给前端即可
- 缺点：不能配置多个代理，不能灵活的控制请求是否走代理
- 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）
-
方法二：
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> -
作用域插槽
父组件中：
- {{g}}
<Category> <template slot-scope="scopeData"> <!-- 生成的是h4标题 --> <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4> </template> </Category>子组件中：
<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 = false
Vue.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', //注意此处一定不要写 ： /news component: 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=“{
name:‘hello’,
query:{
id:666,
title:‘你好’
}
}”跳转
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
