richest_qi的博客

文章目录基本路由的使用模板文件index.html入口文件index.js入口组件App.jspages/Home/index.jsx（Home组件）pages/About/index.jsx（About组件）一般组件和路由组件Header/index.jsx（Header组件）App.js（App组件）新增导航与路由Business/index.jsx（Business组件）Employees/index.jsx（Employees组件）Investors/index.jsx（Investors组件）Me

文章目录基本路由的使用模板文件index.html入口文件index.js入口组件App.jspages/Home/index.jsx（Home组件）pages/About/index.jsx（About组件）模糊匹配与严格匹配模糊匹配严格匹配基本路由的使用本篇的vue项目，代码涉及的主要文件有：模板文件index.html入口文件index.js入口组件App.js路由组件Home：pages/Home/index.jsx路由组件About：pages/About/index.jsx

文章目录基本路由的使用模板文件index.html入口文件index.js入口组件App.jspages/Home/index.jsx（Home组件）pages/About/index.jsx（About组件）Redirect组件的使用基本路由的使用本篇的vue项目，代码涉及的主要文件有：模板文件index.html入口文件index.js入口组件App.js路由组件Home：pages/Home/index.jsx路由组件About：pages/About/index.jsx模板文件

文章目录基本路由的使用模板文件index.html入口文件index.js入口组件App.jspages/Home/index.jsx（Home组件）pages/About/index.jsx（About组件）Switch组件的使用问题描述使用Switch组件基本路由的使用本篇的vue项目，代码涉及的主要文件有：模板文件index.html入口文件index.js入口组件App.js路由组件Home：pages/Home/index.jsx路由组件About：pages/About/ind

文章目录基本路由的使用模板文件index.html入口文件main.js入口组件App.vuerouter/index.js（路由规则）pages/About.vue（About组件）pages/Home.vue（Home组件）嵌套路由的实现router/index.jsHome.vue（Home组件）News.vue（News组件）Message.vue（Message组件）基本路由的使用本篇的vue项目，代码涉及的主要文件有：模板文件index.html入口文件main.js入口组件App

文章目录基本路由的使用模板文件index.html入口文件index.js入口组件App.jspages/Home/index.jsx（Home组件）pages/About/index.jsx（About组件）嵌套路由的实现基本路由的使用本篇的vue项目，代码涉及的主要文件有：模板文件index.html入口文件index.js入口组件App.js路由组件Home：pages/Home/index.jsx路由组件About：pages/About/index.jsx模板文件index.h

文章目录创建react应用初步搭建页面public/index.htmlindex.jsApp.js安装react路由插件：react-router-dom定义路由组件pages/Home/index.jsxpages/About/index.jsx编写路由链接，注册路由index.jsApp.js路由链接改用NavLinkApp.js启动应用，测试效果创建react应用create-react-app react_demo，创建react应用。其中，默认react@18，react-dom@18。n

文章目录新建vue应用初步搭建页面public/index.htmlApp.vue安装vue路由插件：vue-router定义路由组件pages/Home.vuepages/About.vue编写路由链接，指定路由展示位置App.vue注册路由router/index.jsmain.js启动应用，测试效果新建vue应用vue create vue_demo，创建vue应用。其中，vue@2。初步搭建页面主要涉及两处修改：public文件夹下新建文件夹：css，css文件夹下放入文件：boots

文章目录App.vue（App组件）store/index.jsItem.vue（Item组件）编辑todo，代码涉及的主要文件有store/index.jsApp.vue，即App组件components/Item.vue，即Item组件App.vue（App组件）变更部分：添加样式.btn-edit。<template> <div id="app"> <div class="todo-container"> <div

vue组件间有如下通信方式：props

文章目录main.js（入口文件）store/index.jsHeader.vue（Header组件）List.vue（List组件）Item.vue（Item组件）Footer.vue（Footer组件）本篇使用vuex实现todoList案例。代码涉及的主要文件有main.js，即入口文件store/index.jscomponents/Header.vue，即Header组件components/List.vue，即List组件components/Item.vue，即Item组件c

文章目录消息订阅与发布的基本使用App.js（App组件）Search/index.jsx（Search组件）List/index.jsx（List组件）本篇通过消息订阅与发布实现任意组件间通信，来完成github搜索案例。消息订阅与发布的基本使用npm install --save pubsub-js，安装第三方库pubsub-js。import PubSub from "pubsub-js"，引入第三方库PubSub。订阅消息：id = PubSub.subscribe(消息名,callba

文章目录消息订阅与发布的基本使用App.vue（App组件）Search.vue（Search组件）List.vue（List组件）相关链接本篇通过消息订阅与发布实现任意组件间通信，来完成github搜索案例。消息订阅与发布的基本使用npm install --save pubsub-js，安装第三方库pubsub-js。import pubsub from "pubsub-js"，引入第三方库pubsub。订阅消息：id = pubsub.subscribe(消息名,callback)，且ca

文章目录App.vue（App组件）Item.vue（Item组件）相关链接代码更改涉及的文件有，App.vue，即App组件。Item.vue，即Item组件。注意，入口文件main.js已在beforeCreate()生命周期函数中通过Vue.prototype.$bus=this注册了全局事件总线。App.vue（App组件）生命周期函数mounted()中注册监听checkTodo事件，checkTodo事件一旦发生，监听回调this.checkTodo将执行。生命周期函数befo

文章目录App.vue（App组件）Item.vue（Item组件）相关链接代码更改涉及的文件有，App.vue，即App组件。Item.vue，即Item组件。注意，入口文件main.js已在beforeCreate()生命周期函数中通过Vue.prototype.$bus=this注册了全局事件总线。App.vue（App组件）生命周期函数mounted()中注册监听deleteTodo事件，deleteTodo事件一旦发生，监听回调this.deleteTodo将执行。生命周期函数b

文章目录main.js（入口文件）App.vue（App组件）Header.vue（Header组件）相关链接父组件向子组件传递数据，使用props即可。子组件向父组件传递数据，也可以使用props，将props值设置为一个函数即可。子组件向父组件传递数据，还可以使用自定义事件来实现。本篇介绍如何使用全局事件总线来实现子组件向父组件传递数据。另，该方法适用于任意组件间通信，不仅仅限于父子组件间通信。代码更改涉及的文件有：main.js，即入口文件。components/App.vue，即A

文章目录App.vue（App组件）Footer.vue（Footer组件）相关链接代码更改涉及的文件有，App.vue，即App组件。Footer.vue，即Footer组件。注意，入口文件main.js已在beforeCreate()生命周期函数中通过Vue.prototype.$bus=this注册了全局事件总线。App.vue（App组件）生命周期函数mounted()中注册监听clearAllTodoDone（或checkAllTodo）事件，clearAllTodoDone（或

文章目录消息订阅与发布的基本使用App.vue（App组件)List.vue（List组件）Item.vue（Item组件）Footer.vue（Footer组件）相关链接父组件向子组件传递数据，使用props即可。子组件向父组件传递数据，也可以使用props，将props值设置为一个函数即可。子组件向父组件传递数据，还可以使用自定义事件来实现。全局事件总线，可以实现任意组件间通信。消息订阅与发布，也可以实现任意组件间通信。本篇通过消息订阅与发布实现任意组件间通信，来完成todoList案例。

文章目录App.vue（App组件）Search.vue（Search组件）List.vue（List组件）相关链接代码变更涉及的文件有：App.vue，即App组件。components/Search.vue，即Search组件。components/List.vue，即List组件。App.vue（App组件）<template> <div id="app"> <div class="container"> <Searc

文章目录App.vue（App组件）Search.vue（Search组件）List.vue（List组件）相关链接代码变更涉及的文件有：App.vue，即App组件。components/Search.vue，即Search组件。components/List.vue，即List组件。App.vue（App组件）<template> <div id="app"> <Search :saveUsers="saveUsers"/> &l