市丸银

2025年3月16日

摘要：一、区别 let route = useRoute() 注意： 1、params参数可选可不选，参数占位后面+? 2、path占位符 3、使用name 二、案例 1、跳转 <template> <ul> <RouterLink :to="{ name:'detail', params: news } 阅读全文

posted @ 2025-03-16 18:56 市丸银阅读(118) 评论(0) 推荐(0)

vue3 vite 路由query传参

摘要：一、区别没有 this.route let route = userRoute() route 相当于 this.route 二、路由 <template> <ul> <RouterLink :to="{ path:'/news/detail', query:news }" v-for="news 阅读全文

posted @ 2025-03-16 18:41 市丸银阅读(105) 评论(0) 推荐(0)

2025年3月15日

Vue3 路由 (ts)

摘要：一、安装 npm i vue-router 二、创建 1、新建 src/router/index.ts index.ts import {createRouter, createWebHashHistory} from 'vue-router' // 配置路由 const router = crea 阅读全文

posted @ 2025-03-15 17:16 市丸银阅读(81) 评论(0) 推荐(0)

Vue3 hooks 语法糖(setup)

摘要：作用：功能分开 1、创建 src/hooks/useSum.ts 2、uesSum.ts文件 import { onMounted, ref } from 'vue'; // 属性、方法写在一个函数里 export default ()=>{ let num = ref(0) function ad 阅读全文

posted @ 2025-03-15 16:40 市丸银阅读(45) 评论(0) 推荐(0)

Vue3 props 语法糖

摘要：父传子父组件 <template> <Person :age="age" /> </template> <script lang="ts" setup name="App"> import { ref } from 'vue'; import Person from './components/P 阅读全文

posted @ 2025-03-15 15:50 市丸银阅读(30) 评论(0) 推荐(0)

Vue3 DOM中的ref 子组件传值父组件

摘要：使用 <div ref="test"></div> import {ref} ... let test=ref() 子组件传值父组件子组件 <template> </template> <script lang="ts" setup name="Person"> import { reactiv 阅读全文

posted @ 2025-03-15 14:55 市丸银阅读(29) 评论(0) 推荐(0)

Vue3 对象结构赋值失去响应式 toRefs

摘要：一、原理 recative对象结构赋值 p = recative({k:v, a:b}) // p.v 和 p.a是响应式数据 let {k, a} = p // 相当于 let k = p.k let a =p.a， k和a不是响应式数据二、解决方案 p = recative({k:v, a:b 阅读全文

posted @ 2025-03-15 13:31 市丸银阅读(81) 评论(0) 推荐(0)

Vue3 reactive 重新分配对象

摘要： 1、问题 reactive重新分配对象，即赋值，数据失去响应式 2、举例 let a=reactive({xxx}) a = {新值} a变成非响应式数据 3、解决 let a = reactive({xx}) Object.assign(a, {新值}) a还是响应式数据阅读全文

posted @ 2025-03-15 13:12 市丸银阅读(94) 评论(0) 推荐(0)

Vue3 ref .value 自动添加

摘要：勾选阅读全文

posted @ 2025-03-15 12:57 市丸银阅读(97) 评论(0) 推荐(0)

setup 语法糖

摘要：一、语法糖 <script lang="ts" setup> </script> 优点：不用写return 缺点：组件名称冗余或无法命名二、解决方案 1、安装 npm i vite-plugin-vue-setup-extend 2、配置 vite.config.ts import VueSetu 阅读全文

posted @ 2025-03-15 11:43 市丸银阅读(58) 评论(0) 推荐(0)

知行合一

公告