11 2021 档案

摘要:vue3 学习笔记(九)——script setup 语法糖用了才知道有多爽刚开始使用 script setup 语法糖的时候,编辑器会提示这是一个实验属性,要使用的话,需要固定 vue 版本。 在 6 月底,该提案被正式定稿,在 v3.1.3 的版本上,继续使用但仍会有实验性提案的提示,在 V3.2 中,才会去除提示并移除一些废弃的 API。 script setup 是 阅读全文
posted @ 2021-11-29 09:33 前端人 阅读(2544) 评论(1) 推荐(4) 编辑
摘要:vue 3 学习笔记 (八)——provide 和 inject 用法及原理在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传很多次,会很麻烦。 像这种情况,可以使用 provide 和 inject 解决这种问题,不论组件嵌 阅读全文
posted @ 2021-11-26 09:06 前端人 阅读(5078) 评论(0) 推荐(2) 编辑
摘要:vue 3 学习笔记 (七)——vue3 中 computed 新用法vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 中的写法,让您快速掌握 vue3 中 computed 的新用法。 组合式 API 中使用 com 阅读全文
posted @ 2021-11-25 09:34 前端人 阅读(19717) 评论(0) 推荐(4) 编辑
摘要:vue 3 学习笔记 (六)——watch 、watchEffect 新用法选项式API与之前写法相同,本篇文章主要通过 Options API 和 Composition API 对比 watch 的使用方法,让您快速掌握 vue3 中 watch 新用法。建议收藏! 一、watch 新用法 选项式API中,watch 使用 watch:{ mood(curVal,pre 阅读全文
posted @ 2021-11-23 11:47 前端人 阅读(1875) 评论(1) 推荐(2) 编辑
摘要:问题描述: 升级脚手架 vue-cli 4.5.15 版本之后,使用 template 时报错: [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. 阅读全文
posted @ 2021-11-22 15:06 前端人 阅读(1570) 评论(0) 推荐(0) 编辑
摘要:vue3 学习笔记 (五)——vue3 的 setup 如何实现响应式功能?在之前 vue2 中,data 返回的数据,可以直接进行双向绑定使用,如果我们把 setup 中数据类型直接双向绑定,发现变量并不能实时响应。接下来就看看setup如何实现data的响应式功能? 阅读全文
posted @ 2021-11-22 09:22 前端人 阅读(2464) 评论(5) 推荐(0) 编辑
摘要:vue3 学习笔记 (四)——vue3 setup() 高级用法本篇文章干货较多,建议收藏! 从 vue2 升级到 vue3,vue3 是可以兼容 vue2 的,所以 vue3 可以采用 vue2 的选项式API。由于选项式API一个变量存在于多处,如果出现问题时,就需要去多个函数内检查,项目较大时,遇到问题,增加排故的难度。所以 vue3 中新增了 setup 阅读全文
posted @ 2021-11-19 08:37 前端人 阅读(6731) 评论(0) 推荐(3) 编辑
摘要:vue3 学习笔记 (三)——vue3 自定义指令自定义指令分为全局和局部两种类型,大家并不陌生。今天我们就讲讲在 vue3 中,自定义指令定义、使用以及钩子函数都有哪些变化? 一、注册自定义指令 以下实例都是实现一个输入框自动获取焦点的自定义指令。 1.1、全局自定义指令 在vue2中,全局自定义指令通过 directive 挂载到 Vue 对象 阅读全文
posted @ 2021-11-17 08:48 前端人 阅读(1692) 评论(0) 推荐(1) 编辑
摘要:vue3 学习笔记 (二)——axios 的使用有变化吗?本篇文章主要目的就是想告诉我身边,正在学 vue3 或者 准备学 vue3 的同学,vue3中网络请求axios该如何使用,防止接触了一点点 vue3 的同学会有个疑问?生命周期、router 、vux使用都改变了,那 axios 使用有没有啥改变? 小姐姐 使用 axios 之前,需要先安装好。 阅读全文
posted @ 2021-11-16 15:17 前端人 阅读(821) 评论(0) 推荐(1) 编辑
摘要:vue.js3 学习笔记 (一)——mixin 混入vue 2 中采用选项式API。如:data、methods、watch、computed以及生命周期钩子函数等等。 mixin 混入,提供了一种非常灵活的方式,来分发 vue 组件中的可复用功能,一个mixin 对象可以包含任意组件选项,当组件使用 mixin 对象时,所有的 mixin 对象的选 阅读全文
posted @ 2021-11-15 09:38 前端人 阅读(612) 评论(0) 推荐(1) 编辑
摘要:vuex4 极速入门到上手vuex4 是 vue3的兼容版本,提供了和vuex3 的相同API。因此我们可以在 vue3 中复用之前已存在的 vuex 代码。 一、安装以及初始化 vuex4安装: npm install vuex@next 为了向vue3初始化方式看齐,vuex4 初始化方式做了相应的变化,使用新的 cre 阅读全文
posted @ 2021-11-12 09:30 前端人 阅读(1112) 评论(0) 推荐(1) 编辑
摘要:vue-router 4 你真的熟练吗?虽然 vue-router 4 大多数 API 保持不变,但是在 vue3 中以插件形式存在,所以在使用时有一定的变化。接下来就学习学习它是如何使用的。 一、安装并创建实例 安装最新版本的 vue-router npm install vue-router@4 或 yarn add vue-rout 阅读全文
posted @ 2021-11-08 09:14 前端人 阅读(762) 评论(0) 推荐(1) 编辑
摘要:Vue3.x 关于组件的那些变化(新手必看篇)一、组件内的 data 为什么总是函数形式? 我们试着先做一个计数器案例,把 data 的返回形式修改成一个对象。具体的代码如下: <template> <div> <button @click="num++">+</button> {{num}} <button @click="num--">-< 阅读全文
posted @ 2021-11-04 09:02 前端人 阅读(881) 评论(1) 推荐(1) 编辑
摘要:极速上手 VUE 3 —— teleport传送门组件一、teleport 介绍 teleport 传送门组件,提供一种简洁的方式,可以指定它里面的内容的父元素。通俗易懂地讲,就是 teleport 中的内容允许我们控制在任意的DOM中,使用简单。 使用语法: <teleport to="body"> <div> 需要创建的内容 </div> </te 阅读全文
posted @ 2021-11-03 11:48 前端人 阅读(1318) 评论(0) 推荐(1) 编辑
摘要:极速上手 VUE 3—v-model 的使用变化本篇文章主要介绍 v-model 在 Vue2 和 Vue3 中使用变化。 一、Vue2 中 v-model 的使用 v-model 是语法糖,本质还是父子组件间的通信。父子组件通信时有两种方式: 父给子传值:通过 props 子给父传值:通过 Events up,使用 $emit 触发事件。 1. 阅读全文
posted @ 2021-11-02 10:24 前端人 阅读(1113) 评论(1) 推荐(1) 编辑