+
+
+
+
+ ![]()
+ ![]()
+ ![]()
+
+
+
+
+
+
+
diff --git a/3.22作业/Vue3Proj/vue-project/src/App.vue b/3.22作业/Vue3Proj/vue-project/src/App.vue
new file mode 100644
index 0000000..e83ea88
--- /dev/null
+++ b/3.22作业/Vue3Proj/vue-project/src/App.vue
@@ -0,0 +1,92 @@
+
+
+
+ 
+
+
+
+ 条件渲染综合应用
+
+
+
+
+
+
+
+
diff --git a/3.22作业/Vue3Proj/vue-project/src/Com3_3.vue b/3.22作业/Vue3Proj/vue-project/src/Com3_3.vue
new file mode 100644
index 0000000..5c77292
--- /dev/null
+++ b/3.22作业/Vue3Proj/vue-project/src/Com3_3.vue
@@ -0,0 +1,15 @@
+
+条件为{{flag}}时，渲染‘这是v-if’
+条件为{{flag}}时，渲染h3-这是v-show
+div
+
+
+
+
diff --git a/3.22作业/Vue3Proj/vue-project/src/Com3_4.vue b/3.22作业/Vue3Proj/vue-project/src/Com3_4.vue
new file mode 100644
index 0000000..3525006
--- /dev/null
+++ b/3.22作业/Vue3Proj/vue-project/src/Com3_4.vue
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
diff --git a/3.22作业/Vue3Proj/vue-project/src/Com3_5.vue b/3.22作业/Vue3Proj/vue-project/src/Com3_5.vue
new file mode 100644
index 0000000..c8b0644
--- /dev/null
+++ b/3.22作业/Vue3Proj/vue-project/src/Com3_5.vue
@@ -0,0 +1,40 @@
+
+建议做法：v-for与v-if不在同一元素上，显示活跃用户
+ +-
+
- + {{user.id}}:{{ user.name }}--状态：{{user.isActive}} + +
最佳方法：v-for与v-if不同时用在一个元素上，显示所示用户
+-
+
- + {{user.id}}:{{ user.name }}--状态：{{user.isActive}} + +
最佳方法：v-for与v-if不同时用在一个元素上，仅显示活跃用户
+-
+
- + {{user.id}}:{{ user.name }}--状态：{{user.isActive}} + +
v-on属性值为一般表达式：计数器为{{count}}
+ +v-on属性值为方法：当前系统日期为{{now}}
+ +v-on属性值为带参数的方法：产生6位随机区间的整数
+{{numArr}}
+ +v-on属性值为带$event的方法：访问原生的event对象为{{information}}
+ +v-on属性值不带参数的方法：默认传入event，类型为{{typeObject}}
+ + + + \ No newline at end of file diff --git a/3.22作业/Vue3Proj/vue-project/src/Com3_8.vue b/3.22作业/Vue3Proj/vue-project/src/Com3_8.vue new file mode 100644 index 0000000..ed1ffa2 --- /dev/null +++ b/3.22作业/Vue3Proj/vue-project/src/Com3_8.vue @@ -0,0 +1,68 @@ + +事件修饰符综合应用
+
+
+
+
+
+
\ No newline at end of file
diff --git a/3.22作业/Vue3Proj/vue-project/src/Com3_9.vue b/3.22作业/Vue3Proj/vue-project/src/Com3_9.vue
new file mode 100644
index 0000000..c816d31
--- /dev/null
+++ b/3.22作业/Vue3Proj/vue-project/src/Com3_9.vue
@@ -0,0 +1,52 @@
+
+
+
+ div1
+ 山东工商
+
+
+ div1
+ 山东工商
+
+
+
+
+ div3
+
+ div4
+
+
+ Vue.js 是什么
++ Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 + HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue + 都可以胜任。Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 + HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue + 都可以胜任。Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 + HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue + 都可以胜任。 +
+滚动 {{ scrollCount }} 次。
+您的信息：{{ myInformation }}
+ + + + \ No newline at end of file diff --git a/3.22作业/Vue3Proj/vue-project/src/Com_6.vue b/3.22作业/Vue3Proj/vue-project/src/Com_6.vue new file mode 100644 index 0000000..3b3f29d --- /dev/null +++ b/3.22作业/Vue3Proj/vue-project/src/Com_6.vue @@ -0,0 +1,82 @@ + + + + + + \ No newline at end of file diff --git a/3.22作业/Vue3Proj/vue-project/src/assets/base.css b/3.22作业/Vue3Proj/vue-project/src/assets/base.css new file mode 100644 index 0000000..8816868 --- /dev/null +++ b/3.22作业/Vue3Proj/vue-project/src/assets/base.css @@ -0,0 +1,86 @@ +/* color palette from+ + More instructions are available in +
README.md.
+
+
+
+
+
+
diff --git a/3.22作业/Vue3Proj/vue-project/src/components/icons/IconCommunity.vue b/3.22作业/Vue3Proj/vue-project/src/components/icons/IconCommunity.vue
new file mode 100644
index 0000000..2dc8b05
--- /dev/null
+++ b/3.22作业/Vue3Proj/vue-project/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
+
+
+
diff --git a/3.22作业/Vue3Proj/vue-project/src/components/icons/IconDocumentation.vue b/3.22作业/Vue3Proj/vue-project/src/components/icons/IconDocumentation.vue
new file mode 100644
index 0000000..6d4791c
--- /dev/null
+++ b/3.22作业/Vue3Proj/vue-project/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
+
+
+
diff --git a/3.22作业/Vue3Proj/vue-project/src/components/icons/IconEcosystem.vue b/3.22作业/Vue3Proj/vue-project/src/components/icons/IconEcosystem.vue
new file mode 100644
index 0000000..c3a4f07
--- /dev/null
+++ b/3.22作业/Vue3Proj/vue-project/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
+
+
+
diff --git a/3.22作业/Vue3Proj/vue-project/src/components/icons/IconSupport.vue b/3.22作业/Vue3Proj/vue-project/src/components/icons/IconSupport.vue
new file mode 100644
index 0000000..7452834
--- /dev/null
+++ b/3.22作业/Vue3Proj/vue-project/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
+
+
+
diff --git a/3.22作业/Vue3Proj/vue-project/src/components/icons/IconTooling.vue b/3.22作业/Vue3Proj/vue-project/src/components/icons/IconTooling.vue
new file mode 100644
index 0000000..660598d
--- /dev/null
+++ b/3.22作业/Vue3Proj/vue-project/src/components/icons/IconTooling.vue
@@ -0,0 +1,19 @@
+
+
+
+
diff --git a/3.22作业/Vue3Proj/vue-project/src/main.ts b/3.22作业/Vue3Proj/vue-project/src/main.ts
new file mode 100644
index 0000000..c48747c
--- /dev/null
+++ b/3.22作业/Vue3Proj/vue-project/src/main.ts
@@ -0,0 +1,22 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import Com3_1 from './Com3_1.vue'
+import Com3_3 from './Com3_3.vue'
+import Com3_4 from './Com3_4.vue'
+import Com3_5 from './Com3_5.vue'
+import Com3_7 from './Com3_7.vue'
+import Com3_8 from './Com3_8.vue'
+import Com3_9 from './Com3_9.vue'
+import Com_6 from './Com_6.vue'
+import homework from './2022214721张猛.vue'
+
+
+const app = createApp(homework)
+
+app.use(createPinia())
+
+app.mount('#app')
diff --git a/3.22作业/Vue3Proj/vue-project/src/router/index.ts b/3.22作业/Vue3Proj/vue-project/src/router/index.ts
new file mode 100644
index 0000000..3e49915
--- /dev/null
+++ b/3.22作业/Vue3Proj/vue-project/src/router/index.ts
@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+ history: createWebHistory(import.meta.env.BASE_URL),
+ routes: [
+ {
+ path: '/',
+ name: 'home',
+ component: HomeView,
+ },
+ {
+ path: '/about',
+ name: 'about',
+ // route level code-splitting
+ // this generates a separate chunk (About.[hash].js) for this route
+ // which is lazy-loaded when the route is visited.
+ component: () => import('../views/AboutView.vue'),
+ },
+ ],
+})
+
+export default router
diff --git a/3.22作业/Vue3Proj/vue-project/src/stores/counter.ts b/3.22作业/Vue3Proj/vue-project/src/stores/counter.ts
new file mode 100644
index 0000000..b6757ba
--- /dev/null
+++ b/3.22作业/Vue3Proj/vue-project/src/stores/counter.ts
@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+ const count = ref(0)
+ const doubleCount = computed(() => count.value * 2)
+ function increment() {
+ count.value++
+ }
+
+ return { count, doubleCount, increment }
+})
diff --git a/3.22作业/Vue3Proj/vue-project/src/views/AboutView.vue b/3.22作业/Vue3Proj/vue-project/src/views/AboutView.vue
new file mode 100644
index 0000000..756ad2a
--- /dev/null
+++ b/3.22作业/Vue3Proj/vue-project/src/views/AboutView.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/3.22作业/Vue3Proj/vue-project/src/views/HomeView.vue b/3.22作业/Vue3Proj/vue-project/src/views/HomeView.vue
new file mode 100644
index 0000000..d5c0217
--- /dev/null
+++ b/3.22作业/Vue3Proj/vue-project/src/views/HomeView.vue
@@ -0,0 +1,9 @@
+
+
+
+