随笔分类 - vue
摘要：什么是Vue.js vue-property-decorator? vue-property-decorator是一个用于编写基于类的Vue组件的库。它为我们提供了一些简单而强大的修饰器，用于定义组件的属性、方法和生命周期钩子。 @Prop装饰器 @Prop装饰器用于定义组件的属性。属性可以是父组件
阅读全文
摘要：一 删除代理 yarn config delete proxy 二 设置淘宝镜像 yarn config set registry https://registry.npm.taobao.org/ 三 设置超时时间 yarn install --network-timeout 1000000
阅读全文
摘要：一、Vue3介绍 关于vue3的重构背景，看看尤大怎么说： 「Vue 新版本的理念成型于 2018 年末，当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，但在这段时期，前端世界已经今昔非比了 在我们更新（和重写）Vue 的主要版本时，主要考虑两点因素：首先是新的
阅读全文
摘要：一、是什么 权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源 而前端权限归根结底是请求的发起权，请求的发起可能有下面两种形式触发 页面加载触发 页面上的按钮点击触发 总的来说，所有的请求发起都触发自前端路由或视图 所以我们可以从这两方面入手，对触发权限的源头进行控制，最
阅读全文
摘要：一. Vuex是什么Vue全局事件总线Vuex状态管理何时使用Vuex二. 纯vue组件案例计算总数案例添加人员案例三. Vuex工作原理和流程第一种工作流程第二种工作流程生活化的Vuex工作原理四. 在项目中引入Vuex安装Vuex创建store在Vue中挂载store五. Vuex的核心属性用法
阅读全文
摘要：this.$router.push进行编程式路由跳转传参router中路由配置params第一种传参路由配置 { path: '/homeDetails/:id',//要传递的参数前面加： component: () =>import ('@/views/home/homeDetails.vue')
阅读全文
摘要：router-link 进行页面按钮式路由跳转传参router中路由配置父组件home点击传参子组件homeDetails接受参数router中路由配置 { path: '/homeDetails/:id',//params传参 name:'homeDetails' component: () =>
阅读全文
摘要：简单来说路由导航守卫就是.可以让我们对用户要跳转的路由做一次检查，符合条件的就放行，不符合条件则强制用户跳转至登录页面,说白了就时路由导航守卫是为了路由跳转之前做的检查及操作 1.全局前置守卫 router.beforeEachrouter.beforeEach 注册一个全局前置守卫： const
阅读全文
摘要：Vue除了核心功能默认内置的指令 ，Vue 也允许注册自定义指令。自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。 自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。 写一个自定义指令的两种方式： 全局指令： 通过 Vu
阅读全文
摘要：自定义插件的用法a)插件通常会为 Vue 添加全局功能，一般是添加全局方法/全局指令/过滤器等 b)Vue 插件有一个公开方法 install ，通过 install 方法给 Vue 添加全局功能 c)通过全局方法 Vue.use() 使用插件，它需要在你调用 new Vue() 启动应用之前完成自
阅读全文
摘要：vite创建vue3+ts项目为何选择vite：vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动： 快速的冷启动，不需要等待打包操作；即时的热模块更新，替换性能和模块数量的解耦让更新飞起；真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。（平均一秒r
阅读全文
摘要：选项 API 生命周期选项和组合式 API 之间的映射 beforeCreate -> use setup() created -> use setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBef
阅读全文
摘要：1.reactive 2.toRaw 3.readonly 4.isPorxy 5.isReactive 6.isReadonly 7.ref 8.unref 9.toRef 10.toRefs reactive 返回对象的响应式副本 const obj = reactive({ count: 0
阅读全文
摘要：vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式，今天我们来聊聊两种定义定义数据方式有什么不同 如上代码，我们使用变量声明的方式，ref的方式，reactive的方式定义的三个变量，num1,num2,num3 我们发现使用ref定义的数据，打印结果是一个被对象包裹的
阅读全文
摘要：ref 有三种用法： 1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素 2、ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了。
阅读全文
摘要：一、什么是vue.nextTick() 定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码； 理解：n
阅读全文
摘要：从 vue2 升级到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的选项式API。由于选项式API一个变量存在于多处，如果出现问题时，就需要去多个函数内检查，项目较大时，遇到问题，增加排故的难度。 所以 vue3 中新增了 setup 配置项，用它来写组合式AP
阅读全文
摘要：问题我们本地调试一般都是 npm run serve，然后打开 本机ip:8080（localhost:8080）对吧，这时候我们要调接口调试，后端的接口的地址可能在测试环境，也可能是自己电脑的 ip，总之不是你的 lcoalhost:8080，那么你调接口就会产生跨域，那么怎么办呢？就需要prox
阅读全文
摘要：Vue双向绑定的原理一、在讲vue双向绑定之前我们需要来了解下MVVM模式MVVM（Model-View-ViewModel）是对 MVC（Model-View-Control）和 MVP（Model-View-Presenter）的进一步改进。 View：视图层（UI 用户界面）ViewModel
阅读全文
摘要：本文介绍在vue3的setup中使用composition API获取元素节点的几种方法： 静态绑定 仅仅需要申明一个ref的引用，用来保存元素，在template中，不必bind引用(:ref="domRef")，只需要声明一个同名的ref属性(ref="domRef")即可。 <script s
阅读全文
