mirror of
https://github.com/luzhisheng/js_reverse.git
synced 2025-04-12 11:37:09 +08:00
vue学习
This commit is contained in:
yingfeng.ai
parent
9337ba99bd
commit
c6490526fe
@ -1,75 +1,16 @@
|
||||
<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>
|
||||
<Count/>
|
||||
<br>
|
||||
<LoveTalk/>
|
||||
</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>
|
||||
|
||||
38
学习VUE/hello_vue3/src/components/Count.vue
Normal file
38
学习VUE/hello_vue3/src/components/Count.vue
Normal file
@ -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>
|
||||
37
学习VUE/hello_vue3/src/components/LoveTalk.vue
Normal file
37
学习VUE/hello_vue3/src/components/LoveTalk.vue
Normal file
@ -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>
|
||||
@ -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')
|
||||
|
||||
@ -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 {reactive, } from 'vue'
|
||||
import {RouterView, RouterLink, useRouter} from 'vue-router'
|
||||
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>
|
||||
|
||||
@ -31,6 +31,10 @@ const router = createRouter({
|
||||
path: '/about',
|
||||
component: About
|
||||
},
|
||||
{
|
||||
path: '/news',
|
||||
redirect: '/about', // 重定向
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
75
学习VUE/hello_vue3/笔记/路由app写法.vue
Normal file
75
学习VUE/hello_vue3/笔记/路由app写法.vue
Normal file
@ -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>
|
||||
42
学习VUE/hello_vue3/笔记/路由重定向.ts
Normal file
42
学习VUE/hello_vue3/笔记/路由重定向.ts
Normal file
@ -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
|
||||
Loading…
x
Reference in New Issue
Block a user