lejings
/
front_learn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2024年12月3日16:41:50

Browse Source
main
LeJingS 3 months ago
parent f5a46a2da0
commit a411936548
35 changed files with 6485 additions and 0 deletions
Show Stats Download Patch File Download Diff File

30
vue/vue3/The01/The01/.gitignore vendored
Unescape View File

@ -0,0 +1,30 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo

3
vue/vue3/The01/The01/.vscode/extensions.json vendored
Unescape View File

@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

33
vue/vue3/The01/The01/README.md
Unescape View File

@ -0,0 +1,33 @@
# The01
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
## Customize configuration
See [Vite Configuration Reference](https://vite.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```

1
vue/vue3/The01/The01/env.d.ts vendored
Unescape View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

13
vue/vue3/The01/The01/index.html
Unescape View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

3089
vue/vue3/The01/The01/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

28
vue/vue3/The01/The01/package.json
Unescape View File

@ -0,0 +1,28 @@
{
"name": "the01",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build"
},
"dependencies": {
"vite-plugin-vue-setup-extend": "^0.4.0",
"vue": "^3.5.13"
},
"devDependencies": {
"@tsconfig/node22": "^22.0.0",
"@types/node": "^22.9.3",
"@vitejs/plugin-vue": "^5.2.1",
"@vue/tsconfig": "^0.7.0",
"npm-run-all2": "^7.0.1",
"typescript": "~5.6.3",
"vite": "^6.0.1",
"vite-plugin-vue-devtools": "^7.6.5",
"vue-tsc": "^2.1.10"
}
}

BIN
vue/vue3/The01/The01/public/favicon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

22
vue/vue3/The01/The01/src/App.vue
Unescape View File

@ -0,0 +1,22 @@
<template>
<div>
<Person></Person>
</div>
</template>
<script >
import Person from './components/Person.vue'
export default {
name: 'App',
// 注册组件
components: {
Person
}
}
</script>
<style>
</style>

66
vue/vue3/The01/The01/src/components/Person.vue
Unescape View File

@ -0,0 +1,66 @@
<template>
<div class="person">
<h2>姓名：{{ person.name }}</h2>
<p>年龄：{{ person.age }}</p>
<p>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</p>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changeC1">修改第一台车</button>
<button @click="changeC2">修改第一台车</button>
<button @click="changeCar">修改整个车</button>
</div>
</template>
<script setup name="Person">
import { reactive,watch } from 'vue'
let person = reactive({
name: '张三',
age: 18,
car:{
c1: '奔驰',
c2: '宝马'
}
})
//
// 方法
function changeName(){
person.name += '~'
}
function changeAge(){
person.age += 1
}
function changeC1(){
person.car.c1 = '奥迪'
}
function changeC2(){
person.car.c2 = '大众'
}
function changeCar(){
person.car = {c1:'雅迪',c2:'爱玛'}
}
// 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
/* watch(()=> person.name,(newValue,oldValue)=>{
console.log('person.name变化了',newValue,oldValue)
}) */
// 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
watch(()=>person.car,(newValue,oldValue)=>{
console.log('person.car变化了',newValue,oldValue)
},{deep:true})
</script>
<style>
</style>

6
vue/vue3/The01/The01/src/main.ts
Unescape View File

@ -0,0 +1,6 @@
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

13
vue/vue3/The01/The01/tsconfig.app.json
Unescape View File

@ -0,0 +1,13 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"paths": {
"@/*": ["./src/*"]
}
}
}

11
vue/vue3/The01/The01/tsconfig.json
Unescape View File

@ -0,0 +1,11 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
]
}

19
vue/vue3/The01/The01/tsconfig.node.json
Unescape View File

@ -0,0 +1,19 @@
{
"extends": "@tsconfig/node22/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*"
],
"compilerOptions": {
"composite": true,
"noEmit": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}

20
vue/vue3/The01/The01/vite.config.ts
Unescape View File

@ -0,0 +1,20 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import VueSetipExtend from 'vite-plugin-vue-setup-extend'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
VueSetipExtend()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})

6
vue/vue3/The01/package-lock.json generated
Unescape View File

@ -0,0 +1,6 @@
{
"name": "The01",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}

508
vue/vue3/learn.md
Unescape View File

@ -0,0 +1,508 @@
### 组合式API
#### 拉开序幕的setup
选项式api：
```js
data(){
return {
name:'张三',
age:18,
tel:'13888888888'
}
},
methods:{
// 修改姓名
changeName(){
this.name = 'zhang-san'
},
// 修改年龄
changeAge(){
this.age += 1
},
// 展示联系方式
showTel(){
alert(this.tel)
}
}
```
在vue3的setup中可以与Data和mathods共存
冲突是按生命周期读取，一般data可以读setup，反之不能
##### 引入插件
`npm i vite-plugin-vue-setup-extend -d`
p 010 setup 语法糖
方便简单的对组件命名而不改变文件名,直接在script标签中加上name属性命名即可
set格式
```
setup(){
//数据
//想要修改数据时页面刷新，需要定义响应式的数据
let name = 'shu'
let age = '16'
let tel = '181'
//setup函数中this是undefind
function changeName(){
name = 'uhs'
}
function changeAge(){
age=51
}
function showTel(){
tel = '393'
}
//简写返回数据
//setup的返回值也可以是渲染函数
return {name,age,changeName,changeAge,showTel}
}
```
vue3响应式=>
ref && reactive
基本类型 && 对象类型
##### ref
```
<template>
<div class="person">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">查看联系方式</button>
</div>
</template>
<script setup name="person" >
//引入ref
import {ref} from 'vue'
let name = ref('shu')
let age = ref(16)
let tel = '181'
//setup函数中this是undefind
function changeName(){
name.value = 'uhs'
}
function changeAge(){
age.value++
}
function showTel(){
tel = '393'
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
```
ref在js层使用数据必须.value。直接在数组名或者对象名或者变量名后 . 而不是在最底层的数据后 .
reactive不用
##### toRefs & roRef
区别是可不可以批量改造
###### 解构赋值
从响应式对象中解构后的变量是非响应式的
`let{name ,age}=person`
`let{name ,age}=toRefs(person)`
##### computed
作用：根据已有数据计算出新数据（和`Vue2`中的`computed`作用一致）。
引入知识点：双向绑定
```vue
<template>
<div class="person">
姓：<input type="text" v-model="firstName"> <br>
名：<input type="text" v-model="lastName"> <br>
全名：<span>{{fullName}}</span> <br>
<button @click="changeFullName">全名改为：li-si</button>
</div>
</template>
<script setup lang="ts" name="App">
import {ref,computed} from 'vue'
let firstName = ref('zhang')
let lastName = ref('san')
// 计算属性——只读取，不修改
/* let fullName = computed(()=>{
return firstName.value + '-' + lastName.value
}) */
// 计算属性——既读取又修改
let fullName = computed({
// 读取
get(){
return firstName.value + '-' + lastName.value
},
// 修改
set(val){
console.log('有人修改了fullName',val)
firstName.value = val.split('-')[0]
lastName.value = val.split('-')[1]
}
})
function changeFullName(){
fullName.value = 'li-si'
}
</script>
```
计算属性有缓存，多次调用的情况下，如果依赖属性没有改变。不会多次计算。而方法没有缓存
计算属性定义get和set就可以直接改变
### watch
- 作用：监视数据的变化（和`Vue2`中的`watch`作用一致）
- 特点：`Vue3`中的`watch`只能监视以下**四种数据**：
> 1. `ref`定义的数据。
> 2. `reactive`定义的数据。
> 3. 函数返回一个值（`getter`函数）。
> 4. 一个包含上述内容的数组。
解除监视，watch的返回值用cons接收，在使用后即可解除监视
1.ref定义的数据
```vue
<template>
<div class="person">
<h2>当前求和为：{{ sum }}</h2>
<button @click="changeSum">点我sum+1</button>
</div>
</template>
<script setup name="Person">
// 引入监视
import { ref,watch } from 'vue'
//数据
let sum = ref(0)
//方法
function changeSum() {
sum.value++
}
//监视
watch(sum,(newValue,oldValue)=>{
console.log('sum变了',newValue,oldValue)
})
</script>
<style>
</style>
```
2.reactive定义的数据
```vue
<template>
<div class="person">
<h1>情况二：监视【ref】定义的【对象类型】数据</h1>
<h2>姓名：{{ person.name }}</h2>
<h2>年龄：{{ person.age }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changePerson">修改整个人</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref,watch} from 'vue'
// 数据
let person = ref({
name:'张三',
age:18
})
// 方法
function changeName(){
person.value.name += '~'
}
function changeAge(){
person.value.age += 1
}
function changePerson(){
person.value = {name:'李四',age:90}
}
/*
监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
watch的第一个参数是：被监视的数据
watch的第二个参数是：监视的回调
watch的第三个参数是：配置对象（deep、immediate等等.....）
*/
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
},{deep:true})
</script>
```
3.
```vue
<template>
<div class="person">
<h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
<h2>姓名：{{ person.name }}</h2>
<h2>年龄：{{ person.age }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changePerson">修改整个人</button>
<hr>
<h2>测试：{{obj.a.b.c}}</h2>
<button @click="test">修改obj.a.b.c</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {reactive,watch} from 'vue'
// 数据
let person = reactive({
name:'张三',
age:18
})
let obj = reactive({
a:{
b:{
c:666
}
}
})
// 方法
function changeName(){
person.name += '~'
}
function changeAge(){
person.age += 1
}
function changePerson(){
Object.assign(person,{name:'李四',age:80})
}
function test(){
obj.a.b.c = 888
}
// 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
})
watch(obj,(newValue,oldValue)=>{
console.log('Obj变化了',newValue,oldValue)
})
</script>
```
4.
```vue
<template>
<div class="person">
<h2>姓名：{{ person.name }}</h2>
<p>年龄：{{ person.age }}</p>
<p>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</p>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changeC1">修改第一台车</button>
<button @click="changeC2">修改第一台车</button>
<button @click="changeCar">修改整个车</button>
</div>
</template>
<script setup name="Person">
import { reactive,watch } from 'vue'
let person = reactive({
name: '张三',
age: 18,
car:{
c1: '奔驰',
c2: '宝马'
}
})
//
// 方法
function changeName(){
person.name += '~'
}
function changeAge(){
person.age += 1
}
function changeC1(){
person.car.c1 = '奥迪'
}
function changeC2(){
person.car.c2 = '大众'
}
function changeCar(){
person.car = {c1:'雅迪',c2:'爱玛'}
}
// 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
/* watch(()=> person.name,(newValue,oldValue)=>{
console.log('person.name变化了',newValue,oldValue)
}) */
// 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
watch(()=>person.car,(newValue,oldValue)=>{
console.log('person.car变化了',newValue,oldValue)
},{deep:true})
</script>
<style>
</style>
```
5.
```
<template>
<div class="person">
<h1>情况五：监视上述的多个数据</h1>
<h2>姓名：{{ person.name }}</h2>
<h2>年龄：{{ person.age }}</h2>
<h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changeC1">修改第一台车</button>
<button @click="changeC2">修改第二台车</button>
<button @click="changeCar">修改整个车</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {reactive,watch} from 'vue'
// 数据
let person = reactive({
name:'张三',
age:18,
car:{
c1:'奔驰',
c2:'宝马'
}
})
// 方法
function changeName(){
person.name += '~'
}
function changeAge(){
person.age += 1
}
function changeC1(){
person.car.c1 = '奥迪'
}
function changeC2(){
person.car.c2 = '大众'
}
function changeCar(){
person.car = {c1:'雅迪',c2:'爱玛'}
}
// 监视，情况五：监视上述的多个数据
watch([()=>person.name,person.car],(newValue,oldValue)=>{
console.log('person.car变化了',newValue,oldValue)
},{deep:true})
</script>
```
### 路由
以实现单页面多应用

BIN
vue/vue3/资料/TypeScript 极速梳理.pdf
View File

Binary file not shown.

2617
vue/vue3/资料/Vue3快速上手.md
View File

File diff suppressed because it is too large Load Diff

BIN
vue/vue3/资料/images/1683166212929-6cc8b8b6-2c4a-4927-8226-65d1f1f4f337.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
vue/vue3/资料/images/1683167182037-71c78210-8217-4e7d-9a83-e463035efbbe.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
vue/vue3/资料/images/1683167204081-582dc237-72bc-499e-9589-2cdfd452e62f.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

BIN
vue/vue3/资料/images/1695089947298-161c1b47-eb86-42fb-b1f8-d6a4fcab8ee2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
vue/vue3/资料/images/1696662197101-55d2b251-f6e5-47f4-b3f1-d8531bbf9279.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
vue/vue3/资料/images/1696662200734-1bad8249-d7a2-423e-a3c3-ab4c110628be.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
vue/vue3/资料/images/1696662249851-db6403a1-acb5-481a-88e0-e1e34d2ef53a.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 903 KiB

BIN
vue/vue3/资料/images/1696662256560-7239b9f9-a770-43c1-9386-6cc12ef1e9c0.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
vue/vue3/资料/images/computed.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
vue/vue3/资料/images/count.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
vue/vue3/资料/images/image-20231018144351536.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 KiB

BIN
vue/vue3/资料/images/image-20231119185900990.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
vue/vue3/资料/images/image-20231218085906380.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
vue/vue3/资料/images/pinia_example.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 371 KiB

BIN
vue/vue3/资料/images/volar.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
vue/vue3/资料/images/自动补充value.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.9 KiB

Write Preview
Loading…
Cancel
Save