vue学习

学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Father.vue

@@ -33,20 +33,22 @@
 </template>
 
 <script setup lang="ts" name="Father">
-  import Game from './Game.vue'
+import Game from './Game.vue'
 </script>
 
 <style scoped>
-  .father {
+.father {
-    background-color: rgb(165, 164, 164);
+  background-color: rgb(165, 164, 164);
-    padding: 20px;
+  padding: 20px;
-    border-radius: 10px;
+  border-radius: 10px;
-  }
+}
-  .content {
+
-    display: flex;
+.content {
-    justify-content: space-evenly;
+  display: flex;
-  }
+  justify-content: space-evenly;
-  img,video {
+}
-    width: 100%;
+
-  }
+img, video {
+  width: 100%;
+}
 </style>

学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Game.vue

@@ -6,27 +6,29 @@
 </template>
 
 <script setup lang="ts" name="Game">
-  import {reactive} from 'vue'
+import {reactive} from 'vue'
-  let games = reactive([
+
-    {id:'asgytdfats01',name:'英雄联盟'},
+let games = reactive([
-    {id:'asgytdfats02',name:'王者农药'},
+  {id: 'asgytdfats01', name: '英雄联盟'},
-    {id:'asgytdfats03',name:'红色警戒'},
+  {id: 'asgytdfats02', name: '王者农药'},
-    {id:'asgytdfats04',name:'斗罗大陆'}
+  {id: 'asgytdfats03', name: '红色警戒'},
-  ])
+  {id: 'asgytdfats04', name: '斗罗大陆'}
+])
 </script>
 
 <style scoped>
-  .game {
+.game {
-    width: 200px;
+  width: 200px;
-    height: 300px;
+  height: 300px;
-    background-color: skyblue;
+  background-color: skyblue;
-    border-radius: 10px;
+  border-radius: 10px;
-    box-shadow: 0 0 10px;
+  box-shadow: 0 0 10px;
-  }
+}
-  h2 {
+
-    background-color: orange;
+h2 {
-    text-align: center;
+  background-color: orange;
-    font-size: 20px;
+  text-align: center;
-    font-weight: 800;
+  font-size: 20px;
-  }
+  font-weight: 800;
+}
 </style>

学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Father.vue

@@ -3,6 +3,7 @@
     <h3>父组件</h3>
     <div class="content">
       <Category title="热门游戏列表">
+<!--        根据子组建的 <slot>默认内容</slot> 显示内容-->
         <ul>
           <li v-for="g in games" :key="g.id">{{ g.name }}</li>
         </ul>

学习VUE/hello_vue3/src/utils/emitter.ts

@@ -0,0 +1,29 @@
+// 引入mitt
+import mitt from 'mitt'
+
+// 调用mitt得到emitter，emitter能：绑定事件、触发事件
+const emitter = mitt()
+
+/* // 绑定事件
+emitter.on('test1',()=>{
+  console.log('test1被调用了')
+})
+emitter.on('test2',()=>{
+  console.log('test2被调用了')
+})
+
+// 触发事件
+setInterval(() => {
+  emitter.emit('test1')
+  emitter.emit('test2')
+}, 1000);
+
+setTimeout(() => {
+  // emitter.off('test1')
+  // emitter.off('test2')
+  emitter.all.clear()
+}, 3000); */
+
+
+// 暴露emitter
+export default emitter

学习VUE/hello_vue3/笔记/shallowRef与shallowReactive.vue

@@ -0,0 +1,27 @@
+import { shallowRef } from 'vue';
+
+const user = shallowRef({ name: 'Alice', age: 30 });
+
+// 修改 user 本身会触发更新
+user.value = { name: 'Bob', age: 25 }; // 响应式触发
+
+// 修改 user.value 的属性不会触发更新
+user.value.name = 'Charlie'; // 不会触发响应式更新
+
+
+import { shallowReactive } from 'vue';
+
+const user = shallowReactive({
+name: 'Alice',
+age: 30,
+address: {
+city: 'New York',
+zip: '10001'
+}
+});
+
+// 修改一级属性会触发响应式更新
+user.name = 'Bob'; // 响应式触发
+
+// 修改嵌套属性不会触发响应式更新
+user.address.city = 'Los Angeles'; // 不会触发响应式更新