vue学习

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

@@ -1,63 +1,60 @@
 <template>
   <div class="person">
-    <h2>{{ name }}</h2>
+    <h2>姓名：{{ person.name }}</h2>
-    <h2>{{ age }}</h2>
+    <h2>年龄：{{ person.age }}</h2>
-    <h2>{{ address }}</h2>
+    <h2>汽车：{{ person.car.c1 }}-{{ person.car.c2 }}</h2>
-    <h2>{{ car.price }}-----{{ car.brand }}</h2>
     <button @click="changeName">修改名字</button>
     <button @click="changeAge">修改年龄</button>
-    <button @click="showTel">查看联系方式</button>
+    <button @click="changeCar">修改车</button>
-    <button @click="changeCar">修改汽车价格和名字</button>
-    <ul>
-      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
-    </ul>
-    <button @click="changeGame">修改第一个游戏的样式</button>
   </div>
 
 </template>
 
-<!--语法糖写法-->
 <script setup>
-// 响应式--基本数据类型
+import {reactive, watch} from "vue";
-import {ref} from "vue";
-// 响应式--对象数据类型
-import {reactive} from "vue";
 
-let name = ref('ayf')
+let person = reactive({
-let age = ref(19)
+  name: '张三',
-let tel = '143334132144'
+  age: 18,
-let address = '北京昌平区'
+  car: {
-let car = reactive({brand: 'byd', price: 10000000})
+    c1: '奔驰',
-
+    c2: '宝马',
-let games = reactive([
+  }
-  {id: 'ayf002', name: '王者荣耀'},
+})
-  {id: 'ayf001', name: '原神'},
-  {id: 'ayf003', name: '三国志'},
-])
-
-console.log(name)
 
 function changeName() {
-  name.value = 'dddd'
+  person.name += '~~~'
 }
 
 function changeAge() {
-  age.value += 1
+  person.age += 1
-}
-
-function showTel() {
-  alert(tel)
-}
-
-function changeGame() {
-  games[0].name = '王者荣耀国际版'
 }
 
 function changeCar() {
-  games[0].name = '王者荣耀国际版'
+  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>
 
+
 <style scoped>
 .person {
   background-color: antiquewhite;

学习VUE/hello_vue3/笔记/computed计算属性.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="person">
+    姓：<input type="text" v-model="firstName"><br>
+    名：<input type="text" v-model="lastName"><br>
+    全名：<span>{{fullName}}</span>
+    <button @click="changeFullName">修改全名</button>
+  </div>
+
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+let firstName = ref('涨')
+let lastName = ref('三')
+
+// 只读的计算属性
+// let fullName = computed(()=>{
+//   return firstName.value + lastName.value
+// })
+
+// 可读可写计算属性
+let fullName = computed({
+  get(){
+    return firstName.value + lastName.value
+  },
+  set(val){
+    console.log(val)
+    firstName.value = 'dddddd'
+  }
+})
+
+function changeFullName(){
+  fullName.value = 'dddddd'
+}
+</script>
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>

学习VUE/hello_vue3/笔记/reactive监视某一个属性某个对象.vue

@@ -0,0 +1,67 @@
+<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>
+  </div>
+
+</template>
+
+<script setup>
+import {reactive, watch} from "vue";
+
+let person = reactive({
+  name: '张三',
+  age: 18,
+  car: {
+    c1: '奔驰',
+    c2: '宝马',
+  }
+})
+
+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>
+
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>

学习VUE/hello_vue3/笔记/ref对比reactive.vue

@@ -3,12 +3,11 @@
     <h2>{{ name }}</h2>
     <h2>{{ age }}</h2>
     <h2>{{ address }}</h2>
-    <h2>{{ car.price }}</h2>
+    <h2>{{ car.price }}-----{{ car.brand }}</h2>
-    <h2>{{ car.brand }}</h2>
     <button @click="changeName">修改名字</button>
     <button @click="changeAge">修改年龄</button>
     <button @click="showTel">查看联系方式</button>
-
+    <button @click="changeCar">修改汽车价格和名字</button>
     <ul>
       <li v-for="g in games" :key="g.id">{{ g.name }}</li>
     </ul>
@@ -17,34 +16,6 @@
 
 </template>
 
-<!--基本写法-->
-<!--<script>-->
-<!--export default {-->
-<!--  name: "Person",-->
-<!--  // setup() {-->
-<!--  //   // 数据-->
-<!--  //   let name = 'ayf'-->
-<!--  //   let age = 19-->
-<!--  //   let tel = '143334132144'-->
-<!--  //   let address = '北京昌平区'-->
-<!--  //-->
-<!--  //   function changeName() {-->
-<!--  //     name = 'dddd'-->
-<!--  //   }-->
-<!--  //-->
-<!--  //   function changeAge() {-->
-<!--  //     age += 1-->
-<!--  //   }-->
-<!--  //-->
-<!--  //   function showTel() {-->
-<!--  //     alert(tel)-->
-<!--  //   }-->
-<!--  //-->
-<!--  //   return {name: name, age: age, changeName, changeAge, showTel, address}-->
-<!--  // }-->
-<!--}-->
-<!--</script>-->
-
 <!--语法糖写法-->
 <script setup>
 // 响应式--基本数据类型
@@ -56,7 +27,7 @@ let name = ref('ayf')
 let age = ref(19)
 let tel = '143334132144'
 let address = '北京昌平区'
-let car = reactive({brand: 'byd', price: 10000000})
+let car = ref({brand: 'byd', price: 10000000})
 
 let games = reactive([
   {id: 'ayf002', name: '王者荣耀'},
@@ -81,6 +52,19 @@ function showTel() {
 function changeGame() {
   games[0].name = '王者荣耀国际版'
 }
+
+
+//字典覆盖方式
+function changeCar() {
+  // reactive 才能用分方式
+  // Object.assign(car, {brand: 'ft', price: 20000000})
+
+  // 不能这样写
+  // car = {brand: 'ft', price: 20000000}
+
+  // 但是ref可以
+  car.value = {brand: 'ft', price: 20000000}
+}
 </script>
 
 <style scoped>

学习VUE/hello_vue3/笔记/监视reactive定义的对象数据.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="person">
+    <h2>{{ me.name }}</h2>
+    <h2>{{ me.age }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeAll">同时修改名字年龄</button>
+  </div>
+
+</template>
+
+<script setup>
+import { reactive, watch } from "vue";
+let me = reactive({name: '比亚迪', age: 100})
+
+//方法
+function changeName(){
+  me.name = "丰田"
+}
+
+function changeAge(){
+  me.age = 101
+}
+
+function changeAll(){
+  me = Object.assign(me, {name: '特斯拉', age: 200})
+}
+
+//监视reactive定义的对象数据
+const stopWatch = watch(me, (nValue, oValue)=>{
+  console.log(nValue, oValue)
+  if(nValue >= 10){
+    stopWatch()
+  }
+}, {deep:true})
+</script>
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>

学习VUE/hello_vue3/笔记/监视ref定义的对象数据.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="person">
+    <h2>{{ me.name }}</h2>
+    <h2>{{ me.age }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeAll">同时修改名字年龄</button>
+  </div>
+
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+let me = ref({name: '比亚迪', age: 100})
+
+//方法
+function changeName(){
+  me.value.name = "丰田"
+}
+
+function changeAge(){
+  me.value.age = 101
+}
+
+function changeAll(){
+  me.value = {name: '特斯拉', age: 200}
+}
+
+//监视ref定义的对象数据
+const stopWatch = watch(me, (nValue, oValue)=>{
+  console.log(nValue, oValue)
+  if(nValue >= 10){
+    stopWatch()
+  }
+}, {deep:true})
+</script>
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>

学习VUE/hello_vue3/笔记/监视ref定义的数据.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="person">
+    <h2>当前求和：{{sum}}</h2>
+    <button @click="changeSum">点击我sum+1</button>
+  </div>
+
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+let sum = ref(0)
+
+//方法
+function changeSum(){
+  sum.value += 1
+}
+
+//监视ref定义的数据,当你使用 watch 监听一个响应式的数据或 ref 时，它返回一个函数，这个函数被称为停止函数（stop function）。调用这个函数可以停止对该响应式数据的监听。
+const stopWatch = watch(sum, (nValue, oValue)=>{
+  console.log(nValue, oValue)
+  if(nValue >= 10){
+    stopWatch()
+  }
+})
+</script>
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>