代码拉取完成，页面将自动刷新
同步操作将从 栀子花开/Vue2-Vue3的学习笔记 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
vue_test项目
npm run serve
npm run build
ref属性
被用来给元素或子组件注册引用信息（id的替代者)
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
使用方式: 打标识:
<h1 ref="xxx">.....</h1>或<School ref="xxx"><School>
获取: this.$refs.xxx
配置项props
功能:让组件接收外部传过来的数据 (1).传递数据:
<Demo name="xxx"/>
(2).接收数据:
//第一种方式（只接收)∶
props: ['name']
//第二种方式（限制类型）:
props:{
name:String
}
//第三种方式(限制类型、限制必要性、指定默认值):
props:{
name:{
type:String,//类型
required:true,//必要性
default:'老王'//默认值
}
}
//备注: props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告,
//若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
mixin(混入)
//功能:可以把多个组件共用的配置提取成一个混入对象
//使用方式:
//第一步定义混合，例如:
{
data(){....},
methods:{....}
}
//第二步使用混入，例如:
//(1).全局混入:Vue.mixin(xxx)
//(2).局部混入: mixins:["xxx"]
插件
//功能:用于增强Vue
//本质:包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
//定义插件:
对象.install = function (vue，options) {
//1.添加全局过滤器
Vue.filter(....)
//2.添加全局指令
Vue.directive(....)
//3.配置全局混入(合)
Vue.mixin(....)
//4.添加实例方法
Vue.prototype.$myMethod = function(){...}
Vue.prototype. $myProperty = xxxx
}
//使用插件：Vue.use()
scoped样式
作用:让样式在局部生效，防止冲突。写法:
<style scoped>
TodoList案例总结
(1).拆分静态组件:组件要按照功能点拆分，命名不要与html元素冲突。
(2).实现动态组件:考虑好数据的存放位置，数据是一个组件在用,还是一些组件在用:
1).一个组件在用:放在组件自身即可。
2).一些组件在用:放在他们共同的父组件上(<span style=" color:red">状态提升</span>)
(3).实现交互:从绑定事件开始。
props适用于: (1).父组件==>子组件通信 (2).子组件==>父组件通信（要求父先给子一个函数)
使用v-model时要切记: v-model绑定的值不能是props传过来的值，因为props是不可以修改的!
props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。
webStorage
存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。
相关API:
备注:
组件的自定义事件
子种组件间通信的方式，适用于:子组件===>父组件
使用场景:A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中)。
绑定自定义事件:
第一种方式，在父组件中:
<Demo @atguigu="test"/>或<Demo v-on:atguigu="test" />
第二种方式，在父组件中:
<Demo ref="demo"/>
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
}
若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
触发自定义事件:this.$emit('atguigu' ,数据)
解绑自定义事件:this.$off('atguigu')
组件上也可以绑定原生DOM事件，需要使用native修饰符。
注意:通过this.$refs.xx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题。
全局事件总线(GldbalEventBus)
一种组件间通信的方式，适用于任意组件间通信。
安装全局事件总线:
new Vue({
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
}
});
使用事件总线:
methods(){
demo(data){......}
}
mounted(){
this.$bus.$on("xxxx",this.demo)
}
提供数据:this.$bus.$emit('xxxx',数据)
最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。
消息订阅与发布(pubsub)
—种组件间通信的方式，适用于任意组件间通信。
使用步骤:
pubsub: npm i pubsub-jsimport pubsub from 'pubsub-js 接收数据:A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
methods(){
demo(data){......}
}
mounted() {
this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息.
}
提供数据:pubsub.publish('xxx',数据)
最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。
nextTick
this.$nextTick(回调函数)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':''},//将请求路径的前缀使用正则表达式去掉(一定要记得)
wc: true, //用于支持websocket
changeOrigin: true //用于控制请求头中的host值
},
'/demo':{
target: 'http://localhost:5001',
pathRewrite: {'^/demo':''},//将请求路径的前缀使用正则表达式去掉(一定要记得)
wc: true, //用于支持websocket
changeOrigin: true //用于控制请求头中的host值
}
}
}
说明: 1.优点:可以配置多个代理，且可以灵活的控制请求是否走代理。 2.缺点:配置略微繁琐，请求资源时必须加前缀。
插槽
理解:数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定 (games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定);
1.基本使用
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>
指定展示位置
<!--路由组件显示标签-->
<router-view></router-view>
2.几个注意点
pages文件夹，一般组件通常存放在components文件夹。3.多级路由(多级路由)
routes:[
{
path:'/about',
component:About
},
{
path:"/home",
component:Home,
children:[//通过children配置子级路由
{
path:'news',//此处一定不要写:/news
component:News
},
{
path:"message",//此处一定不要写:/message
component:Message
}
]
}
]
<router-link to="/home/news" >News</router-link>
4.路由的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>
2.接收参数:
$route.query.id
$route.query.title
编程式路由导航
路由缓存组件
作用:让不展示的路由组件保持挂载，不被销毁。
具体编码:
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
两个新的生命周期钩子
路由守卫
//全局前置路由守卫--->初始化的时候被调用、每次路由切换前被调用
router.beforeEach((to,from,next)=>{
if (to.meta.isAuth) {//判断一下是否需要限权
if (localStorage.getItem("school")!='atguigu') {
next();//放行
}else{
alert("学校名不对没有权限");
}
}else{
next();//放行，不然所有的路由请求都会被拦截
}
});
//全局后置路由守卫--->初始化的时候被调用、每次路由切换前被调用
router.afterEach((to,from)=>{
document.title=to.meta.title || "尚硅谷系统";
});
路由器的两种工作模式
对于一个url来说，什么是hash值?——#及其后面的内容就是hash值。
hash值不会包含在HTTP请求中，即: hash值不会带给服务器。
hash模式:
history模式:
对于一个url来说，什么是hash值?——#及其后面的内容就是hash值。
hash值不会包含在HTTP请求中，即: hash值不会带给服务器。
hash模式:
history模式:
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手