vue学习

学习VUE/hello_vue3/src/App.vue

@@ -1,75 +1,16 @@
 <template>
-  <div class="app">
+  <div>
-    <h2 class="title">vue路由测试</h2>
+    <Count/>
-    <!--    导航区  -->
+    <br>
-    <div class="navigate">
+    <LoveTalk/>
-      <!--    路由的第一种写法-->
-      <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 {RouterView, RouterLink} from 'vue-router'
+import Count from '@/components/Count.vue'
-
+import LoveTalk from '@/components/LoveTalk.vue'
 </script>
 
 <style scoped>
-/* 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;
-}
 
-.navigate {
-  display: flex;
-  justify-content: space-around;
-  margin: 0 100px;
-}
-
-.navigate a {
-  display: block;
-  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;
-}
-
-.navigate a.bg {
-  background-color: #64967E;
-  color: #ffc268;
-  font-weight: 900;
-  text-shadow: 0 0 1px black;
-  font-family: 微软雅黑;
-}
-
-.main-content {
-  margin: 0 auto;
-  margin-top: 30px;
-  border-radius: 10px;
-  width: 90%;
-  height: 400px;
-  border: 1px solid;
-}
 </style>

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="count">
+    <h2>当前求和:{{ sum }}</h2>
+    <select v-model.number="n">
+      <option value="1">1</option>
+      <option value="2">2</option>
+      <option value="3">3</option>
+    </select>
+    <button @click="add">加</button>
+    <button @click="minus">减</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+let sum = ref(1)
+let n = ref(1)
+
+function add(){
+  sum.value += n.value
+}
+function minus(){
+  sum.value -= n.value
+}
+</script>
+
+<style scoped>
+.count {
+  background: #ffc268;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+button {
+  margin: 10px;
+}
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <div class="talk">
+    <button @click="getTitle">获取一句土味情话</button>
+    <ul>
+      <li v-for="item in talkList" :key="item.id">{{ item.title }}</li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {reactive, ref} from 'vue'
+import axios from "axios";
+import { v4 as uuidv4 } from 'uuid'
+
+let talkList = reactive([
+  {id: 'dasfada001', title: '111ue3入门到实战，最新版vue3+TypeScript前端开发教程'},
+  {id: 'dasfada002', title: '333ue3入门到实战，最新版vue3+TypeScript前端开发教程'},
+  {id: 'dasfada003', title: '222ue3入门到实战，最新版vue3+TypeScript前端开发教程'}
+])
+
+
+async function getTitle(){
+  let res = await axios.get("https://api.uomg.com/api/rand.qinghua?format=json")
+  let content = res.data.content
+  talkList.unshift({id: uuidv4(), title: content})
+}
+
+</script>
+
+<style scoped>
+.talk {
+  background: #64967E;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+</style>

学习VUE/hello_vue3/src/main.ts

@@ -4,9 +4,15 @@ import { createApp } from 'vue'
 import App from './App.vue'
 // 引入路由器
 import router from "./router";
+// 第一步：引入pinia
+import {createPinia} from 'pinia'
+// 第二步：创建pinia
+const pinia = createPinia()
 //创建一个app
 const app = createApp(App)
 //使用路由器
 app.use(router)
+// 第三步：安装pinia
+app.use(pinia)
 //挂载整个应用到app容器中
 app.mount('#app')

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

@@ -2,7 +2,7 @@
   <div class="news">
     <ul>
       <li v-for="g in newList">
-        <RouterLink :to="{ name: 'news-details', query: { id: g.id } }">{{ g.name }}</RouterLink>
+        <button @click="showNewsDetail(g)">查看详情</button><RouterLink :to="{ name: 'news-details', query: { id: g.id } }">{{ g.name }}</RouterLink>
       </li>
     </ul>
 <!--    展示区-->
@@ -13,8 +13,8 @@
 </template>
 
 <script setup lang="ts">
-import {RouterView, RouterLink} from 'vue-router'
+import {RouterView, RouterLink, useRouter} from 'vue-router'
-import {reactive, } from 'vue'
+import {reactive} from 'vue'
 
 const newList = reactive([
   {id:'00001', name: '测试测试测试测试', datetime: 1000},
@@ -24,6 +24,13 @@ const newList = reactive([
   {id:'00005', name: '测试测试测试测试', datetime: 1000},
   {id:'00006', name: '测试测试测试测试', datetime: 1000}
 ])
+
+const router = useRouter()
+
+function showNewsDetail(g){
+  router.replace({ name: 'news-details', query: { id: g.id } })
+}
+
 </script>
 
 <style scoped>

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

@@ -31,6 +31,10 @@ const router = createRouter({
             path: '/about',
             component: About
         },
+        {
+            path: '/news',
+            redirect: '/about', // 重定向
+        }
     ]
 })
 

学习VUE/hello_vue3/笔记/路由app写法.vue

@@ -0,0 +1,75 @@
+<template>
+  <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 {RouterView, RouterLink} from 'vue-router'
+
+</script>
+
+<style scoped>
+/* 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;
+}
+
+.navigate {
+  display: flex;
+  justify-content: space-around;
+  margin: 0 100px;
+}
+
+.navigate a {
+  display: block;
+  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;
+}
+
+.navigate a.bg {
+  background-color: #64967E;
+  color: #ffc268;
+  font-weight: 900;
+  text-shadow: 0 0 1px black;
+  font-family: 微软雅黑;
+}
+
+.main-content {
+  margin: 0 auto;
+  margin-top: 30px;
+  border-radius: 10px;
+  width: 90%;
+  height: 400px;
+  border: 1px solid;
+}
+</style>

学习VUE/hello_vue3/笔记/路由重定向.ts

@@ -0,0 +1,42 @@
+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
+        },
+        {
+            path: '/news',
+            redirect: '/about', // 重定向
+        }
+    ]
+})
+
+// 暴露出去 router
+export default router