脚手架文件结构:
node_modules
public
favicon.ico:页签图标-
index.html:主页面
src
assets:·存放静态资源
component:存放非路由组件
views|pages:存放路由组件
—App.vue:·汇总所有组件
main.js:·入口文件
gitignore: git版本管制忽略的配置
babel.config.js: babel的配置文件
package.json:·应用包配置文件
README.md:应用描述文件
package-lock.json:包版本控制文件
关于VueComponent:
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写<school/>或<schoolx</school>，Vue解析时会帮我们创建school组件的实例对象
，即vue帮我们执行的:new VueComponent(options)。
3.特别注意:每次调用Vue.extend，返回的都是一个全新的VueComponent!!!!
4.关于this指向:
(1).组件配置中:
data、methods、watch、computed中的函数 它们的this均是【VueComponent实例对象】。
(2).new Vue()配置中:
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。
5.VueComponent的实例对象，以后简称vc（也可称之为:组件实例对象）.
Vue的实例对象，以后简称vm。
ref属性
1.被用来给元素或子组件注册引用信息(id的代替),ref就是用来绑定DOM元素
2.应用在html标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象(vc)
3.使用方式
打标识:ref="xxx"
获取:this.$refs.xxx4
props
备注: props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，
若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
功能:让组件接收外部传过来的数据
(1).传递数据:
<Demo name="xxX"/>
(2).接收数据:
第一种方式（只接收）:
props: [ "name ']
第二种方式(限制类型）:
props:{
name:Sting
}
第三种方式(限制类型、限制必要性、指定默认值):
props:{
name:{
type:String，//类型
required:true,//必要性
default:"老王"//默认值
}
mixin混入
功能:可以把组件共用的配置提取成一个混入对象
使用方式 :
第一步定义混合,例如:
{
data(){....},
methods:{....}
.....
}
第二步使用混入,例如:
1.全局混入:Vue.mixin(xxx)
2.局部混入:mixins:['xxx']
插件
功能:用于增强Vue
本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
scoped样式
作用: 让样式在局部生效,防止冲突
写法:<style scoped>
总结todoList案例
1.组件化编码流程:
1.拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突
2.实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:
1.一个组件再用,放在组件自身即可
2.一些组件在用:放在他们共同的父组件上
3.实现交互:从绑定事件开始
2.props适用于:
1.父组件->子组件 通信
2.子组件->父组件 通信(要求父先给子一个函数)
3.使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的
4.props传过来的若是对象类型的值,修改对象中的属性时vue不会报错,但是不推荐这样做
webStorage
1. 存储内容大小一般支持5MB左右(不同浏览器可能不一样)
2. 浏览器端通过WIndow.sessionStorage和Window.localStorage属性来实现本地存储机制
3. 相关API:
1. xxxxxStorage.setItem('key','value')
该方法接受一个键值对作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值
2. xxxxxStorage.getItem('person')
1. 该方法接受一个键名作为参数,返回键名对应的值
3. xxxxxStorage.removeItem('key')
1. 该方法接受一个键名作为参数,并把键名从储存中删除
4. xxxxxStorage.clear()
1. 该方法会清空储存中的所有数据
4. 备注:
1. sessionstorage储存的内容会随着浏览器窗口的关闭而消失
2. localstorage储存的内容,需要手动清除才会消失
3. xxxxxStorage.getItem('xxx')如果xxx对应的value获取不到,那么getItem的返回值是null
4. JSON.parse(NULL)的结果依然是null
组件的自定义事件
-
一种组件之间通信的方式,适用于子组件–>父组件
-
使用场景:A是父组件,B是子组件,B想传给A数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)
-
绑定自定义事件
- 第一种方式:在父组件中
<Demo @atguigu="text"/>或者<Demo v-on:atguigu="test"> - 第二种方式,在父组件之中:(若想让自定义事件只能触发一次,可以使用once修饰符,或者$once方法)
- 第一种方式:在父组件中
<Demo ref="student"/>
.....
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
}
-
触发自定义事件:
this.$emit('atguigu',数据) -
解绑自定义事件
this.$off('atguigu') -
组件上也可以绑定原生DOM事件,需要使用
native修饰符 -
注意:通过this. r e f s . x x x . refs.xxx. refs.xxx.on(‘atguigu’,回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题
一、$emit(在子组件中使用)
1、this $emit（'自定义事件名',要传送的数据）；
2、触发当前实例上的s，要传递的数据会传给监听器；
二、$on
1、VM.$on('事件名',callback) --------------------callback回调$emit要传送的数据；
2、监听当前实例上自定义时间；
全局事件总线
-
一种组件之间通信的方式,适用于任意组件之间的通信
-
安装全局事件总线:
new Vue(){ ...... beforCreate(){ Vue.prototype.$bus = this //安装全局时间总线,$bus就是当前应用的vm}, ...... } -
使用事件总线:
-
接收数据: A组件想要接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身
methods:{ demo(){......} } ...... mounted(){ this.$bus.$on('xxx',this.demo) } -
提供数据:
this.$bus.$emit('xxx',数据)
-
-
最好在beforeDestroy钩子中,用$off去解绑任意组件之间的通信事件
消息订阅与发布
-
一种组件之间的通信方式,适用于任意组件之间的通信
-
引入:import pubsub from ‘pubsub-js’
-
接收数据,A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身
methods:{ demo(){....} } ...... mounted(){ this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息 } -
提供数据:
pubsub.publish('xxx',数据) -
最好在beforeDestroy钩子中,用
PubSub.unsubscribe(pid)去取消订阅
nextTick
- 语法:this.nextTick(回调函数)
- 作用:在下一次DOM更新结束后执行其指定的回调
- 什么时候用:当改变数据之后,要基于更新后的新DOM进行某些操作的时候,要在nextTick所指定的回调函数中执行
Vue封装的过渡与动画
-
作用:再插入,更新或移除DOM元素时,在合适的时候给元素添加样式类名
-
写法:
-
准备好样式:
- 元素进入的样式
- v-enter: 进入的起点
- v-enter-active:进入过程中
- v-enter-to:进入的终点
- 元素离开的样式
1. v-leave: 离开的起点
2. v-leave-active:离开过程中
3. v-leave-to:离开的终点
- 元素进入的样式
-
使用
<transition>包裹住要过渡的元素,并配置name属性:<transition name="hello" appear> <h1 v-show="isShow">你好啊!</h1> </transition> -
备注:若有多个元素需要过度,则需要使用:,且每个元素都要指定key值
-
vue脚手架
方法一
在vue.config.js中添加如下配置
//开启代理服务器
devServer: {
proxy: 'http://localhost:5000'
}
说明:
1. 优点:配置简单,请求资源时发给前端(8080)即可
2. 缺点不能配置多个代理,不能灵活的控制请求是否走代理
3. 工作方式:若按照上述方式配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)
方法二
编写vue.config.js配置具体代理规则:
devServer: {
proxy: {
'/atguigu': {
target: 'http://localhost:5000',
pathRewrite:{'^/atguigu':''},
// ws: true, //用于支持websocket
// changeOrigin: true //用于控制请求头中的host值
},
'/demo': {
target: 'http://localhost:5001',
pathRewrite:{'^/demo':''},
// ws: true, //用于支持websocket
// changeOrigin: true //用于控制请求头中的host值
}
}
}
说明:
1.优点:可以配置多个代理,且可以灵活的控制请求是否走代理
2. 缺点:配置略微繁琐,请求资源时必须加前缀
插槽
-
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件===>子组件
-
分类: 默认插槽,具名插槽,作用域插槽
-
使用方式:
-
默认插槽
父组件中: <category> <div>html结构1</div> </category> 子组件中: <category> <div> <slot>插槽默认内容</slot> </div> </category> -
具名插槽
父组件中: <category> <template slot="center"> <div>html结构1</div> </template> <template v-slot:footer> <div>html结构2</div> </template> </category> 子组件中: <category> <div> <slot name"center">插槽默认内容</slot> <slot name="footer">插槽默认内容</slot> </div> </category> -
作用域插槽:
-
理解: 数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)
-
具体编码:
-
父组件: <Category title="游戏"> <template scope="{games}"> <ul> <li v-for="(item, index) in games" :key="index">{{ item }}</li> </ul> </template> </Category> / <Category title="游戏"> <template scope="{games}"> <h4 v-for="(item, index) in games" :key="index">{{ item }}</h4> </template> </Category> 子组件: <slot :games="games">我是默认的一些内容</slot> <script> export default { name:'Category', props:['title'], data() { return { games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"], } }, } </script> ```` -
Vuex
1.概念
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KBCT8ymi-1642312360271)(C:\Users\mushroomm\Desktop\图片\Snipaste_2021-10-15_20-08-59.png)]
2.何时使用?
多个组件需要共享数据时
3.搭建vuex环境
-
创建文件: src/store/index.js
//该文件用于创建Vuex中最为核心的store //引入vue import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备action--用于响应组件中的动作 const actions = {} //准备mutations--用于操作数据(state) const mutations = {} //准备state--用于储存数据 const state = {} //创建并暴露store export default new Vuex.Store({ actions, mutations, state, })- 在main.js中创建时传入store配置项
//引入store import store from './store/index' new Vue({ el:"#app", render:h=>h(App), store, beforeCreate(){ //设置全局事件总线(要让this.$bus可以调用$emit和$on) Vue.prototype.$bus = this } })
4.基本使用
-
初始化数据,配置action,配置mutation,操作文件store.js
//该文件用于创建Vuex中最为核心的store //引入vue import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备action--用于响应组件中的动作 const actions = { jia(context,value){ context.commit('JIA',value) }, } //准备mutations--用于操作数据(state) const mutations = { JIA(state,value){ state.sum+=value } } //准备state--用于储存数据 const state = { sum:0//当前的和 } //创建并暴露store export default new Vuex.Store({ actions, mutations, state, }) -
组件中读取vuex中的数据:$store.state.sum,在模板中{{}}可以不写this,因为{{}}可以读取到vm中的所有东西
-
组件中修改vuex中的数据:
$store.dispatch('action中的方法名',数据)或$store.commit('mutation中的方法名',数据)
5.getters的使用
-
概念:当state中的数据需要经过加工后再使用的时候,可以使用getters加工
-
再
store.js中追加getters配置...... //准备getters-用于将state中的数据进行加工 const getters = { bigSum(state){ return state.sum*100 } } //创建并暴露store export default new Vuex.Store({ actions, mutations, state, getters, })- 组件中读取数据:
$store.getters.bigSum
- 组件中读取数据:
6.四个map方法的使用
-
mapState方法:用于帮助我们映射state中的数据为计算属性
computed:{ // 借助mapState生成计算属性,从state中读取数据(对象写法) ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}), // 借助mapState生成计算属性,从state中读取数据(数组写法) ...mapState(['sum','school','subject']), }, -
mapGetters方法:用于帮助我们映射
getters中的数据为计算属性//借助mapGetters生成计算属性,从state中读取数据(对象写法) // ...mapGetters({bigSum:'bigSum'}), //借助mapGetters生成计算属性,从state中读取数据(数组写法) ...mapGetters(['bigSum']), -
mapActions方法:用于帮助我们生成与
actions对话的方法,即: 包含$store.dispatch(xxx)的函数methods:{ //靠mapActions生成,incrementOdd,incrementWait(对象形式) ...mapActions({incrementOdd:'jia',incrementWait:'jiawait'}) //借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(数组写法) ...mapActions(["add3", "jiaWait"]), } -
mapMutations方法: 用于帮助我们生成与
mutations对话的方法,即: 包含$store.commit(xxx)的函数methods:{ //借助mapMutations生成对应的方法,方法中会调用commit方法去联系mutations(对象的写法) // ...mapMutations({add1:'JIA',add2:'JIAN'}), //借助mapMutations生成对应的方法,方法中会调用commit方法去联系mutations(数组的写法) ...mapMutations(["JIA", "JIAN"]), }备注:mapActions与mapMutations使用的时候,若需要传递参数,在模板中绑定事件时传递好参数,否则参数是事件对象(event)
7.模块化+命名空间
- 目的: 让代码更好维护,让多种数据分类更加明确
- 修改
store.js
const countAbout={
namespaced:true,//开启命名空间
state:{x:1},
getters:{
bigSum(state){
return state.sum*10
}
}
......
}
const personAbout={
namespaced:true,//开启命名空间
......
}
//创建并暴露store
export default new Vuex.Store({
modules:{
countAbout,
personAbout
}
})
-
开启命名空间之后,组件中读取state数据
//方式一:自己读取数据 this.$store.state.personAbout.list //方式二:借助mapState读取, ...mapState('countAbout',['x']), -
开启命名空间之后,组件中读取getters数据
//方式一:自己读取数据 this.$store.getters['personAbout/first'] //方式二:借助mapGetters读取, ...mapGetters('countAbout',['bigSum']), -
开启命名空间之后,组件中读取dispatch
//方式一:自己直接dispatch this.$store.dispatch['personAbout/add',参数] //方式二:借助mapActions ...mapActions('countAbout',['add']),//这里想要传参的话,要在调用这个函数的时候 -
开启命名空间之后,组件中调用commit
//方式一:自己直接commit this.$store.commit('personAbout/Add_person',参数) //方式二: ...mapCommit('personAbout',[Add_person])
路由
1. 理解: 一个路由(router)就是一组映射关系(key-value),多个路由需要的路由器(router)进行管理
2. 前端路由: key是路径,value是组件
1.基本使用
-
安装vue-router,命令:
npm i vue-router -
引入vue-router之后应用插件: Vue.use(VueRouter)
-
编写router配置项
//该文件专门创建整个应用的路由器 import VueRouter from 'vue-router' //引入组件 import About from '../components/About' import Home from '../components/Home' //创建并暴露一个路由器 export default new VueRouter({ routes:[ { path:'/about', component:About }, { path:'/home', component:Home } ] })- 实现切换(active-class可配置高亮样式)
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>- 指定展示位置
<router-view></router-view>
2.几个注意点
- 路由组件通常存放在
page文件夹,一般组件通常存放在component文件夹 - 通过切换,'隐藏’了的路由组件,默认是被销毁掉的,需要的时候再去挂载
- 每个组件都有自己的
$route属性,里面储存着自己的路由信息 - 整个应用只有一个router,可以通过组件的
$router属性获取到
3.多级路由
-
配置路由规则,使用chlidren配置项:
routes:[ { path:'/about', component:About }, { path:'/home', component:Home, children:[ { path:'message', component:Message }, { path:'news', component:News } ] }, ] -
跳转(要写完整的路径):
<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
4.路由的query参数
-
传递参数:
<!-- 跳转路由并携带参数,to的字符串写法 --> <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{message.title}}</router-link> --> <!-- 跳转路由并携带query参数,to的对象写法 --> <router-link :to="{ path:'/home/message/detail', query:{ id:message.id, title:message.title } }"> {{message.title}} </router-link>2.接收参数:
$route.query.id $route.query.title
命名路由
1.作用: 可以简化路由的跳转
2.如何使用
-
给路由命名:
path:'/home', component:Home, children:[ { path:'message', component:Message, children:[ { name:'xiangqing', path:'detail', component:Detail } ] }, { path:'news', component:News } ] -
简化跳转
<router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link> <router-link class="list-group-item" active-class="active" to="/home">Home</router-link> <router-link :to="{ name:'xiangqing', query:{ id:message.id, title:message.title } }"> {{message.title}} </router-link>
6.路由的params参数
-
配置路由,声明接收params参数
path:'/home', component:Home, children:[ { path:'message', component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', component:Detail } ] }, { path:'news', component:News } ] -
传递参数
<!-- 跳转路由并携带params参数,to的字符串写法 --> <!-- <router-link :to="`/home/message/detail/${message.id}/${message.title}`">{{message.title}}</router-link> --> <!-- 跳转路由并携带query参数,to的对象写法 --> <router-link :to="{ name:'xiangqing', params:{ id:message.id, title:message.title } }"> {{message.title}} </router-link>注意:路由携带params参数的时候,若使用to的对象写法,则不能使用path配置项,必须使用name配置!
-
接收参数
$route.params.id $
-
7.路由的props配置
作用:让路由组件更加方便的接收到参数
{
name:'xiangqing',
path:'detail/', component:Detail,
//props的第一种写法,值为对象,该对象的所有key-value都会以props的形式传给Detail组件.
// props:{a:1,b:'hello'}
//props的第二种写法,值为布尔值.若布尔值为真,就会把该路由组件收到的所有params参数,以props的形式传给Detail组件
// props:true
//props的第三种写法,值为函数,
// props({query:{id,title}}){//连续结构赋值的写法
// return{id:id,title:title}
// }
props($route){
return{ id:$route.query.id,
title:$route.query.title
}
}
}
]
},
8.<router-link>的replace属性
-
作用: 控制路由跳转时操作浏览器历史纪录的模式
-
浏览器历史记录有两种写入方式: 分别为
push和replace,push是追加历史记录,replace是替换当前记录,路由跳转的时候默认为push -
如何开启
repalce模式,<router-link replce.....>News</router-link>
9.编程时路由导航
-
作用:不借助
<router-link>实现路由跳转,让路由跳转更加灵活 -
具体编码:
//$router的两个API( pushShow(m){ this.$router.push({ name:'xiangqing', query:{ id:m.id, title:m.title } }) }, replaceShow(m){ this.$router.replace({ name:'xiangqing', query:{ id:m.id, title:m.title } }) } forward(){ this.$router.forward() }, back(){ this.$router.back() }, go(){ this.$router.go(2) }10.缓存路由组件
-
作用:让不展示的路由组件保持挂载,不被销毁
-
具体编码
<keep-alive include="News"> <router-view></router-view> </keep-alive>
11.两个新的生命周期钩子
- 作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态
- 具体名字:
actived路由组件被激活时触发deactived路由组件失活时触发
12.路由守卫
- 作用:对路由进行权限控制
- 分类:全局守卫,独享守卫,组件内守卫
- 全局守卫:
//全局前置路由守卫---初始化的时候被调用,每次路由切换之前被调用 router.beforeEach((to,from,next)=>{ console.log('前置路由守卫') if(to.meta.isAuth)//判断是否需要鉴权 { if(localStorage.getItem('school')==='atguigu')//权限控制的具体规则 next() else alert('学校名称不正确,无权查看!') } else next()//放行 }) //全局后置路由守卫---初始化的时候被调用,每次路由切换之后被调用 router.afterEach((to,from)=>{ console.log('后置路由守卫') document.title = to.meta.title || '硅谷系统'//修改网页的title })- 独享路由守卫
beforeEnter:(to,from,next)=>{ if(localStorage.getItem('school')==="atguigu") next() else alert('学校名称不正确,无权查看!') }- 组件内守卫
//进入守卫,通过路由规则,进入该组件时被调用 beforeRouteEnter (to, from, next) {} //离开守卫,通过路由规则,离开该组件时被调用 beforeRouteLeave (to, from, next) {}13.路由器的两种工作模式
- 对于一个
url来说,什么是hash值?----#及其后面的内容就是hashzhi - hash值不会包含在HTTP请求之中,即:hash值不会带给服务器
- hash模式:
- 地址中永远带着#号,不美观
- 若以后将地址通过第三方手机app分享,若app校验严格,则地址也会被标记为不合法
- 兼容性较好
- history模式:
- 地址干净,美观
- 兼容性和hash模式相比略差
- 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题
-
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
