From 3d6a3d83337abb83269a244c9293a5fe2c0e20ef Mon Sep 17 00:00:00 2001 From: yb <1728066681@qq.com> Date: Wed, 16 Jun 2021 17:37:25 +0800 Subject: [PATCH 1/6] =?UTF-8?q?Vue=20Router=E8=AF=BE=E5=A0=82=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...2021.06.15\357\274\210Vue \357\274\211.md" | 0 ...er\350\265\267\346\255\245\357\274\211.md" | 53 +++++++++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue \357\274\211.md" create mode 100644 "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue \357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue \357\274\211.md" new file mode 100644 index 0000000..e69de29 diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" new file mode 100644 index 0000000..203c71e --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" @@ -0,0 +1,53 @@ +## Vue Router起步 + ++ 单页面应用(SPA)的核心之一是:更新视图而不重新请求页面; + ++ vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式。 + +1. hash模式 + +url hash 就是类似于： +``` +http://www.xxx.com/#/login +``` + +监听hashchange +``` +function matchAndUpdate () { + // todo 匹配 hash 做 dom 更新操作 +} + +window.addEventListener('hashchange', matchAndUpdate) +``` + +2. history 模式 + +``` +function matchAndUpdate () { + // todo 匹配路径 做 dom 更新操作 +} + +window.addEventListener('popstate', matchAndUpdate) +``` +### 动态路由匹配 + ++ vue-router 的路由路径中使用过 dynamic segment 来达到这个效果 +``` +const User = { + template: '
User
' +} + +const router = new VueRouter({ + routes: [ + // 动态路径参数 以冒号开头 + { path: '/user/:id', component: User } + ] +}) +``` +像 /user/foo 和 /user/bar 都将映射到相同的路由。 + +``` +const User = { + template: '
User {{ $route.params.id }}
' +} +``` -- Gitee From 0da8a1aa978963e62f7fc152a1e64a5f2844fb82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E8=89=BA=E7=BC=A4?= <1728066681@qq.com> Date: Thu, 17 Jun 2021 21:14:41 +0800 Subject: [PATCH 2/6] =?UTF-8?q?Vue=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...2021.06.15\357\274\210Vue \357\274\211.md" | 0 ...e\350\267\257\347\224\261 \357\274\211.md" | 30 +++++++++++++++ ...er\350\265\267\346\255\245\357\274\211.md" | 38 +++++++++++++++++++ 3 files changed, 68 insertions(+) delete mode 100644 "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue \357\274\211.md" create mode 100644 "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue\350\267\257\347\224\261 \357\274\211.md" diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue \357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue \357\274\211.md" deleted file mode 100644 index e69de29..0000000 diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue\350\267\257\347\224\261 \357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue\350\267\257\347\224\261 \357\274\211.md" new file mode 100644 index 0000000..e1665c8 --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue\350\267\257\347\224\261 \357\274\211.md" @@ -0,0 +1,30 @@ +## Vue 路由 + +1. yarn 安装 vue-router + ++ 安装命令 +``` +yarn add vue-router +``` + +2. mian.js 引用并注册路由 +``` +// 引用路由 +import VueRouter from "vue-router" +// 引用vue文件 +import Show from "./components/Show" + +// 路由配置 +let router = new VueRouter({ + mode:"history", + routes:[ + { + path:"/show", + component:Show + } + ] +}) + +// 注册路由 +Vue.use(VueRouter) +``` diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" index 203c71e..1159ce1 100644 --- "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" @@ -51,3 +51,41 @@ const User = { template: '
User {{ $route.params.id }}
' } ``` +1. 前端渲染 +``` +// vue组件页面配置 + +``` + +2. 后端打印 +``` + +``` + +### 404 Not Found Rount + +添加path地址为*的路由 +``` +// 路由配置 +let router = new VueRouter({ + mode:"history", + routes:[ + { + path:"*", // *为通配符 + component:Vue文件地址 + } + ] +}) +``` -- Gitee From 83d5a54e3ddcb416209b1e3e492171d80be5bbce Mon Sep 17 00:00:00 2001 From: yb <1728066681@qq.com> Date: Fri, 18 Jun 2021 11:45:21 +0800 Subject: [PATCH 3/6] =?UTF-8?q?Vue=E8=AF=BE=E5=A0=82=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...17\345\257\274\350\210\252\357\274\211.md" | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 "Vue - 2021.06.16\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" diff --git "a/Vue - 2021.06.16\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" "b/Vue - 2021.06.16\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" new file mode 100644 index 0000000..3ce897a --- /dev/null +++ "b/Vue - 2021.06.16\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" @@ -0,0 +1,22 @@ +# 编程式导航 + +1. Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push +``` +// 字符串 +this.$router.push('home') +``` +``` +// 对像 +router.push({ path: 'home' }) +``` +``` +// 命名路由 +router.push({ name: 'user', params: { userId: '123' } }) +``` +``` +// 带 query 参数, 最终结果 /register?plan=private +router.push({ path: 'register', query: { plan: 'private' } }) +``` + +2. router.replace(location) +注意：跟 router.push 很像，唯一不同是，不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。 \ No newline at end of file -- Gitee From 56ddce55e6f361b7785bd1d18aeff33370e90df6 Mon Sep 17 00:00:00 2001 From: yb <1728066681@qq.com> Date: Sat, 19 Jun 2021 17:45:47 +0800 Subject: [PATCH 4/6] vue --- ...27\350\267\257\347\224\261\357\274\211.md" | 92 +++++++++++++++++++ ...17\345\257\274\350\210\252\357\274\211.md" | 0 2 files changed, 92 insertions(+) create mode 100644 "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md" rename "Vue - 2021.06.16\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" => "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" (100%) diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md" new file mode 100644 index 0000000..f32f096 --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md" @@ -0,0 +1,92 @@ +# 命名路由 + +优点：当地址过长时，使用一个名称来标识一个路由会显得尤其方便 + +1. 在routers配置路由的时候给路由取个名 +``` +App.Vue + + +``` +``` +main.js +let router = new VueRouter({ + mode:'history', + routes:[ + { + path:'/user/:id', + name:'user', + component:User, + } + ] +}) +``` + +# 命名视图 + +1. 给不同的router-view定义不同的名字，通过名字进行对应组件的渲染 + +2. 由/所在的页面，也就是app.vue，我们第一个router-view不命名就使用默认的，其它两个router-view添加name属性命名 + +``` +import VueRouter from 'vue-router' + +import User from './components/User' +import Login from './components/Login' +// import Reg from './components/Reg' + + +Vue.config.productionTip = false + +Vue.use(VueRouter) + +let router = new VueRouter({ + routes: [ + { + path: '/user', + name:'/', + components: { + user:User, + login:Login, + } + } + ] +}) +``` +``` + //空的 + //登录页 +``` + +# 重定向和别名 + +## 重定向 + +1 . 重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b： + +``` +const router = new VueRouter({ + routes: [ + { path: '/a', redirect: '/b' } + ] +}) +``` + +2. 重定向的目标也可以是一个命名的路由： + +``` +const router = new VueRouter({ + routes: [ + { path: '/a', redirect: { name: 'foo' }} + ] +}) +``` diff --git "a/Vue - 2021.06.16\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" similarity index 100% rename from "Vue - 2021.06.16\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" rename to "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" -- Gitee From 1975c4c8fd2136e129744506f387239b84e0315b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E8=89=BA=E7=BC=A4?= <1728066681@qq.com> Date: Mon, 21 Jun 2021 18:58:42 +0800 Subject: [PATCH 5/6] =?UTF-8?q?update=20=E6=A2=81=E8=89=BA=E7=BC=A4/Vue=20?= =?UTF-8?q?-=202021.06.11=EF=BC=88Vue=20CLI=20=E9=83=A8=E7=BD=B2=E5=88=B0?= =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=99=A8=EF=BC=89.md.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\210\260\346\234\215\345\212\241\345\231\250\357\274\211.md" | 2 ++ 1 file changed, 2 insertions(+) diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.11\357\274\210Vue CLI \351\203\250\347\275\262\345\210\260\346\234\215\345\212\241\345\231\250\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.11\357\274\210Vue CLI \351\203\250\347\275\262\345\210\260\346\234\215\345\212\241\345\231\250\357\274\211.md" index 26eb9ff..285ce58 100644 --- "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.11\357\274\210Vue CLI \351\203\250\347\275\262\345\210\260\346\234\215\345\212\241\345\231\250\357\274\211.md" +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.11\357\274\210Vue CLI \351\203\250\347\275\262\345\210\260\346\234\215\345\212\241\345\231\250\357\274\211.md" @@ -32,6 +32,8 @@ vue create myVueProject // 你的要创建Vue项目 cd myVueProject // 进入你的项目文件夹 +yarn add vue-router // 安装vue-router + yarn serve // 启动你的vue项目 yarn build // 打包你的项目，文件会保存到dist文件夹里面 -- Gitee From d093653497964f50e2b4336d9000c0de055bc9b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E8=89=BA=E7=BC=A4?= <1728066681@qq.com> Date: Mon, 21 Jun 2021 21:43:09 +0800 Subject: [PATCH 6/6] =?UTF-8?q?vue=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...1.06.09\357\274\210Vue Lci\357\274\211.md" | 56 ++++++++++++++++++- ...27\350\267\257\347\224\261\357\274\211.md" | 0 ...14\345\210\253\345\220\215\357\274\211.md" | 0 3 files changed, 55 insertions(+), 1 deletion(-) rename "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" => "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue \345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215\343\200\201\345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md" (100%) rename "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md" => "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.19\357\274\210Vue \345\221\275\345\220\215\350\247\206\345\233\276\343\200\201\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215\357\274\211.md" (100%) diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.09\357\274\210Vue Lci\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.09\357\274\210Vue Lci\357\274\211.md" index b29e1d8..50ace09 100644 --- "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.09\357\274\210Vue Lci\357\274\211.md" +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.09\357\274\210Vue Lci\357\274\211.md" @@ -13,4 +13,58 @@ ``` // host 文件位置 C:\Windows\System32\drivers\etc -``` \ No newline at end of file +``` + +1. 父传子有哪些方式 +``` +用props传值 +``` +2. 子传父有哪些方式 +``` +通过$emit触发自定义事件 +``` +3. 如何让 CSS 只在当前组件中起作用 +``` +利用scoped来限制 +``` +4. keep-alive 的作用是什么 +``` +​保留组件状态，避免组件重新渲染 +``` +5. vue中如何获取DOM +``` +​ $refs属性 +``` +6. 请说出 Vue CLI 项目中src目录每个文件夹的文件的用法​assets：放静态资源 +``` +​ components：放组件 + +​ router：定义路由相关配置 + +​ view：视图 + +​ app.vue：主组件 + +​ main.js：入口文件 +``` +7. 单页面应用的优缺点​ 优点： +``` +前后端分离开发，提高开发效率 + +业务场景切换时，局部更新结构 + +用户体验好，更加接近本地应用 +``` +8. 缺点： +``` +不利于SEO 首次加载速度较慢 页面复杂度较高 router和route的区别 + +router为VueRouter的实例，常用router.push方法来导航到不同URL + +$route为当前router跳转对象，可以获取name、path、params等属性 + +怎么定义 vue-router 的动态路由? 怎么获取传过来的值？ 将路径中的某个部分使用':'标记，即可设置为动态路由 + +通过$route.params来获取值 +``` +9. vue-router有几种模式，分别是什么 两种模式，分别为hash模式和history模式 \ No newline at end of file diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue \345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215\343\200\201\345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md" similarity index 100% rename from "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" rename to "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue \345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215\343\200\201\345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md" diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.19\357\274\210Vue \345\221\275\345\220\215\350\247\206\345\233\276\343\200\201\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215\357\274\211.md" similarity index 100% rename from "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md" rename to "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.19\357\274\210Vue \345\221\275\345\220\215\350\247\206\345\233\276\343\200\201\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215\357\274\211.md" -- Gitee