feat: 更新
This commit is contained in:
dengtongyu committed
1 parent
b7c570661c
commit
96230447e4
15 files changed
+490
-133
No files matched your search
+1
-1
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Layout class="app-layout">
|
||||
<Layout class="app-layout" :siderWidth="260">
|
||||
<template #header>
|
||||
<VHeader />
|
||||
</template>
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="side-menu">
|
||||
<div :key="index" v-for="(item, index) in data" class="side-menu-item">
|
||||
<div v-if="item?.meta?.title" @click='clickItem(item)' class="side-menu-item-link">
|
||||
<div v-if="item?.meta?.title" class="side-menu-item-link">
|
||||
<RouterLink v-if="item.component" :to="item.path">{{ item.meta.title }}</RouterLink>
|
||||
<span v-else>{{ item.meta.title }}</span>
|
||||
</div>
|
||||
@@ -22,9 +22,9 @@ withDefaults(defineProps<sideMenuProps>(), {
|
||||
data: () => []
|
||||
})
|
||||
|
||||
const clickItem = (item: RouteRecordRaw) => {
|
||||
console.log(item)
|
||||
}
|
||||
// const clickItem = (item: RouteRecordRaw) => {
|
||||
// console.log(item)
|
||||
// }
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="40" height="40" />
|
||||
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="50" height="50" />
|
||||
<h1 class="header-title">{{ appName }}</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+1
-1
@@ -8,4 +8,4 @@ const router = createRouter({
|
||||
routes: routes
|
||||
})
|
||||
|
||||
export default router
|
||||
export default router
|
||||
+69
-5
@@ -13,35 +13,99 @@ const routes = [
|
||||
{
|
||||
path: "/reactivity/reactive",
|
||||
name: "reactive",
|
||||
meta: { title: "reactive基础用法" },
|
||||
meta: { title: "reactive" },
|
||||
component: () => import("@/views/reactivity/ReactiveBase.vue")
|
||||
},
|
||||
{
|
||||
path: "/reactivity/ref",
|
||||
name: "ref",
|
||||
meta: { title: "ref基础用法" },
|
||||
meta: { title: "ref" },
|
||||
component: () => import("@/views/reactivity/RefBase.vue")
|
||||
},
|
||||
{
|
||||
path: "/reactivity/toref",
|
||||
name: "toref",
|
||||
meta: { title: "toRef基础用法" },
|
||||
meta: { title: "toRef" },
|
||||
component: () => import("@/views/reactivity/ToRefBase.vue")
|
||||
},
|
||||
{
|
||||
path: "/reactivity/torefs",
|
||||
name: "torefs",
|
||||
meta: { title: "toRefs基础用法" },
|
||||
meta: { title: "toRefs" },
|
||||
component: () => import("@/views/reactivity/ToRefsBase.vue")
|
||||
},
|
||||
{
|
||||
path: "/reactivity/toraw",
|
||||
name: "toraw",
|
||||
meta: { title: "toRaw基础用法" },
|
||||
meta: { title: "toRaw" },
|
||||
component: () => import("@/views/reactivity/ToRawBase.vue")
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/computed",
|
||||
name: "computed",
|
||||
meta: { title: "计算属性" },
|
||||
redirect: "/computed/base",
|
||||
children: [
|
||||
{
|
||||
path: "/computed/base",
|
||||
name: "computedBase",
|
||||
meta: { title: "computed示例" },
|
||||
component: () => import("@/views/computed/ComputedBase.vue")
|
||||
},
|
||||
{
|
||||
path: "/computed/advan",
|
||||
name: "computedAdvan",
|
||||
meta: { title: "computed双向绑定" },
|
||||
component: () => import("@/views/computed/ComputedAdvan.vue")
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/watch",
|
||||
name: "watch",
|
||||
meta: { title: "侦听器" },
|
||||
redirect: "/watch/base",
|
||||
children: [
|
||||
{
|
||||
path: "/watch/base",
|
||||
name: "watchBase",
|
||||
meta: { title: "watch示例" },
|
||||
component: () => import("@/views/watch/WatchBase.vue")
|
||||
},
|
||||
{
|
||||
path: "/watch/reactive",
|
||||
name: "watchReactive",
|
||||
meta: { title: "watch侦听响应式对象" },
|
||||
component: () => import("@/views/watch/WatchReactive.vue")
|
||||
},
|
||||
{
|
||||
path: "/watch/effectbase",
|
||||
name: "effectBase",
|
||||
meta: { title: "watchEffect示例" },
|
||||
component: () => import("@/views/watch/WatchEffectBase.vue")
|
||||
},
|
||||
{
|
||||
path: "/watch/effectinvalidate",
|
||||
name: "effectInvalidate",
|
||||
meta: { title: "watchEffect清除副作用函数" },
|
||||
component: () => import("@/views/watch/WatchEffectInvalidate.vue")
|
||||
},
|
||||
{
|
||||
path: "/watch/callback",
|
||||
name: "watchCallback",
|
||||
meta: { title: "watch回调的触发时机" },
|
||||
component: () => import("@/views/watch/WatchCallback.vue")
|
||||
},
|
||||
{
|
||||
path: "/watch/stop",
|
||||
name: "watchStop",
|
||||
meta: { title: "watch停止侦听器" },
|
||||
component: () => import("@/views/watch/WatchStop.vue")
|
||||
},
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
export default routes;
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div>
|
||||
<p><input type="text" v-model="secondName" /></p>
|
||||
<p>{{ fullName }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const firstName = ref("张")
|
||||
const secondName = ref("三")
|
||||
const fullName = computed({
|
||||
get: () => {
|
||||
return `${firstName.value}${secondName.value}`
|
||||
},
|
||||
set: (value) => {
|
||||
secondName.value = value
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
input {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<p><input type="number" v-model="number" /></p>
|
||||
<p>{{ amount }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
const number = ref(123456)
|
||||
const amount = computed(() => {
|
||||
return number.value.toLocaleString('zh', {
|
||||
style: 'currency',
|
||||
currency: 'CNY',
|
||||
minimumFractionDigits: 3
|
||||
});
|
||||
})
|
||||
// amount.value = "11111"
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
input {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>
|
||||
<select name="select" v-model="curPage">
|
||||
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>{{ res }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch, ref } from 'vue'
|
||||
const options = [
|
||||
{
|
||||
label: "第一页",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "第二页",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "第三页",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: "第四页",
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: "第五页",
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
const curPage = ref(1)
|
||||
const res = ref("")
|
||||
watch(
|
||||
curPage,
|
||||
(newValue) => {
|
||||
const curItem = options.filter((item) => item.value === newValue)[0]
|
||||
res.value = `${curItem.label} 的数据`
|
||||
},
|
||||
// {immediate: true}
|
||||
)
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
select {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="listDom">
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
</div>
|
||||
<br />
|
||||
<div ref="resDom"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
watchEffect,
|
||||
// watchPostEffect
|
||||
} from 'vue'
|
||||
const listDom = ref<HTMLDivElement>()
|
||||
const resDom = ref<HTMLDivElement>()
|
||||
const selectElement = ref(3)
|
||||
|
||||
watchEffect(() => {
|
||||
const selectElem = listDom.value.querySelectorAll("p")[selectElement.value]
|
||||
resDom.value.append(selectElem)
|
||||
}, {
|
||||
flush: 'post'
|
||||
})
|
||||
|
||||
// watchPostEffect(() => {
|
||||
// const selectElem = listDom.value.querySelectorAll("p")[selectElement.value]
|
||||
// resDom.value.append(selectElem)
|
||||
// })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>
|
||||
<select name="select" v-model="curPage">
|
||||
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>watch: {{ watchRes }}</p>
|
||||
<p>watchEffect: {{ watchEffectRes }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch, watchEffect, ref } from 'vue'
|
||||
const options = [
|
||||
{
|
||||
label: "第一页",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "第二页",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "第三页",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: "第四页",
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: "第五页",
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
const curPage = ref(1)
|
||||
const watchRes = ref("")
|
||||
watch(
|
||||
curPage,
|
||||
(newValue) => {
|
||||
const curItem = options.filter((item) => item.value === newValue)[0]
|
||||
watchRes.value = `${curItem.label} 的数据`
|
||||
},
|
||||
)
|
||||
const watchEffectRes = ref("")
|
||||
watchEffect(() => {
|
||||
const curItem = options.filter((item) => item.value === curPage.value)[0]
|
||||
watchEffectRes.value = `${curItem.label} 的数据`
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
select {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>
|
||||
<select name="select" v-model="curPage">
|
||||
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>{{ watchEffectRes }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watchEffect, ref } from 'vue'
|
||||
const options = [
|
||||
{
|
||||
label: "第一页",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "第二页",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "第三页",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: "第四页",
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: "第五页",
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
const curPage = ref(1)
|
||||
const watchEffectRes = ref("")
|
||||
watchEffect((onInvalidate) => {
|
||||
const curItem = options.filter((item) => item.value === curPage.value)[0]
|
||||
watchEffectRes.value = `${curItem.label} 的数据`
|
||||
console.log('watchEffect副作用函数执行了！')
|
||||
onInvalidate(() => {
|
||||
console.log("onInvalidate清除副作用函数执行了！")
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 清除副作用函数特点
|
||||
// 副作用函数初始化执行时，清除副作用函数不执行。
|
||||
// 侦听变化触发副作用函数都会执行一次清除副作用函数。
|
||||
// 清除副作用函数优先于副作用函数执行。
|
||||
// 组件被销毁的时候清除副作用函数再次执行。
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
select {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>
|
||||
<select name="select" v-model="curPage.page">
|
||||
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
||||
</select>
|
||||
<!-- <input type="number" v-model="curPage.limit" /> -->
|
||||
</p>
|
||||
<p>{{ res }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch, reactive, ref } from 'vue'
|
||||
const options = [
|
||||
{
|
||||
label: "第一页",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "第二页",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "第三页",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: "第四页",
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: "第五页",
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
const curPage = reactive({
|
||||
page: 1,
|
||||
limit: 10
|
||||
})
|
||||
const res = ref("")
|
||||
watch(
|
||||
// curPage.page,
|
||||
() => curPage.page,
|
||||
(newValue) => {
|
||||
const curItem = options.filter((item) => item.value === newValue)[0]
|
||||
res.value = `${curItem.label} 的数据`
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
// watch(
|
||||
// () => curPage,
|
||||
// (newValue) => {
|
||||
// const curItem = options.filter((item) => item.value === newValue.page)[0]
|
||||
// res.value = `${curItem.label} 的 ${newValue.limit} 条数据`
|
||||
// },
|
||||
// {
|
||||
// immediate: true,
|
||||
// deep: true
|
||||
// }
|
||||
// )
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
select,input {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>
|
||||
<select name="select" v-model="curPage">
|
||||
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
||||
</select>
|
||||
<button @click="watchStop">停止侦听</button>
|
||||
</p>
|
||||
<p>{{ res }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch, ref } from 'vue'
|
||||
const options = [
|
||||
{
|
||||
label: "第一页",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "第二页",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "第三页",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: "第四页",
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: "第五页",
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
const curPage = ref(1)
|
||||
const res = ref("")
|
||||
const stop = watch(
|
||||
curPage,
|
||||
(newValue) => {
|
||||
const curItem = options.filter((item) => item.value === newValue)[0]
|
||||
res.value = `${curItem.label} 的数据`
|
||||
}
|
||||
)
|
||||
|
||||
const watchStop = () => {
|
||||
stop()
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
select,
|
||||
button {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user