vue学习

学习VUE/hello_vue3/src/App.vue

@@ -1,39 +1,75 @@
 <template>
-  <main>
-    <Person a="haha" />
-  </main>
+  <div class="app">
+    <h2 class="title">vue路由测试</h2>
+    <!--    导航区  -->
+    <div class="navigate">
+      <!--    路由的第一种写法-->
+      <RouterLink to="/" active-class="bg">首页</RouterLink>
+<!--    命名路由 -->
+      <RouterLink :to="{name: 'news'}" active-class="bg">新闻</RouterLink>
+<!--    路由的第二种写法-->
+      <RouterLink :to='{path: "/about"}' active-class="bg">关于</RouterLink>
+    </div>
+    <!--    展示区  -->
+    <div class="main-content">
+      <RouterView></RouterView>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import Person from './components/Person.vue'
+import {RouterView, RouterLink} from 'vue-router'
 
 </script>
 
 <style scoped>
-header {
-  line-height: 1.5;
+/* App */
+.title {
+  text-align: center;
+  word-spacing: 5px;
+  margin: 30px 0;
+  height: 70px;
+  line-height: 70px;
+  background-image: linear-gradient(45deg, gray, white);
+  border-radius: 10px;
+  box-shadow: 0 0 2px;
+  font-size: 30px;
 }
 
-.logo {
+.navigate {
+  display: flex;
+  justify-content: space-around;
+  margin: 0 100px;
+}
+
+.navigate a {
   display: block;
-  margin: 0 auto 2rem;
+  text-align: center;
+  width: 90px;
+  height: 40px;
+  line-height: 40px;
+  border-radius: 10px;
+  background-color: gray;
+  text-decoration: none;
+  color: white;
+  font-size: 18px;
+  letter-spacing: 5px;
 }
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
+.navigate a.bg {
+  background-color: #64967E;
+  color: #ffc268;
+  font-weight: 900;
+  text-shadow: 0 0 1px black;
+  font-family: 微软雅黑;
+}
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+.main-content {
+  margin: 0 auto;
+  margin-top: 30px;
+  border-radius: 10px;
+  width: 90%;
+  height: 400px;
+  border: 1px solid;
 }
 </style>

学习VUE/hello_vue3/src/components/Person.vue

@@ -1,26 +1,15 @@
 <template>
   <div class="person">
+    <h2>当前求和：{{ num }}</h2>
     <img v-for="(dog, index) in dogList" :src="dog" :key="index">
     <button @click="changeImg">点击换图</button>
+    <button @click="changeNum">点击求和</button>
   </div>
 </template>
 
 <script setup lang="ts">
-import {ref, reactive} from 'vue'
-import axios from "axios";
-let dogList = reactive([
-    'https://images.dog.ceo/breeds/spaniel-irish/n02102973_2902.jpg'
-])
-
-async function changeImg() {
-  try{
-    let res = await axios.get("https://dog.ceo/api/breeds/image/random")
-    dogList.push(res.data.message)
-  } catch (e) {
-    alert(e)
-  }
-}
-
+import { dogList, changeImg } from '@/hooks/useDog'
+import { num, changeNum } from '@/hooks/useSum'
 </script>
 
 

学习VUE/hello_vue3/src/hooks/useDog.ts

@@ -0,0 +1,15 @@
+import { reactive } from 'vue'
+import axios from 'axios'
+
+export const dogList = reactive([
+    'https://images.dog.ceo/breeds/spaniel-irish/n02102973_2902.jpg'
+])
+
+export async function changeImg() {
+    try {
+        const res = await axios.get("https://dog.ceo/api/breeds/image/random")
+        dogList.push(res.data.message)
+    } catch (e) {
+        alert(e)
+    }
+}

学习VUE/hello_vue3/src/hooks/useSum.ts

@@ -0,0 +1,7 @@
+import { ref } from 'vue'
+
+export const num = ref(0)
+
+export function changeNum() {
+    num.value += 1
+}

学习VUE/hello_vue3/src/main.ts

@@ -1,6 +1,12 @@
-import './assets/main.css'
-
+// 引入 createApp 用于创建应用
 import { createApp } from 'vue'
+// 引入APP根组件
 import App from './App.vue'
-
-createApp(App).mount('#app')
+// 引入路由器
+import router from "./router";
+//创建一个app
+const app = createApp(App)
+//使用路由器
+app.use(router)
+//挂载整个应用到app容器中
+app.mount('#app')

学习VUE/hello_vue3/src/pages/About.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="about">
+    <h2>大家好，欢迎来到尚硅谷直播间</h2>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.about {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: rgb(85, 84, 84);
+  font-size: 18px;
+}
+</style>

学习VUE/hello_vue3/src/pages/Details.vue

@@ -0,0 +1,25 @@
+<template>
+  <ul class="news-list">
+    <li>编号：{{ query.id }}</li>
+    <li>标题：{{ query.id }}</li>
+    <li>内容：{{ query.id }}</li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { toRefs } from 'vue'
+let route = useRoute()
+let {query} = toRefs(route)
+</script>
+
+<style scoped>
+.news-list {
+  list-style: none;
+  padding-left: 20px;
+}
+
+.news-list>li {
+  line-height: 30px;
+}
+</style>

学习VUE/hello_vue3/src/pages/Home.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="home">
+    <img src="http://www.atguigu.com/images/index_new/logo.png" alt="">
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+onMounted(() =>{
+  setTimeout(()=>{
+    //编程式路由导航
+    router.push('/about')
+  }, 3000)
+})
+</script>
+
+<style scoped>
+.home {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+</style>

学习VUE/hello_vue3/src/pages/News.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="news">
+    <ul>
+      <li v-for="g in newList">
+        <RouterLink :to="{ name: 'news-details', query: { id: g.id } }">{{ g.name }}</RouterLink>
+      </li>
+    </ul>
+<!--    展示区-->
+    <div class="news-content">
+      <RouterView></RouterView>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {RouterView, RouterLink} from 'vue-router'
+import {reactive, } from 'vue'
+
+const newList = reactive([
+  {id:'00001', name: '测试测试测试测试', datetime: 1000},
+  {id:'00002', name: '测试测试测试测试', datetime: 1000},
+  {id:'00003', name: '测试测试测试测试', datetime: 1000},
+  {id:'00004', name: '测试测试测试测试', datetime: 1000},
+  {id:'00005', name: '测试测试测试测试', datetime: 1000},
+  {id:'00006', name: '测试测试测试测试', datetime: 1000}
+])
+</script>
+
+<style scoped>
+/* 新闻 */
+.news {
+  padding: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.news ul {
+  margin-top: 30px;
+  /*list-style: none;*/
+  padding-left: 10px;
+}
+
+.news ul li::marker {
+  color: red; /* 将点的颜色设置为红色 */
+}
+
+.news li > a {
+  font-size: 18px;
+  line-height: 40px;
+  text-decoration: none;
+  color: #64967E;
+  text-shadow: 0 0 1px rgb(0, 84, 0);
+}
+
+.news-content {
+  width: 70%;
+  height: 90%;
+  border: 1px solid;
+  margin-top: 20px;
+  border-radius: 10px;
+}
+</style>

学习VUE/hello_vue3/src/router/index.ts

@@ -0,0 +1,38 @@
+import {createRouter, createWebHistory} from 'vue-router'
+
+import Home from '@/pages/Home.vue'
+import News from '@/pages/News.vue'
+import About from '@/pages/About.vue'
+import Details from '@/pages/Details.vue'
+
+//创建路由器
+const router = createRouter({
+    history: createWebHistory(), //路由器的工作模式
+    routes: [
+        {
+            name: 'home',
+            path: '/',
+            component: Home
+        },
+        {
+            name: 'news',
+            path: '/news',
+            component: News,
+            children: [
+                {
+                    name: 'news-details',
+                    path: 'details', // 注意：子路由的 path 不需要以 "/" 开头
+                    component: Details
+                }
+            ]
+        },
+        {
+            name: 'about',
+            path: '/about',
+            component: About
+        },
+    ]
+})
+
+// 暴露出去 router
+export default router

学习VUE/hello_vue3/笔记/将组建中了逻辑模块化hooks-useDog.ts

@@ -0,0 +1,15 @@
+import { reactive } from 'vue'
+import axios from 'axios'
+
+export const dogList = reactive([
+    'https://images.dog.ceo/breeds/spaniel-irish/n02102973_2902.jpg'
+])
+
+export async function changeImg() {
+    try {
+        const res = await axios.get("https://dog.ceo/api/breeds/image/random")
+        dogList.push(res.data.message)
+    } catch (e) {
+        alert(e)
+    }
+}

学习VUE/hello_vue3/笔记/将组建中了逻辑模块化hooks-useSum.ts

@@ -0,0 +1,7 @@
+import { ref } from 'vue'
+
+export const num = ref(0)
+
+export function changeNum() {
+    num.value += 1
+}

学习VUE/hello_vue3/笔记/将组建中了逻辑模块化组建页面.vue

@@ -0,0 +1,30 @@
+<template>
+  <main>
+    <Person />
+  </main>
+</template>
+
+<script setup lang="ts">
+import Person from './components/Person.vue'
+
+</script>
+
+<style scoped>
+header {
+  line-height: 1.5;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+}
+</style>

学习VUE/hello_vue3/笔记/编程式路由导航.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="home">
+    <img src="http://www.atguigu.com/images/index_new/logo.png" alt="">
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+onMounted(() =>{
+  setTimeout(()=>{
+    //编程式路由导航
+    router.push('/about')
+  }, 3000)
+})
+</script>
+
+<style scoped>
+.home {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+</style>

学习VUE/hello_vue3/笔记/路由_query参数.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="news">
+    <ul>
+      <li v-for="g in newList">
+        <RouterLink :to="{ name: 'news-details', query: { id: g.id } }">{{ g.name }}</RouterLink>
+      </li>
+    </ul>
+    <!--    展示区-->
+    <div class="news-content">
+      <RouterView></RouterView>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {RouterView, RouterLink} from 'vue-router'
+import {reactive, } from 'vue'
+
+const newList = reactive([
+  {id:'00001', name: '测试测试测试测试', datetime: 1000},
+  {id:'00002', name: '测试测试测试测试', datetime: 1000},
+  {id:'00003', name: '测试测试测试测试', datetime: 1000},
+  {id:'00004', name: '测试测试测试测试', datetime: 1000},
+  {id:'00005', name: '测试测试测试测试', datetime: 1000},
+  {id:'00006', name: '测试测试测试测试', datetime: 1000}
+])
+</script>
+
+<style scoped>
+/* 新闻 */
+.news {
+  padding: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.news ul {
+  margin-top: 30px;
+  /*list-style: none;*/
+  padding-left: 10px;
+}
+
+.news ul li::marker {
+  color: red; /* 将点的颜色设置为红色 */
+}
+
+.news li > a {
+  font-size: 18px;
+  line-height: 40px;
+  text-decoration: none;
+  color: #64967E;
+  text-shadow: 0 0 1px rgb(0, 84, 0);
+}
+
+.news-content {
+  width: 70%;
+  height: 90%;
+  border: 1px solid;
+  margin-top: 20px;
+  border-radius: 10px;
+}
+</style>