Skip to content

Commit cc26eb8

Browse files
lsh-coderlsh-coder
committed
按讲稿顺序重新编写的项目，XX-XXX表示“讲稿-序号”
1 parent f75a26e commit cc26eb8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+582
-4
lines changed

‎01-vue3-intro/.eslintrc.json ‎00-001大圣原有完整项目vue3-intro/.eslintrc.json

File renamed without changes.

‎01-vue3-intro/README.md ‎00-001大圣原有完整项目vue3-intro/README.md

‎01-vue3-intro/index.html ‎00-001大圣原有完整项目vue3-intro/index.html

File renamed without changes.

‎01-vue3-intro/package.json ‎00-001大圣原有完整项目vue3-intro/package.json

File renamed without changes.

‎01-vue3-intro/public/favicon.ico ‎00-001大圣原有完整项目vue3-intro/public/favicon.ico

File renamed without changes.

‎01-vue3-intro/public/geek.png ‎00-001大圣原有完整项目vue3-intro/public/geek.png

File renamed without changes.

‎01-vue3-intro/public/loading.gif ‎00-001大圣原有完整项目vue3-intro/public/loading.gif

File renamed without changes.

‎01-vue3-intro/public/logo.png ‎00-001大圣原有完整项目vue3-intro/public/logo.png

File renamed without changes.

‎01-vue3-intro/public/logo1.png ‎00-001大圣原有完整项目vue3-intro/public/logo1.png

File renamed without changes.

‎01-vue3-intro/reactive.js ‎00-001大圣原有完整项目vue3-intro/reactive.js

File renamed without changes.

‎01-vue3-intro/src/App.vue ‎00-001大圣原有完整项目vue3-intro/src/App.vue

File renamed without changes.

‎01-vue3-intro/src/assets/logo.png ‎00-001大圣原有完整项目vue3-intro/src/assets/logo.png

File renamed without changes.

‎01-vue3-intro/src/components/Counter.vue ‎00-001大圣原有完整项目vue3-intro/src/components/Counter.vue

File renamed without changes.

‎01-vue3-intro/src/components/Heading.jsx ‎00-001大圣原有完整项目vue3-intro/src/components/Heading.jsx

File renamed without changes.

‎01-vue3-intro/src/components/Rate.vue ‎00-001大圣原有完整项目vue3-intro/src/components/Rate.vue

File renamed without changes.

‎01-vue3-intro/src/components/Todo.jsx ‎00-001大圣原有完整项目vue3-intro/src/components/Todo.jsx

File renamed without changes.

‎01-vue3-intro/src/components/TodoList.vue ‎00-001大圣原有完整项目vue3-intro/src/components/TodoList.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<!-- <h1>{{x}},{{y}}</h1>
55
<h1 @click="add">{{count}}</h1>-->
66
<input type="text" v-model="title" @keydown.enter="addTodo" />
7+
78
<button v-if="active < all" @click="clear">清理</button>
89
<div v-if="todos.length">
910
<transition-group name="flip-list" tag="ul">
@@ -35,14 +36,15 @@
3536
</template>
3637

3738
<script setup>
38-
import { ref, computed, reactive } from "vue";
39+
import { ref, computed, reactive } from "vue"; //
3940
import { useMouse } from '../utils/mouse'
4041
4142
let animate = reactive({
4243
show: false,
4344
el: null
4445
})
4546
function beforeEnter(el) {
47+
4648
let dom = animate.el
4749
let rect = dom.getBoundingClientRect()
4850
let x = window.innerWidth - rect.left - 60

‎01-vue3-intro/src/main.js ‎00-001大圣原有完整项目vue3-intro/src/main.js

File renamed without changes.

‎01-vue3-intro/src/pages/About.vue ‎00-001大圣原有完整项目vue3-intro/src/pages/About.vue

File renamed without changes.

‎01-vue3-intro/src/pages/Head.vue ‎00-001大圣原有完整项目vue3-intro/src/pages/Head.vue

File renamed without changes.

‎01-vue3-intro/src/pages/Home.vue ‎00-001大圣原有完整项目vue3-intro/src/pages/Home.vue

File renamed without changes.

‎01-vue3-intro/src/pages/Rate.vue ‎00-001大圣原有完整项目vue3-intro/src/pages/Rate.vue

File renamed without changes.

‎01-vue3-intro/src/router/grouter/RouterLink.vue ‎00-001大圣原有完整项目vue3-intro/src/router/grouter/RouterLink.vue

File renamed without changes.

‎01-vue3-intro/src/router/grouter/RouterView.vue ‎00-001大圣原有完整项目vue3-intro/src/router/grouter/RouterView.vue

File renamed without changes.

‎01-vue3-intro/src/router/grouter/index.js ‎00-001大圣原有完整项目vue3-intro/src/router/grouter/index.js

File renamed without changes.

‎01-vue3-intro/src/router/index.js ‎00-001大圣原有完整项目vue3-intro/src/router/index.js

File renamed without changes.

‎01-vue3-intro/src/store/gvuex.js ‎00-001大圣原有完整项目vue3-intro/src/store/gvuex.js

File renamed without changes.

‎01-vue3-intro/src/store/index.js ‎00-001大圣原有完整项目vue3-intro/src/store/index.js

File renamed without changes.

‎01-vue3-intro/src/utils/favicon.js ‎00-001大圣原有完整项目vue3-intro/src/utils/favicon.js

File renamed without changes.

‎01-vue3-intro/src/utils/mouse.js ‎00-001大圣原有完整项目vue3-intro/src/utils/mouse.js

File renamed without changes.

‎01-vue3-intro/vite.config.js ‎00-001大圣原有完整项目vue3-intro/vite.config.js

File renamed without changes.

‎01-vue3-intro/.vscode/extensions.json

-3
This file was deleted.

‎02-001Vue3的极客例子XXX.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Vue3的例子</title>
8+
</head>
9+
10+
<body>
11+
<div>
12+
<h2 id="app">222</h2>
13+
<input type="text" id="todo-input">
14+
</div>
15+
<script src="jquery.min.js"></script>
16+
<script>
17+
// 找到输入框，监听输入
18+
$('#todo-input').on('input', function () {
19+
let val = $(this).val() // 获取值
20+
$('#app').html(val) // 找到标签，修改内容
21+
})
22+
</script>
23+
</body>
24+
25+
</html>

‎02-002Vue3文本框改变h2内容例子.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Vue3的例子</title>
8+
</head>
9+
10+
<body>
11+
<div id="app">
12+
<h2>{{title}}</h2>
13+
<input type="text" v-model="title">
14+
</div>
15+
16+
<script src="https://unpkg.com/vue@next"></script>
17+
<script>
18+
const App = {
19+
data() {
20+
return {
21+
title: "我的Vue3" // 定义一个数据
22+
}
23+
}
24+
}
25+
// 启动应用
26+
Vue.createApp(App).mount('#app')
27+
</script>
28+
</body>
29+
30+
</html>

‎02-003Vue3单选框例子.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Vue3的例子</title>
8+
</head>
9+
10+
<body>
11+
<div id="app">
12+
<h2>{{title}}</h2>
13+
<input type="text" v-model="title">
14+
<ul>
15+
<li v-for="todo in todos">{{todo}}</li>
16+
</ul>
17+
</div>
18+
19+
<script src="https://unpkg.com/vue@next"></script>
20+
<script>
21+
const App = {
22+
data() {
23+
return {
24+
title: "", // 定义一个数据
25+
todos: ['吃饭', '睡觉']
26+
}
27+
}
28+
}
29+
// 启动应用
30+
Vue.createApp(App).mount('#app')
31+
</script>
32+
</body>
33+
34+
</html>

‎02-004Vue3文本框内容变成复选框选项例子.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Vue3的例子</title>
8+
</head>
9+
10+
<body>
11+
<div id="app">
12+
<h2>{{title}}</h2>
13+
<input type="text" v-model="title" @keyup.enter.native="addTodo()">
14+
15+
<ul>
16+
<li v-for="todo in todos">
17+
<input type="checkbox" v-model="todo.done">
18+
<span :class="{done:todo.done}"> {{todo.title}}</span>
19+
</li>
20+
</ul>
21+
<p>未完成{{active}} / 共计{{all}}</p>
22+
</div>
23+
24+
<script src="https://unpkg.com/vue@next"></script>
25+
<script>
26+
const App = {
27+
data() {
28+
return {
29+
title: "", // 定义一个数据
30+
todos: [
31+
{ title: '吃饭', done: false },
32+
{ title: '睡觉', done: true }, //默认选中
33+
{ title: '学习Vue', done: true }
34+
]
35+
}
36+
},
37+
computed: {
38+
active() {
39+
return this.todos.filter(v => !v.done).length
40+
},
41+
all() {
42+
return this.todos.length
43+
}
44+
},
45+
methods: {
46+
addTodo() { //将文本框内容变成复选框条目（默认不选中）
47+
this.todos.push({
48+
title: this.title,
49+
done: false
50+
})
51+
this.title = ""
52+
}
53+
}
54+
}
55+
// 启动应用
56+
Vue.createApp(App).mount('#app')
57+
</script>
58+
59+
<style>
60+
.done {
61+
color: gray;
62+
text-decoration: line-through;
63+
}
64+
</style>
65+
66+
</body>
67+
68+
</html>

‎03-001Vue2 单击++例子.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Vue2的例子</title>
8+
</head>
9+
10+
<body>
11+
<div id="app">
12+
<h1 @click="add">{{count}} * 2 = {{double}}</h1>
13+
</div>
14+
<script src="https://unpkg.com/vue@next"></script>
15+
<script>
16+
let App = {
17+
data() {
18+
return {
19+
count: 1
20+
}
21+
},
22+
methods: {
23+
add() {
24+
this.count++
25+
}
26+
},
27+
computed: {
28+
double() {
29+
return this.count * 2
30+
}
31+
}
32+
}
33+
Vue.createApp(App).mount('#app')
34+
</script>
35+
</body>
36+
37+
</html>

‎03-002Vue3 单击++例子.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Vue3的例子</title>
8+
</head>
9+
10+
<body>
11+
<div id="app">
12+
<h1 @click="add">{{state.count}} * 2 = {{double}}</h1>
13+
</div>
14+
<script src="https://unpkg.com/vue@next"></script>
15+
<script>
16+
const { reactive, computed } = Vue
17+
let App = {
18+
setup() {
19+
const state = reactive({
20+
count: 1
21+
})
22+
function add() {
23+
state.count++
24+
}
25+
const double = computed(() => state.count * 2)
26+
return { state, add, double }
27+
}
28+
}
29+
Vue.createApp(App).mount('#app')
30+
</script>
31+
</body>
32+
33+
</html>

‎08-001评五星例子/.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎08-001评五星例子/README.md

+7

‎08-001评五星例子/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<!-- 此处定义挂载点app -->
11+
<div id="app"></div>
12+
<script type="module" src="/src/main.js"></script> <!-- 此处调用main.js -->
13+
</body>
14+
</html>

‎08-001评五星例子/package.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "compositionapi-demo",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build",
7+
"serve": "vite preview"
8+
},
9+
"dependencies": {
10+
"vue": "^3.2.16"
11+
},
12+
"devDependencies": {
13+
"@vitejs/plugin-vue": "^1.9.3",
14+
"vite": "^2.6.4"
15+
}
16+
}

‎08-001评五星例子/public/favicon.ico

4.19 KB
Binary file not shown.

‎08-001评五星例子/src/App.vue

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!--这里是重点 -->
2+
<template>
3+
<h1>你的评分是 {{ score }}</h1>
4+
<Rate :value="score" @update-rate="update"></Rate>
5+
6+
<!-- <Rate :value="score"></Rate>
7+
<Rate :value="3"></Rate>
8+
<Rate :value="4" theme="red"></Rate>
9+
<Rate :value="1" theme="green"></Rate> -->
10+
</template>
11+
<script setup>
12+
import { ref } from "vue";
13+
import Rate from "./components/Rate2.vue";
14+
let score = ref(2.5);
15+
function update(num) {
16+
score.value = num;
17+
}
18+
</script>

‎08-001评五星例子/src/assets/logo.png

6.69 KB

‎08-001评五星例子/src/components/Rate0.vue

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<div>
3+
{{rate}}
4+
</div>
5+
</template>
6+
<script setup>
7+
import { defineProps,computed } from 'vue';
8+
let props = defineProps({
9+
value: Number
10+
})
11+
let rate = computed(()=>"★★★★★☆☆☆☆☆".slice(5 - props.value, 10 - props.value))
12+
</script>

‎08-001评五星例子/src/components/Rate1.vue

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div :style="fontstyle">
3+
{{rate}}
4+
</div>
5+
</template>
6+
<script setup>
7+
import { defineProps,computed, } from 'vue';
8+
let props = defineProps({
9+
value: Number,
10+
theme:{type:String,default:'orange'}
11+
})
12+
console.log(props)
13+
let rate = computed(()=>"★★★★★☆☆☆☆☆".slice(5 - props.value, 10 - props.value))
14+
const themeObj = {
15+
'black': '#00',
16+
'white': '#fff',
17+
'red': '#f5222d',
18+
'orange': '#fa541c',
19+
'yellow': '#fadb14',
20+
'green': '#73d13d',
21+
'blue': '#40a9ff',
22+
}
23+
const fontstyle = computed(()=> {
24+
return `color:${themeObj[props.theme]};`
25+
})
26+
</script>

0 commit comments

Comments
 (0)