diff --git "a/48 \347\216\213\346\226\207\350\216\211/20230417 \347\273\204\344\273\266\346\263\250\345\206\214.md" "b/48 \347\216\213\346\226\207\350\216\211/20230417 \347\273\204\344\273\266\346\263\250\345\206\214.md" new file mode 100644 index 0000000000000000000000000000000000000000..83872f7ccdb05788e60bc8d8b0b99bda909f6cf0 --- /dev/null +++ "b/48 \347\216\213\346\226\207\350\216\211/20230417 \347\273\204\344\273\266\346\263\250\345\206\214.md" @@ -0,0 +1,99 @@ +# 组件注册 + +详细的网站: https://cn.vuejs.org/guide/components/registration.html + +# +## 一.全局注册: component() 方法 + ++ 在vue项目中的main.js文件中使用app.component() 方法 + ++ app.component() 方法可以被链式调用 + +```js +// main.js +import { createApp } from 'vue' +import './style.css' +import App from './App.vue' + +//导入文件 +import f1 from './components/f1.vue' +import f2 from './components/f2.vue' + +const app=createApp(App) + +//注册被导入的文件,链式调用 +app.component('f1',f1).component('f2',f2) +app.mount('#app') + +``` +```vue + + + + + + + +``` +![1](./img/230417/1.png) + + +# +## 二.局部注册 + ++ 局部注册的组件在后代组件中并不可用。 + ++ 在选项式中,需要使用**components** 选项注册 +```vue + + + + +``` + ++ 在组合式中,导入的组件可以直接在模板中使用,无需注册 +```vue + + + + +``` + +# +## 三.全局和局部对比 + + +### 全局注册的问题: + ++ 1. 全局注册,但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件,即使它并没有被实际使用,它仍然会出现在打包后的 JS 文件中。 + ++ 2. 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时,不太容易定位子组件的实现。和使用过多的全局变量一样,这可能会影响应用长期的可维护性。 + +### 局部 + ++ 1. 局部注册的组件需要在使用它的父组件中显式导入,并且只能在该父组件中使用。 + ++ 2. 它的优点是使组件之间的依赖关系更加明确,并且对 tree-shaking 更加友好。 \ No newline at end of file diff --git "a/48 \347\216\213\346\226\207\350\216\211/20230420 \346\267\261\345\205\245.md" "b/48 \347\216\213\346\226\207\350\216\211/20230420 \346\267\261\345\205\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..075d4b0dec31bef9ea57db69c89ffadc19474acb --- /dev/null +++ "b/48 \347\216\213\346\226\207\350\216\211/20230420 \346\267\261\345\205\245.md" @@ -0,0 +1,156 @@ +# 深入Props + +详细的地址: https://cn.vuejs.org/guide/components/props.html + +# +## 一.定义 Props 选项 + ++ 选项式的定义: + + + 没有使用 <**script setup**> 的组件方式为**选项式**,运用的是**选项式的API** + + + 在选项式中,prop 可以使用 **props 选项**来声明 +```vue + +``` + ++ 组合式的定义: + + + 使用 <**script setup**> 的单文件组件为**组合式**,运用的是**组合式的API** + + + 在组合式中,props 可以使用 **defineProps() 宏**来声明 +```vue + +``` + ++ 传递给 defineProps() 的参数和提供给 props 选项的值是相同的,两种声明方式背后其实使用的都是 **prop 选项**。 + +# +## 二.细节 + +### 命名格式 + ++ Prop 的命名格式使用 **camelCase 形式(小驼峰形式)** + ++ 组件名 的命名格式使用 **PascalCase 形式**,因为这提高了模板的可读性,能帮助我们区分 Vue 组件和原生 HTML 元素。 + +### prop 的绑定 + ++ 直接使用 prop 的名字来进行静态形式的绑定 +```html + +``` + ++ 使用 **v-bind** 或**缩写 :** 来进行动态形式的绑定:当使用一个 JavaScript 表达式而不是一个字符串需要用到 +```html + +``` + +### 传递不同类型 + ++ Number 类型:使用 **v-bind** 动态的绑定 + ++ Boolean 类型(布尔): + + + 不传值时,会隐性为 true ; + ```html + + ``` + + + 传值时,需要使用 **v-bind** 进行动态的绑定 + ++ Array 类型(数组):使用 **v-bind** 动态的绑定 + ++ Object 类型(属性):使用 **v-bind** 动态的绑定 +```vue + + + + +``` + +### Prop 校验 + +详细的校验信息 : https://cn.vuejs.org/guide/components/props.html#prop-validation + +```vue + + + + + + + +``` + +## 三.其他细节 + ++ 所有 prop 默认都是可选的,除非声明了 required: true + ++ Boolean 类型的未传递 prop 将被转换为 false。这可以通过为它设置 default 来更改 + ++ 如果声明了 default 值,那么在 prop 的值被解析为 undefined 时,无论 prop 是未被传递还是显式指明的 undefined,都会改为 default 值。 \ No newline at end of file diff --git "a/48 \347\216\213\346\226\207\350\216\211/20230421 \346\267\261\345\205\245\344\272\213\344\273\266.md" "b/48 \347\216\213\346\226\207\350\216\211/20230421 \346\267\261\345\205\245\344\272\213\344\273\266.md" new file mode 100644 index 0000000000000000000000000000000000000000..f880068e256b0ac4414d963194bf0d106e5ad240 --- /dev/null +++ "b/48 \347\216\213\346\226\207\350\216\211/20230421 \346\267\261\345\205\245\344\272\213\344\273\266.md" @@ -0,0 +1,169 @@ +# 深入事件 + +详细信息的网站: https://cn.vuejs.org/guide/components/events.html + +# +## 一.定义触发的事件 + ++ 选项式的定义 + + + 通过 **emits 选项**来定义它要触发的事件 +```vue + + +``` + ++ 组合式的定义 + + + 通过 **defineEmits() 宏**来声明它要触发的事件 + +```vue + + +``` + +# +## 二.事件的监听和校验 + ++ 通过 **v-on (缩写为 @)** 来监听事件 + ++ 通过返回值为 `true` 还是为 `false` 来判断验证是否通过 + +### 组合式 +```vue + + + + + +``` + +### 选项式 +```vue + +``` + +### 父组件接收数据: App.vue +```vue + + + +``` +![1](./img/230421/1.png) +![2](./img/230421/2.png) +![3](./img/230421/3.png) +![4](./img/230421/4.png) \ No newline at end of file diff --git "a/48 \347\216\213\346\226\207\350\216\211/20230423 \350\267\257\347\224\261\345\205\245\351\227\250.md" "b/48 \347\216\213\346\226\207\350\216\211/20230423 \350\267\257\347\224\261\345\205\245\351\227\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..ebe4b57409e3623438f8a2592659d46ea865eff3 --- /dev/null +++ "b/48 \347\216\213\346\226\207\350\216\211/20230423 \350\267\257\347\224\261\345\205\245\351\227\250.md" @@ -0,0 +1,117 @@ +# 路由入门 + +详细的官方网站: https://router.vuejs.org/zh/guide/ + +# +## 一.安装 vue-router + +### npm +``` + npm install vue-router +``` + +### yarn +``` + yarn add vue-router +``` + +# +## 二.创建路由的配置文件:JavaScript +```js +//1.引用路由组件 +import Home from './components/Home.vue' +import About from './components/About.vue' +import Student from './components/Student.vue' + +//2.定义路由 +//每个路由都映射一个组件 +const routes=[ + {path:'/',component:Home}, + {path:'/about',component:About}, + {path:'/student',component:Student} +] + +//3.创建路由实例并传递 `routes` 配置 +//createRouter():需要引入 +const router=createRouter({ + + //4.提供 history 模式 + // history:createWebHashHistory(),//路由会带#号 + history:createWebHistory(),//使用时路由不带#号,但是会有点小问题,后面解决 + + routes//`routes:routes` 的缩写 +}) + + +//5.创建并挂载实例 + +// createApp(App).use(router).mount('#app') + +const app=createApp(App) + +//让整个项目都支持路由 +app.use(router) +app.mount('#app') +``` + +# +## 三.RouterLink 和 RouterView + +### RouterLink : 入口 + ++ RouterLink 实现路由之间的跳转 + ++ RouterLink 对应 html 中的a 标签,但是与a 标签不同的是,跳转的时候并**不会刷新页面** + ++ RouterLink映射的结果为其对应组件的整个页面内容 + +```html + + 前往 +
+ 返回 +``` + +### RouterView : 出口 + ++ RouterView 根据路由显示对应的组件,当你的路由path 与访问的地址相符时,会将指定的组件替换 + ++ RouterView 相当于RouterLink的承载页面,用于展示RouterLink 的的内容 + +```html + +``` + +# +## 四.显示页面有按钮 + ++ 在 App.vue 中导入首页 +```vue + + + +``` +![1](./img/230423/1.png) +![3](./img/230423/3.png) + +# +## 五.显示页面无按钮存在 + ++ 在 App.vue 中设置出口 RouterView +```vue + + + +``` +![1](./img/230423/1.png) +![2](./img/230423/2.png) \ No newline at end of file diff --git "a/48 \347\216\213\346\226\207\350\216\211/20230424 \345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" "b/48 \347\216\213\346\226\207\350\216\211/20230424 \345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" new file mode 100644 index 0000000000000000000000000000000000000000..f210af1f3fed5a744bed1a312d5baea3a630ada2 --- /dev/null +++ "b/48 \347\216\213\346\226\207\350\216\211/20230424 \345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" @@ -0,0 +1,166 @@ +# 动态路由匹配 + +详细的官方网站: https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html + +# +## 一.设置路由的匹配 + ++ 进入路由配置文件,在定义的路由中添加相关的路径信息 + +### 带参路由的动态匹配 + ++ 路径参数 用**冒号 :** 表示。当一个路由被匹配时,它的 params 的值将在每个组件中以 **this.$route.params** 的形式暴露出来。 + ++ **component** 获取要跳转页面的位置 + +```js +//2.定义路由 +const routes = [ + { path: '/student/:id', component: StudentId }, +] +``` + +### 错误路由的匹配 + ++ 在括号之间使用了自定义正则表达式,并将 **pathMatch** 参数标记为可选可重复。 + ++ 在 to 中输入 **/:pathMatch(.*)** 匹配错误的路径信息 + ++ + **component** 获取要跳转页面的位置 + +```js +//2.定义路由 +const routes = [ + //将匹配不到的报错页面,跳转为此页面 + { path: '/:pathMatch(.*)', component: NotFound } +] +``` + +# +## 二.获取路由信息 + ++ **vue2**路由是通过this.$route和this.$router来控制的 + ++ **vue3**的路由中 + + + **useRoute** 相当于以前的 **this.$route**, + + + **useRouter** 相当于 **this.$router** + +### $route + ++ **route** 是一个跳转的路由对象,每一个路由都会有一个route对象 + ++ **route** 是一个**局部的对象**,可以获取对应的name,path,params,query等 + + + **$route.path** :获取当前路由对象的路径,会被解析为绝对路径,如 “/index/” 。 + + + **$route.params** :获取包含路由中的动态片段和全匹配片段的键值对 + + + **$route.query** :获取 **? 号传参**包含路由中查询参数的键值对。例如,对于 /index?id=1 ,会得到 $route.query.id == 1。 +```js + { path: '/student/:id', component: StudentId }, +``` +```html +

这里是id为{{ $route.params.id}} 的页面

+``` + + +### userRoute + ++ 相当于 $route + ++ **push方法** 是useRouter()才有的, 用**useRoute()实例化**的对象是没这方法的 +```js +//实例化 +const route=userRoute() +``` + +### $router + ++ **router** 是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象 + ++ **router** 是一个**全局的对象**,包含了所有的路由包含了许多关键的对象和属性。例如history对象 + + + **$router.push({path:’/path’})** : 本质是向history栈中添加一个路由,在我们看来是 切换路由,但本质是在添加一个history记录 + + + **$router.replace({path:’/path’})** : 替换路由,没有历史记录 + +### userRouter + ++ 相当于 $router + ++ 通过useRouter来手动控制路由变化 + ++ push方法是useRouter()才有的 + +```js +//实例化 +const router=userRouter() +``` + +# +## 三.响应路由变化 :watch + ++ 使用 **watch 侦听器** 获取路由的变化 + +### 选项式中 +```vue + +``` + +### 组合式 +```vue + +``` +![1](./img/230424/1.png) +![2](./img/230424/2.png) +![3](./img/230424/3.png) \ No newline at end of file diff --git "a/48 \347\216\213\346\226\207\350\216\211/20230425 childern\345\265\214\345\245\227\350\267\257\347\224\261.md" "b/48 \347\216\213\346\226\207\350\216\211/20230425 childern\345\265\214\345\245\227\350\267\257\347\224\261.md" new file mode 100644 index 0000000000000000000000000000000000000000..e7f574f0618c51471ea6a308f78860b6e10fd269 --- /dev/null +++ "b/48 \347\216\213\346\226\207\350\216\211/20230425 childern\345\265\214\345\245\227\350\267\257\347\224\261.md" @@ -0,0 +1,36 @@ +# 嵌套路由:children + +详细的官方网站 : https://router.vuejs.org/zh/guide/essentials/nested-routes.html + +# +## 使用方式 + ++ 在自己的路由配置文件里面创建对应的路由 + ++ 子路由需要在 父路由 对应的参数中使用 **children** 配置; + ++ 切记,在children 中,子路由的路径不要加 / ; +```js + +//定义路由 +const routes=[ + {path:'/',component:Home}, + { + path:'/about', + component:About, + //嵌套路由 + children:[ + { + //当 /about/:id 是匹配成功 + //(\\d+)自能为数字 + path:':id(\\d+)', + // AboutId 将被渲染到 About 的 RouterView 内部 + component:AboutId + } + ] + }, + {path:'/student',component:Student}, + {path:'/student/:id(\\d+)',component:StudentId}, + {path:'/:pathMatch*',component:NotFund} +] +``` \ No newline at end of file diff --git "a/48 \347\216\213\346\226\207\350\216\211/20230427 \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252.md" "b/48 \347\216\213\346\226\207\350\216\211/20230427 \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252.md" new file mode 100644 index 0000000000000000000000000000000000000000..e7f574f0618c51471ea6a308f78860b6e10fd269 --- /dev/null +++ "b/48 \347\216\213\346\226\207\350\216\211/20230427 \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252.md" @@ -0,0 +1,36 @@ +# 嵌套路由:children + +详细的官方网站 : https://router.vuejs.org/zh/guide/essentials/nested-routes.html + +# +## 使用方式 + ++ 在自己的路由配置文件里面创建对应的路由 + ++ 子路由需要在 父路由 对应的参数中使用 **children** 配置; + ++ 切记,在children 中,子路由的路径不要加 / ; +```js + +//定义路由 +const routes=[ + {path:'/',component:Home}, + { + path:'/about', + component:About, + //嵌套路由 + children:[ + { + //当 /about/:id 是匹配成功 + //(\\d+)自能为数字 + path:':id(\\d+)', + // AboutId 将被渲染到 About 的 RouterView 内部 + component:AboutId + } + ] + }, + {path:'/student',component:Student}, + {path:'/student/:id(\\d+)',component:StudentId}, + {path:'/:pathMatch*',component:NotFund} +] +``` \ No newline at end of file diff --git "a/48 \347\216\213\346\226\207\350\216\211/20230428 element-plus\347\232\204\344\275\277\347\224\250.md" "b/48 \347\216\213\346\226\207\350\216\211/20230428 element-plus\347\232\204\344\275\277\347\224\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..81bc2c2093844d2028f371de9ab746c88d885ab7 --- /dev/null +++ "b/48 \347\216\213\346\226\207\350\216\211/20230428 element-plus\347\232\204\344\275\277\347\224\250.md" @@ -0,0 +1,32 @@ +# element-plus 的使用 + +官方文档: https://element-plus.gitee.io/zh-CN/ + +# +## 一.安装 element-plus 包管理器 +```js +// yarn + yarn add element-plus + +// npm + npm install element-plus --save + +// pnpm + pnpm install element-plus +``` + +# +## 二.全局引入配置 + ++ 在 main.js 文件中配置 +```js +//导入 element-pius 和相关文件 +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' + +const app=createApp(app) +//全局配置 +app.use(ElementPlus) + +app.mount('#app') +``` \ No newline at end of file