- 博客(258)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 自定义hook
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。main.js//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)//挂载App.vue<template>isShowDemo">切换隐藏/显示</button><hr>
2025-03-23 22:55:12
800
原创 VUE 3 的计算属性 computed
姓：<input type="text" v-model="person.firstName">全名：<input type="text" v-model="person.fullName">名：<input type="text" v-model="person.lastName">//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数。//计算属性——简写（没有考虑计算属性被修改的情况）
2025-03-23 16:51:03
314
原创 响应式原理 （vue2.x、Vue3.0对比）
console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！console.log('有人修改了name属性，我发现了，我要去更新界面！console.log('有人修改了age属性，我发现了，我要去更新界面！console.log(`有人读取了p身上的${propName}属性`)set(value){ //有人修改name时调用。get(){ //有人读取name时调用。
2025-03-23 14:46:56
701
原创 VUE3 reactive函数
h3>测试的数据c：{{person.job.a.b.c}}</h3><h3>工作薪水：{{person.job.salary}}</h3><h3>工作种类：{{person.job.type}}</h3><h3>爱好：{{person.hobby}}</h3><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2>person.job.type = 'UI设计师'hobby:['抽烟','喝酒','烫头']<h1>一个人的信息</h1>
2025-03-23 13:43:44
326
原创 VUE3 ref 函数
main.js//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数import { createApp } from 'vue'import App from './App.vue'//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)const app = createApp(App)//挂载app.mount('#app') App.vue<template><h1>一个人的信息</h1><h2>姓名：{{name}}</h2><h2>年龄：{{
2025-03-23 09:24:22
358
原创 VUE3 Composition API setup
说话(Vue2所配置的——sayWelcome)</button><button @click="sayHello">说话(Vue3所配置的——sayHello)
2025-03-22 23:21:51
687
原创 VUE 3 分析工程结构
/创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数。-- Vue3组件中的模板结构可以没有根标签 -->
2025-03-22 22:49:35
162
原创 创建Vue3.0工程 使用 vue-cli 创建 和 使用 vite 创建
【代码】创建Vue3.0工程 使用 vue-cli 创建 和 使用 vite 创建。
2025-03-22 18:54:56
738
原创 Vue3简介
2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）耗时2年多、2600+次提交30+个RFC600+次PR99位贡献者。
2025-03-22 18:40:42
222
原创 路由器的两种工作模式 hash 和 history
2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。1. 地址中永远带着#号，不美观。2. 兼容性和hash模式相比略差。1. 地址干净，美观。路由器的两种工作模式。
2025-03-22 17:54:03
207
原创 组件内路由守卫 demo beforeRouteEnter beforeRouteLeave
/props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。-- 跳转路由并携带params参数，to的字符串写法 -->-- 跳转路由并携带params参数，to的对象写法 -->{id:'001',title:'消息001'},{id:'002',title:'消息002'},// console.log('Message组件即将被销毁了'){id:'003',title:'消息003'}
2025-03-22 17:21:27
722
原创 独享路由守卫 beforeEnter
/props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用。//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用。console.log('前置路由守卫',to,from)//props的第三种写法，值为函数。
2025-03-21 13:42:17
373
原创 全局路由守卫 全局前置路由守卫 router.beforeEach 全局后置路由守卫 router.afterEach
push查看</button><button @click="test">测试一下go</button><button @click="forward">前进</button>{id:'001',title:'消息001'},{id:'002',title:'消息002'},<button @click="back">后退
2025-03-21 11:38:38
952
原创 缓存路由组件
- 缓存多个路由组件 -->-- 缓存一个路由组件。<h2>Home组件内容</h2>作用：让不展示的路由组件保持挂载，不被销毁。News 是组件的名称。
2025-03-20 20:46:52
229
原创 router-link的replace属性（控制路由跳转时操作浏览器历史记录的模式）
消息标题：{{title}}</li><li>消息编号：{{id}}
2025-03-20 20:20:59
962
原创 路由的params参数
消息标题：{{$route.params.title}}</li>{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'}<li>消息编号：{{$route.params.id}}
2025-03-20 15:51:03
971
原创 命名路由（简化路由的跳转）
消息标题：{{$route.query.title}}</li><li>消息编号：{{$route.query.id}}
2025-03-20 15:38:18
1010
原创 VUE 路由的query参数 （三层路由+query传参）
消息标题：{{$route.query.title}}</li>{id:'003',title:'消息003'}<li>消息编号：{{$route.query.id}}
2025-03-20 15:26:47
1061
原创 嵌套（多级）路由
- Vue中借助router-link标签实现路由的切换 -->console.log('About组件挂载完毕了',this)console.log('Home组件挂载完毕了',this)-- 原始html中我们使用a标签实现页面的跳转 -->-- 指定组件的呈现位置 --><h2>Home组件内容</h2><h2>我是About的内容</h2>// 该文件专门用于创建整个应用的路由器。//引入VueRouter。//关闭Vue的生产提示。//创建并暴露一个路由器。
2025-03-20 14:40:47
905
原创 VUE 路由介绍以及Demo
1. 一个路由就是一组映射关系（key - value）2. key 为路径, value 可能是 function 或 component。
2025-03-20 10:15:24
882
原创 VUEX 模块化+命名空间 DEMO
当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button><h3 style="color:red">Count组件求和为：{{sum}}</h3><button @click="addWang">添加一个姓王的人
2025-03-19 22:57:20
623
原创 vuex中四个map方法的使用
/借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)//借助mapGetters生成计算属性，从getters中读取数据。
2025-03-19 22:02:30
1612
原创 VUEX 中 getters的使用
h3>当前求和放大10倍为：{{$store.getters.bigSum}}</h3><h1>当前求和为：{{$store.state.sum}}</h1>console.log('mutations中的JIAN被调用了')console.log('mutations中的JIA被调用了')console.log('actions中的jian被调用了')console.log('actions中的jia被调用了')//准备getters——用于将state中的数据进行加工。sum:0 //当前的和。
2025-03-18 22:56:40
621
原创 求和案例VueX版
console.log('actions中的jiaWait被调用了')console.log('mutations中的JIAN被调用了')console.log('mutations中的JIA被调用了')console.log('actions中的jian被调用了')console.log('actions中的jia被调用了')//准备mutations——用于操作数据（state）//该文件用于创建Vuex中最为核心的store。//准备actions——用于响应组件中的动作。sum:0 //当前的和。
2025-03-18 21:16:58
410
原创 安装vuex的插件 和 vuex 的基本使用
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)// console.log('mutations中的JIA被调用了',state,value)//准备mutations对象——修改state中的数据。
2025-03-18 20:48:32
342
原创 作用域插槽 和 插槽总结
父组件 ===> 子组件我是默认的一些内容</slot><slot name="center">插槽默认内容...</slot><slot name="footer">插槽默认内容...</slot><slot>插槽默认内容...
2025-03-18 09:19:18
570
原创 具名插槽 solt
经典</a><a href="http://www.atguigu.com">热门</a><a href="http://www.atguigu.com">推荐</a><a href="http://www.atguigu.com">单机游戏</a><a href="http://www.atguigu.com">网络游戏
2025-03-18 08:53:47
345
原创 github搜索案例 年久失修的 vue-resource
h1 v-show="info.isLoading">加载中....</h1>console.log('请求成功了')<h1 v-show="info.isFirst">欢迎使用！//请求成功后更新List的数据。//请求后更新List的数据。//请求前更新List的数据。-- 展示用户列表 -->-- 展示错误信息 -->-- 展示欢迎词 -->-- 展示加载中 -->安装 vue-resource。//关闭Vue的生产提示。
2025-03-17 22:08:26
713
原创 github搜索案例 配置代理服务器
this.info = {...this.info,...dataObj} // es6语法只修改传过来的参数的内容。<h1 v-show="info.isLoading">加载中....</h1>Vue.prototype.$bus = this //配置消息总线。//请求成功后更新List的数据。//请求后更新List的数据。//请求前更新List的数据。-- 展示用户列表 -->-- 展示错误信息 -->-- 展示欢迎词 -->-- 展示加载中 -->//关闭Vue的生产提示。
2025-03-17 21:54:25
312
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人