![](https://img-blog.csdnimg.cn/e7c9114fd85840f5936cfd075037abb9.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 65
跟着菜鸟一步一步学习vue
厦门德仔
分享与交流:信息化建设、数字化转型、项目管理、流程梳理与再造、前后端开发、财务管理、数据库、网络、家庭教育与人生感悟等希望我的博客能带您愉快心情。
展开
-
【Vue3】学习笔记-新的组件
等待异步组件时渲染一些额外内容,让应用有更好的用户体验。什么是Teleport?移动到指定位置的技术。原创 2023-07-10 13:27:58 · 480 阅读 · 0 评论 -
【Vue3】学习笔记-Composition API 的优势
使用传统OptionsAPI中(配置型API),新增或者修改一个需求,就需要分别在data,methods,computed里修改。这张图告诉我们,我们在v2的时候功能放到配置中。它想告诉我们所有的功能都拆散了。如果功能很多,需要修改时候存在不便捷的问题。看这张图,一个data中保存着n个功能的数据,那么methods中保存着n个功能的方法,看起来十分的乱。原创 2023-07-07 08:23:46 · 208 阅读 · 0 评论 -
[Vue3]学习笔记-provide 与 inject
选项来提供数据,后代组件有一个。选项来开始使用这些数据。原创 2023-07-06 15:26:03 · 293 阅读 · 0 评论 -
[Vue3]学习笔记-customRef
按照文档中的说明:customRef 可以用来创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数,该函数接收 track 和trigger函数作为参数,并且应该返回一个带有 get 和 set 的对象。其实大致意思就是,我们可以按照自己的业务需求去自定义封装一个ref对象,在其内部可以使用get和 set去跟踪或更新数据,有点计算属性内味了哈~作用:创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。原创 2023-07-05 13:38:38 · 317 阅读 · 0 评论 -
【Vue3】学习笔记-toRaw 与 markRaw
【代码】【Vue3】学习笔记-toRaw 与 markRaw。原创 2023-07-05 10:32:14 · 139 阅读 · 0 评论 -
【Vue3】学习笔记-shallowReactive与ShallowRef
shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理。shallowReactive:只处理对象最外层属性的响应式(浅响应式)。原创 2023-07-04 10:38:10 · 282 阅读 · 0 评论 -
【Vue3】学习笔记-toRef
创建一个ref对象,其value值指向另一个对象中的某个属性。原创 2023-07-03 14:55:34 · 231 阅读 · 0 评论 -
【Vue3】学习笔记-自定义hook函数
本质是一个函数,把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。(但是mixins会组件的配置项覆盖。vue3使用了自定义hooks替代mixnins,hooks本质上是函数,引入调用。原创 2023-07-03 08:55:54 · 301 阅读 · 0 评论 -
【Vue3】学习笔记-生命周期
【代码】【Vue3】学习笔记-生命周期。原创 2023-06-30 10:42:54 · 291 阅读 · 0 评论 -
【Vue3】学习笔记-watch函数
情况四:监视reactive所定义的一个响应式数据中的某个属性。情况五:监视reactive所定义的一个响应式数据中的某些属性。情况三:监视reactive所定义的一个响应式数据的全部属性。2. 注意:强制开启了深度监视(deep配置无效)1. 注意:此处无法正确的获取oldValue。情况一:监视ref所定义的一个响应式数据。情况二:监视ref所定义的多个响应式数据。与Vue2.x中watch配置功能一致。原创 2023-06-29 13:47:15 · 339 阅读 · 0 评论 -
【Vue3】学习笔记-computed函数
与Vue2.x中computed配置功能一致。原创 2023-06-28 15:50:00 · 55 阅读 · 0 评论 -
[Vue3]学习笔记-reactive对比ref&setup的两个注意点
setup执行的时机在beforeCreate之前执行一次,this是undefined。setup的参数原创 2023-06-27 11:29:10 · 181 阅读 · 0 评论 -
【Vue3】学习笔记-Vue3.0中的响应式原理
console.log('有人修改了name属性,我发现了,我要去更新界面!console.log('有人修改了age属性,我发现了,我要去更新界面!set(value){ //有人修改name时调用。//通过Reflect.defineProperty去操作。set(value){ //有人修改age时调用。//有人修改p的某个属性、或给p追加某个属性时调用。get(){ //有人读取name时调用。get(){ //有人读取age时调用。//有人读取p的某个属性时调用。//有人删除p的某个属性时调用。原创 2023-06-26 11:35:34 · 314 阅读 · 0 评论 -
【Vue3】学习笔记-ref函数、reactive函数
【代码】【Vue3】学习笔记-ref函数、reactive函数。原创 2023-06-25 13:39:29 · 499 阅读 · 0 评论 -
【Vue3】学习笔记-拉开序幕的setup
组件中所用到的:数据、方法等等,均要配置在setup中。理解:Vue3.0中一个新的配置项,值为一个函数。原创 2023-06-21 15:22:17 · 96 阅读 · 0 评论 -
【Vue】学习笔记-创建Vue3.0工程
官方文档:vue --versionnpm install -g @vue/clivue create vue_testcd vue_testnpm run serve官方文档:vite官网:npm init vite-app cd npm installnpm run dev。原创 2023-06-20 15:57:46 · 505 阅读 · 0 评论 -
【Vue】学习笔记-Vue UI组件库
【代码】【Vue】学习笔记-Vue UI组件库。原创 2023-06-19 15:09:20 · 1520 阅读 · 0 评论 -
【Vue】学习笔记-Vue Router activated deactivated 路由守卫
activated 和 deactivated 是路由组件所独有的两个钩子,用于捕获路由组件的激活状态。分类:全局守卫、独享守卫、组件内守卫。作用:对路由进行权限控制。原创 2023-06-16 15:14:20 · 1371 阅读 · 1 评论 -
【Vue】学习笔记-VueRouter replace 编程式导航 缓存路由组件
总结:浏览记录本质是一个栈,默认push,点开新页面就会在栈顶追加一个地址,后退,栈顶指针向下移动,改为replace就是不追加,而将栈顶地址替换。可前进也可后退,n为正数前进n,为负数后退。作用:不借助实现路由跳转,让路由跳转更灵活。作用:让不展示的路由组件保持挂载,不被销毁。内传的对象与中的to相同。原创 2023-06-15 13:59:54 · 1340 阅读 · 1 评论 -
【Vue】学习笔记-基本路由 多级路由
src/router/index.js 该文件专门用于创建整个应用的路由器。2.应用插件`Vue.use(VueRouter)1.安装vue-router,命令。3.编写router配置项。2.跳转(要写完整路径)原创 2023-06-08 20:58:59 · 495 阅读 · 0 评论 -
【Vue】学习笔记-Vuex
之后在不同页面中引入getter actions mutations时,需要加上所属的模块名。src/store/index.js 该文件用于创建Vuex中最为核心的store。目的:让代码更好维护,让多种数据分录更加明确。为了解决不同模块命名冲突的问题,将不同模块的。开启命名空间后,组件中读取state数据。,否则参数是事件对象。修改store.js。原创 2023-06-02 09:40:08 · 347 阅读 · 0 评论 -
【Vue】学习笔记-slot插槽
slot>插槽:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件===>子组件分类:默认插槽、具名插槽、作用域插槽使用方式a.默认插槽b.具名插槽父组件指明放入子组件的哪个插槽slot=“footer”,如果是template可以写成v-slot:footerc.作用域插槽scop 用于父组件往子组件插槽放的html结构接收子组件的数据理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。原创 2023-05-29 20:57:10 · 807 阅读 · 0 评论 -
【Vue】学习笔记-Vue中的Ajax配置代理
vue.config.js 是一个可选的配置文件,如果项目的(和package.json同级的)根目录中存在这个文件,那么它会被@vue/cli-service 自动加载。当我们向服务器请求学生信息的时候,我们不直接请求服务器,而是找代理服务器,代理服务器收到了我们本次请求之后,他会帮我们把请求转发给服务器。同时服务器也会把数据交给本地浏览器。也就是说代理服务器是想要服务器上的/api1/students数据,但我们的本意是要/students的数据。原创 2023-05-27 20:53:41 · 1271 阅读 · 0 评论 -
(全网最详细!!)npm:无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
遇到问题:在终端中输入“sudo”/"npm"命令,出现错误提示:无法将“sudo”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。转载 2023-05-27 11:05:53 · 2236 阅读 · 0 评论 -
【Vue】学习笔记-Vue CLI $nextTick 过渡与动画
在下一次DOM更新结束后执行其指定的回调什么时候用:当数据改变后,要基于更新后的新DOM进行某些操作时,要在所指定的回调函数中执行。原创 2023-05-16 10:50:01 · 415 阅读 · 0 评论 -
【Vue】学习笔记-消息的订阅与发布
消息订阅与发布(pubsub)消息订阅与发布是一种组件间的通信的方式,适用于任意组件间通信。原创 2023-05-15 11:16:33 · 435 阅读 · 0 评论 -
【Vue】学习笔记-全局事件总线
钩子中,用**$off()**去解绑当前组件所用到的事件。,本质上就是一个对象,它必须满足以下条件。原创 2023-05-12 15:30:29 · 757 阅读 · 0 评论 -
【Vue】学习笔记-自定义事件
c.若想让自定义事件只能触发一次,可以使用once修饰符,或once方法src/components/Student.vuesrc/components/School.vue使用自定义事件优化Todo-Listsrc/App.vuesrc/components/MyHeader.vuesrc/components/MyFooter.vue原创 2023-05-11 10:56:56 · 435 阅读 · 0 评论 -
【Vue】 CLI WebStorage
(‘key’,‘value’)该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。(‘key’)该方法接受一个键名作为参数,并把该键名从存储中删除。(‘key’)该方法接受一个键名作为参数,返回键名对应的值。存储内容大小一般支持5MB左右(不同浏览器可能还不一样)属性来实现本地存储机制相关API。()该方法会清空存储中的所有数据。原创 2023-05-10 10:18:25 · 302 阅读 · 0 评论 -
【Vue】学习笔记-CLI Todo-List案例
组件化编码流程拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件 适用于a. 父组件==》子组件 通信b.子组件 ==》父组件 通信(要求父组件先给子组件一个函数)使用v-model 时要切记:v-model 绑定的值不能是props传递过的值,因为props是不可以修改的,props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做src/components/MyHeader.vuesrc/原创 2023-05-09 11:04:42 · 416 阅读 · 0 评论 -
【Vue】学习笔记-Vue CLI ref props mixin plugin scoped
ref被用来给元素或子组件注册引用信息(id的代替者)原创 2023-05-05 10:55:31 · 324 阅读 · 0 评论 -
【Vue】学习笔记-render 函数
vue inspect >output.js 可以查看到vue脚手架的默认配置,使用vue.config.js 可以对脚手架进行个性化定制和package.json同级目录,原创 2023-04-26 15:10:59 · 108 阅读 · 0 评论 -
【Vue】学习笔记-初始化脚手架
Vue脚手架隐藏了所有webpack 相关的配置,若想查看具体的webpack配置,请执行vue inspect >output.js。切换到创建项目的目录,使用命令创建项目。如果下载缓慢请配置npm淘宝镜像。启动项目npm ruan serve。打包项目 npm run build。全局安装@vue/cli。暂停项目 Ctrl+C。选择使用vue的版本。原创 2023-04-25 09:26:59 · 503 阅读 · 0 评论 -
【Vue】学习笔记-组件化编程
使用。原创 2023-04-24 08:30:33 · 454 阅读 · 0 评论 -
【Vue】学习笔记-Vue生命周期
总结常用的生命周期钩子a.mounted发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作b.清除定时器、解绑自定义事件、取消订阅消息等收尾工作关于销毁Vue实例a. 销毁后借助vue开发者工具看不到任何信息b. 销毁后自定义事件会失效,但原生DOM事件依然有效c. 一般不会在操作数据,因为即便操作数据,也不会再触发更新流程。原创 2023-04-21 08:39:38 · 503 阅读 · 0 评论 -
【Vue】学习笔记-内置指令/自定义指令
directives定义语法(1).局部指令:new Vue({指令名:配置对象})new Vue({指令名:回调函数})(2).全局指令:Vue.directive(指令名,配置对象)或 Vue.directive(指令名,回调函数)//指令与元素成功绑定时(一上来)},//指令所在元素被插入页面时},//指令所在的模板被重新解析时}) */配置对象中常用的3个回调:指令与元素成功绑定时调用。指令所在元素被插入页面时调用。原创 2023-04-19 08:56:08 · 264 阅读 · 0 评论 -
【Vue】收集表单数据 过滤器
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。'YYYY年MM月DD日 HH:mm:ss''YYYY年MM月DD日 HH:mm:ss''YYYY年MM月DD日 HH:mm:ss'////阻止Vue启动时生成提示。原创 2023-04-17 22:11:50 · 1056 阅读 · 0 评论 -
【Vue】学习笔记-列表渲染/数据监视
/ this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效。{id:'001',name:'马冬梅',age:19,sex:'女'},{id:'002',name:'周冬雨',age:20,sex:'女'},{id:'003',name:'周杰伦',age:21,sex:'男'},{id:'004',name:'温兆伦',age:22,sex:'男'}// Vue.set(this.student,'sex','男')原创 2023-04-17 08:25:06 · 552 阅读 · 0 评论 -
【Vue】学习笔记-绑定样式/条件样式
/el 用于指定当前Vue实例未哪个容器服务,值通常为css选择器字符串。document.getElementById(root)//el 用于指定当前Vue实例未哪个容器服务,值通常为css选择器字符串。document.getElementById(root)////阻止Vue启动时生成提示。////阻止Vue启动时生成提示。原创 2023-04-14 08:15:00 · 715 阅读 · 0 评论 -
【Vue】学习笔记-计算属性/侦听属性
通常在UI上操作数据时候,会把计算值动态显示在UI上。如姓,名。用户在修改姓或名时,全名就自动跟随着变化。原创 2023-04-13 09:35:49 · 220 阅读 · 0 评论