vue学习

学习VUE/hello_vue3/src/App.vue

@@ -1,20 +1,14 @@
-<script setup lang="ts">
-import Person from './components/Person.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <h1>你好啊！！！！</h1>
-    </div>
-  </header>
   <main>
-    <Person />
+    <Person a="haha" />
   </main>
 </template>
 
+<script setup lang="ts">
+import Person from './components/Person.vue'
+
+</script>
+
 <style scoped>
 header {
   line-height: 1.5;

学习VUE/hello_vue3/src/components/Person.vue

@@ -1,57 +1,26 @@
 <template>
   <div class="person">
-    <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="changeCar">修改车</button>
+    <img v-for="(dog, index) in dogList" :src="dog" :key="index">
+    <button @click="changeImg">点击换图</button>
   </div>
-
 </template>
 
-<script setup>
-import {reactive, watch} from "vue";
+<script setup lang="ts">
+import {ref, reactive} from 'vue'
+import axios from "axios";
+let dogList = reactive([
+    'https://images.dog.ceo/breeds/spaniel-irish/n02102973_2902.jpg'
+])
 
-let person = reactive({
-  name: '张三',
-  age: 18,
-  car: {
-    c1: '奔驰',
-    c2: '宝马',
+async function changeImg() {
+  try{
+    let res = await axios.get("https://dog.ceo/api/breeds/image/random")
+    dogList.push(res.data.message)
+  } catch (e) {
+    alert(e)
   }
-})
-
-function changeName() {
-  person.name += '~~~'
 }
 
-function changeAge() {
-  person.age += 1
-}
-
-function changeCar() {
-  person.car.c1 = "雅迪"
-}
-
-
-//监视某个属性
-watch(() => {
-  return person.name
-}, (nValue, oValue) => {
-  console.log(nValue, oValue)
-}, {deep: true})
-
-//监视某个对象
-watch(() => person.car, (nValue, oValue) => {
-  console.log(nValue, oValue)
-}, {deep: true})
-
-//监视多个数据
-watch([() => person.car, () => person.name], (nValue, oValue) => {
-  console.log(nValue, oValue)
-}, {deep: true})
-
 </script>
 
 
@@ -64,4 +33,8 @@ watch([() => person.car, () => person.name], (nValue, oValue) => {
 button {
   margin: 5px;
 }
+
+img {
+  height: 100px;
+}
 </style>

学习VUE/hello_vue3/src/types/index.ts

@@ -0,0 +1,9 @@
+// 定义一个接口，用于限制person对象的具体属性
+export interface PersonInter {
+    id: string,
+    name: string,
+    age: number
+}
+
+// 自定义类型
+export type Persons = Array<PersonInter>

学习VUE/hello_vue3/笔记/defineProps接收数据并页面展示子.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="person">
+    <h2>{{ a }}</h2>
+    <h2>{{ list }}</h2>
+    <ul>
+      <li v-for="item in list" :key="item.id">
+        {{ item.name }} -- {{ item.age }} -- {{ item.id }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {defineProps, withDefaults} from 'vue'
+import {type Persons} from '@/types'
+
+// 接收a，并且将a保存起来. 接收list
+const props = defineProps<{
+  a: string; // 假设 a 是字符串类型
+  list: Persons; // list 的类型为 Persons 自定义类型
+}>()
+
+</script>
+
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>

学习VUE/hello_vue3/笔记/defineProps接收数据并页面展示父.vue

@@ -0,0 +1,47 @@
+<template>
+  <main>
+    <Person a="haha" :list="PersonList"/>
+  </main>
+</template>
+
+<script setup lang="ts">
+import Person from './components/Person.vue'
+import {reactive} from 'vue'
+import {type Persons} from '@/types'
+
+let PersonList = reactive<Persons>([
+  {id: 'ayf0001', name: '张一', age: 18},
+  {id: 'ayf0002', name: '张二', age: 19},
+  {id: 'ayf0003', name: '张三', age: 17}
+])
+
+</script>
+
+<style scoped>
+header {
+  line-height: 1.5;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+}
+</style>

学习VUE/hello_vue3/笔记/ref属性来获取组件或DOM元素的引用子.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="person">
+    <h1>中国</h1>
+    <h2 ref="title2">苏州</h2>
+    <button @click="showLog">点我输出</button>
+  </div>
+
+</template>
+
+<script setup>
+import {ref, defineExpose} from "vue";
+
+// 创建一个title2，用于存储ref标记的内容
+let title2 = ref()
+let a = ref()
+let b = ref()
+let c = ref()
+
+function showLog(){
+  console.log(title2.value)
+}
+defineExpose({a, b, c})
+</script>
+
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>

学习VUE/hello_vue3/笔记/ref属性来获取组件或DOM元素的引用父.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import Person from './components/Person.vue'
+import {ref} from "vue";
+
+// 创建一个ren，用于存储ref标记的内容
+let ren = ref()
+
+function showLog(){
+  console.log(ren.value)
+}
+
+</script>
+
+<template>
+  <main>
+    <Person ref="ren" />
+    <button @click="showLog">点ren我输出</button>
+  </main>
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+}
+</style>

学习VUE/hello_vue3/笔记/自定义数据类型1.ts

@@ -0,0 +1,9 @@
+// 定义一个接口，用于限制person对象的具体属性
+export interface PersonInter {
+    id: string,
+    name: string,
+    age: number
+}
+
+// 自定义类型
+export type Persons = Array<PersonInter>

学习VUE/hello_vue3/笔记/自定义数据类型1.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="person">
+
+  </div>
+</template>
+
+<script setup>
+import {type PersonInter, type Persons} from '@/types'
+
+// 规范对象类型
+let person: PersonInter = {id: 'ayf0001', name: '张三', age: 18}
+
+// 规范列表中对象类型一
+let personList: Persons = [
+  {id: 'ayf0001', name: '张一', age: 18},
+  {id: 'ayf0002', name: '张二', age: 19},
+  {id: 'ayf0003', name: '张三', age: 17}
+]
+
+
+</script>
+
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>