vue3

JS初级/JS基础/16.数组的方法.html

@@ -31,7 +31,7 @@
       var list1 = ["ab", "cd", 99, true, "sun"];
       console.log(list1, "原数组");
       list1.splice(1, 1);
-      //   list1.splice(2,4,'我的内容')
+        // list1.splice(2,4,'我的内容')
       console.log(list1, "新数组");
       // 8.slice 截取 不对原数组进行改变 反出截取后的内容
       // 一个值 从第几个下标开始截取 截取到最后  

vue3/my_project/src/App.vue

@@ -1,34 +1,22 @@
 <template>
    <div id="app">
     <!-- html -->
-    <!-- <Demo></Demo> -->
+    <Demo2></Demo2>
     <!-- <Demo1></Demo1> -->
-    <!-- <Demo2></Demo2> -->
-    <!-- <Demo3></Demo3> -->
-    <!-- <Demo4></Demo4> -->
-    <!-- <Demo5></Demo5> -->
-    <Demo6></Demo6>
+    <!-- <Demo></Demo> -->
    </div>
 </template>
 
 <script>
-import Demo from './components/Demo.vue'
-import Demo1 from './components/Demo1.vue'
 import Demo2 from './components/Demo2.vue'
-import Demo3 from './components/Demo3.vue'
-import Demo4 from './components/Demo4.vue'
-import Demo5 from './components/Demo5.vue'
-import Demo6 from './components/Demo6.vue'
+import Demo1 from './components/Demo1.vue'
+// import Demo from './components/Demo.vue'
 export default {
     // js或ts
-    components: {
-        Demo,
-        Demo1,
-        Demo2,
-        Demo3,
-        Demo4,
-        Demo5,
-        Demo6
+    components: {   
+        // Demo,
+        // Demo1,
+        Demo2
     },
 }
 </script>

vue3/my_project/src/components/Demo.vue

@@ -1,43 +1,33 @@
 <template>
-  <div class="demo1">
-    <h2>姓名：{{ name }}</h2>
-    <h2>年龄：{{ age }}</h2>
-    <h2>性别：{{ sex }}</h2>
-    <button @click="changeName">修改姓名</button>
+    <!-- toRefs与toRef -->
+  <div class="demo">
+    <h2>姓名：{{name}}</h2>
+    <h2>年龄：{{age}}</h2>
+    <button @click="changeName">修改名字</button>
     <button @click="changeAge">修改年龄</button>
-    <button @click="changeSex">修改性别</button>
   </div>
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            name:"孙悟空",
-            age:18,
-            sex:"男"
-        }
-    },
-    methods:{
-        changeName() {
-            this.name = '猪八戒'
-        },
-        changeAge() {
-            this.age = 20
-        },
-        changeSex() {
-            this.sex = '女'
-        },
+<script setup lang="ts" name="Demo">
+    import {ref,reactive,toRefs,toRef} from 'vue'; 
+    // let name =ref('孙悟空');
+    // let age = ref(18);
+    let person = reactive({
+        name:"猪八戒",
+        age:20
+    })
+    let {name} = toRefs(person);
+    let age = toRef(person,'age')
+    console.log(name,age);
+    function changeName(){
+        // name = '唐僧'
+        name.value = '唐僧'
+    }
+    function changeAge(){
+        age.value = 21
     }
-}
 </script>
 
-<style scoped>
-    .demo1 {
-        background: #00f;
-        padding: 20px;
-    }
-    button {
-        margin-left: 20px;
-    }
+<style>
+
 </style>

vue3/my_project/src/components/Demo1.vue

@@ -1,37 +1,45 @@
 <template>
-  <div class="demo1">
-    <h3>姓名：{{ name }}</h3>
-    <h3>年龄：{{ age }}</h3>
-    <h3>性别：{{ sex }}</h3>
-    <button @click="changeName">修改姓名</button>
-    <button @click="changeAge">修改年龄</button>
-    <button @click="changeSex">修改性别</button>
+  <!-- 计算属性：computed：缓存  -->
+  <div id="demo1">
+    姓：<input type="text" v-model="firstName" />
+    <br />
+    名：<input type="text" v-model="lastName" />
+    <br />
+    全名：{{ fullName }}
+    <button @click="changeName">修改名字</button>
   </div>
 </template>
 
-<script lang="ts">
-export default {
-  // 语法糖
-  setup() {
-    // setup语法中 不支持使用this
-    let name = "孙悟空";
-    let age = 18;
-    let sex = "男";
-
-    function changeName() {
-      console.log("走进来");
-      name = "猪八戒";
-      console.log(name);
-    }
-
-    return {
-      name,
-      age,
-      sex,
-      changeName,
-    };
+<script setup lang="ts" name="Demo1">
+import { ref, reactive, computed } from "vue";
+let firstName = ref("hu");
+let lastName = ref("图图");
+//   let fullName = computed(()=>{
+//     return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
+//   })
+let fullName = computed({
+  get() {
+    return (
+      firstName.value.slice(0, 1).toUpperCase() +
+      firstName.value.slice(1) +
+      "-" +
+      lastName.value
+    );
+  },
+  set(val) {
+    let [str1, str2] = val.split("-");
+    firstName.value = str1;
+    lastName.value = str2;
+    console.log("执行了方法");
   },
-};
+});
+function changeName() {
+  fullName.value = "li-si";
+}
+//   function getName() {
+//     console.log("执行了方法")
+//     return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
+//   }
 </script>
 
 <style></style>

vue3/my_project/src/components/Demo2.vue

@@ -1,30 +1,35 @@
 <template>
-  <div class="demo1">
-    <h3>姓名：{{ names }}</h3>
-    <h3>年龄：{{ age }}</h3>
-    <h3>性别：{{ sex }}</h3>
-    <button @click="changeName">修改姓名</button>
-    <button @click="changeAge">修改年龄</button>
-    <button @click="changeSex">修改性别</button>
-
+  <!-- watch -->
+  <div class="demo2">
+    数值：{{aa}}
+    <button @click="changeNum">递加</button>
   </div>
 </template>
-<script setup lang="ts" name="Person">
-    let names = "孙悟空";
-    let age = 18;
-    let sex = "男";
 
-    function changeName() {
-        names = "猪八戒";
-    }
-    function changeAge() {
-        age = 20;
-    }
-    function changeSex() {
-        sex = "女";
+<script setup name="Demo2" lang="ts">
+    import {ref,watch} from 'vue'
+    let aa = ref(10);
+    function changeNum() {
+        if(aa.value <=   30 ){
+            aa.value += 10;
+        }
     }
-
-
+   const stop = watch(aa,(newValue,oldValue) =>{
+    // console.log(aa)
+        // 情况一：当watch监听的是基本数据类型时 
+        // newValue 新值
+        // oldValue 旧值
+        // value 默认走新值
+        console.log(newValue,oldValue,);
+        if(newValue > 30) {
+            // alert("停止")
+            // newValue = 100;
+            stop();
+            console.log("走进来")
+        }
+    })
 </script>
 
-<style></style>
+<style>
+
+</style>

vue3/my_project/归档/setup+ref+reactive/Demo.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="demo1">
+    <h2>姓名：{{ name }}</h2>
+    <h2>年龄：{{ age }}</h2>
+    <h2>性别：{{ sex }}</h2>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeSex">修改性别</button>
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            name:"孙悟空",
+            age:18,
+            sex:"男"
+        }
+    },
+    methods:{
+        changeName() {
+            this.name = '猪八戒'
+        },
+        changeAge() {
+            this.age = 20
+        },
+        changeSex() {
+            this.sex = '女'
+        },
+    }
+}
+</script>
+
+<style scoped>
+    .demo1 {
+        background: #00f;
+        padding: 20px;
+    }
+    button {
+        margin-left: 20px;
+    }
+</style>

vue3/my_project/归档/setup+ref+reactive/Demo1.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="demo1">
+    <h3>姓名：{{ name }}</h3>
+    <h3>年龄：{{ age }}</h3>
+    <h3>性别：{{ sex }}</h3>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeSex">修改性别</button>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  // 语法糖
+  setup() {
+    // setup语法中 不支持使用this
+    let name = "孙悟空";
+    let age = 18;
+    let sex = "男";
+
+    function changeName() {
+      console.log("走进来");
+      name = "猪八戒";
+      console.log(name);
+    }
+
+    return {
+      name,
+      age,
+      sex,
+      changeName,
+    };
+  },
+};
+</script>
+
+<style></style>

vue3/my_project/归档/setup+ref+reactive/Demo2.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="demo1">
+    <h3>姓名：{{ names }}</h3>
+    <h3>年龄：{{ age }}</h3>
+    <h3>性别：{{ sex }}</h3>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeSex">修改性别</button>
+
+  </div>
+</template>
+<script setup lang="ts" name="Person">
+    let names = "孙悟空";
+    let age = 18;
+    let sex = "男";
+
+    function changeName() {
+        names = "猪八戒";
+    }
+    function changeAge() {
+        age = 20;
+    }
+    function changeSex() {
+        sex = "女";
+    }
+
+
+</script>
+
+<style></style>