![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE3.x
文章平均质量分 76
前端人
专注前端开发技术分享,助力初学者更好成长
展开
-
Vue3 全家桶,从 0 到 1 实战项目
前端发展百花放,一技未熟百技出。未知何处去下手,关注小编胜百书。 我是前端人,专注分享前端内容!本篇文章主要是,使用 vite 创建一个vue3 项目,实践 vie-router4 vuex4 结合 componsition API 的使用。目的是让未接触过 vue3 的同学快速上手。一、vue3.0 创建项目vue3 创建项目的时候有两种方式,第一种就是官方推荐的 vite 。另外一种就是使用 webpack 创建。1.1、vite 创建项目vite 需要 Node.js >=原创 2021-12-23 12:24:59 · 6084 阅读 · 1 评论 -
如何成为别人嘴里的高级前端工程师?
要想成为一个高级前端工程师,很多人的答案都是:学习,不断地学习。学习肯定是要学的,但是我们要怎么学习呢?学习方式还是挺多的,我更推荐大家多看看比自己水平高的人,写的代码。遇到没见过的内容就立即学习学习。下面就给大家看看,我们为什么要看别人的代码!场景1:数组拼接let arr1 = [ a, b, c ]let arr2 = [ 1, 2, 3 ]/* 把 arr1 和 arr2 拼接到一起 */普通程序员:// 写法1:let arr = arr1.concat( arr原创 2021-12-17 12:56:47 · 938 阅读 · 2 评论 -
框架用的好,下班走的早。值得收藏
公司开发大型项目时,为了快速开发,往往会选择一个合适的 ui 框架进行开发,ui 框架最大的优点就是能够大大节省开发时间。所以在开发项目之前,我们需要先了解功能需求,考虑使用的 ui 框架,是否都能满足功能需要,比如制作移动端的项目,不能选择一个PC端的 UI 框架。所以我们需要熟悉一些 ui 框架,便于我们在开始项目之前选型。下面帮大家推荐一些支持 Vue3 且免费的 UI 框架。欢迎大家在评论区多多交流!收藏关注,手留余香!一、移动端常用 UI 框架1.1、uni-app官网:原创 2021-12-16 09:20:46 · 4804 阅读 · 5 评论 -
vue3 到底哪里好?看这一篇就够了
之前写的关于 vue3 的文章,好多人吐槽:这些API每次使用都要引入一遍,感觉有点麻烦。今天我们就来看看 vue3 相比 vue2 的优点有些啥?为啥有些人说:自从写了 ts vue3 再也回不到 vue2 啦!vue3 到底哪里好?有的人回不到 vue2,而有的人去不了vue3!喜欢的点赞收藏,复盘不迷路!一、Vue3 新增的几个亮点:Performance:性能优化 Tree-shaking :支持摇树优化 Composition API :组合式api 新增组件:Fragm原创 2021-12-15 09:11:37 · 1195 阅读 · 0 评论 -
玩转 Mockjs,前端也能跑的很溜
mockjs作用就是,生成随机模拟数据,拦截 ajax 请求,可以对数据进行增删改查。在生成数据时,我们就需要能够熟练使用 mock.js 的语法。Mockjs 的语法规范包括两部分:数据模板定义规范和数据占位符定义规范。一、数据模板定义规范数据模板中的每个属性组成有:属性名、生成规则、属性值。使用语法为:"name|rule": value值得注意的有:属性名和生成规则之间使用 | 分割。 生成规则是可选参数。 生成规则有 7 种形式。 生成规则含义需要依赖于属性值的类原创 2021-12-11 07:00:00 · 470 阅读 · 0 评论 -
关于 vite.config.js 相关配置,拿走不谢
使用 vite 创建项目完成后会自动生成 一个 vite.config.js 代码如下:import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({ plugins: [vue()],})当以命令方式运行 vite 时,vite 会自动解析项目根目录下 vite.config.js 的文件。配置不全时,在开发环境下运行都是正常的,但是打包上线的时候就原创 2021-12-10 09:25:02 · 11107 阅读 · 2 评论 -
Vue3 中有哪些值得深究的知识点?
众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点。原创 2021-12-07 11:20:19 · 1023 阅读 · 0 评论 -
vue3 高阶 API 大汇总,强到没朋友
高阶函数是什么呢?高阶函数英文名叫:Higher Order function ,一个函数可以接收一个或多个函数作为输入,或者输出一个函数,至少满足上述条件之一的函数,叫做高阶函数。前言本篇内容的知识点比较多,讲得不够细致,不熟悉的可翻阅前几篇文章,分别对每个知识点都有一篇特别详细的文章。建议读者收藏!一、Mixin 混入mixin 混入,提供了一种非常灵活的方式,来分发 vue 组件中的可复用功能,一个mixin 对象可以包含任意组件选项,当组件使用 mixin 对象时,所有的 mix原创 2021-12-01 09:39:33 · 1330 阅读 · 1 评论 -
vue3 学习笔记(九)——script setup 语法糖用了才知道有多爽
刚开始使用 script setup 语法糖的时候,编辑器会提示这是一个实验属性,要使用的话,需要固定 vue 版本。在 6 月底,该提案被正式定稿,在 v3.1.3 的版本上,继续使用但仍会有实验性提案的提示,在 V3.2 中,才会去除提示并移除一些废弃的 API。script setup 是啥?是 vue3 的新语法糖,并不是新增的功能模块,只是简化了以往的组合式 API 必须返回(return)的写法,并且有更好的运行时性能。写法简便:<script setup>.原创 2021-11-29 09:28:43 · 4500 阅读 · 3 评论 -
vue 3 学习笔记 (八)——provide 和 inject 用法及原理
在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传很多次,会很麻烦。像这种情况,可以使用 provide 和 inject 解决这种问题,不论组件嵌套多深,父组件都可以为所有子组件或孙组件提供数据,父组件使用 provide 提供数据,子组件或孙组件 inject 注入数据。同时兄弟组件之间传值更方便。一、Vue2 的 provide / inject原创 2021-11-26 09:07:43 · 4031 阅读 · 0 评论 -
vue 3 学习笔记 (七)——vue3 中 computed 新用法
vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 中的写法,让您快速掌握 vue3 中 computed 的新用法。组合式 API 中使用 computed 时,需要先引入:import { computed } from "vue"。引入之后 computed 可以传入的参数有两种:回调函数和 options 。具体看看它是如何使用的?一、函数式写原创 2021-11-25 09:36:31 · 4709 阅读 · 0 评论 -
vue 3 学习笔记 (六)——watch 、watchEffect 新用法
选项式API与之前写法相同,本篇文章主要通过 Options API 和 Composition API 对比 watch 的使用方法,让您快速掌握 vue3 中 watch 新用法。建议收藏!一、watch 新用法选项式API中,watch 使用watch:{ mood(curVal,preVal){ console.log('cur',curVal);//最新值 console.log('pre',preVal);//修改之前的值 }}2.1、watch 使用语法在原创 2021-11-23 11:45:49 · 1858 阅读 · 0 评论 -
vue3 学习笔记 (五)——vue3 的 setup 如何实现响应式功能?
在之前 vue2 中,data 返回的数据,可以直接进行双向绑定使用,如果我们把 setup 中数据类型直接双向绑定,发现变量并不能实时响应。接下来就看看setup如何实现data的响应式功能?原创 2021-11-22 09:17:02 · 1702 阅读 · 1 评论 -
vue3 学习笔记 (四)——vue3 setup() 高级用法
本篇文章干货较多,建议收藏!从 vue2 升级到 vue3,vue3 是可以兼容 vue2 的,所以 vue3 可以采用 vue2 的选项式API。由于选项式API一个变量存在于多处,如果出现问题时,就需要去多个函数内检查,项目较大时,遇到问题,增加排故的难度。所以 vue3 中新增了 setup 配置项,用它来写组合式API。一、选项式API 和 组合式API 区别有些同学稀里糊涂用了vue一年了,竟然不知道选项式api !你是那个同学吗?是的话,赶紧收藏起来。vue2 中的 Option原创 2021-11-19 08:30:00 · 4329 阅读 · 0 评论 -
vue3 学习笔记 (三)——vue3 自定义指令
今天我们就讲讲在 vue3 中,自定义指令定义、使用以及钩子函数都有哪些变化?原创 2021-11-17 08:43:13 · 2553 阅读 · 0 评论 -
vue3 学习笔记 (二)—— axios 的使用有变化吗?
本篇文章主要目的就是想告诉我身边,正在学 vue3 或者 准备学 vue3 的同学,vue3中网络请求axios该如何使用,防止接触了一点点 vue3 的同学会有个疑问?生命周期、router 、vux使用都改变了,那 axios 使用有没有啥改变?小姐姐使用 axios 之前,需要先安装好。yarn add axiosnpm install axiosbower install axios<script src="https://unpkg.com/axios/dist/a原创 2021-11-16 15:13:24 · 3477 阅读 · 0 评论 -
vue.js3 学习笔记 (一)——mixin 混入
vue 2 中采用选项式API。如:data、methods、watch、computed以及生命周期钩子函数等等。mixin 混入,提供了一种非常灵活的方式,来分发 vue 组件中的可复用功能,一个mixin 对象可以包含任意组件选项,当组件使用 mixin 对象时,所有的 mixin 对象的选项将被混入组件本身的选项。一、mixin 如何使用 ?通俗地讲,mixin 对象把一些组件公用的选项,如data内数据,方法、计算属性、生命周期钩子函数,单独提取出来,然后在组件内引入,就可以与组件本身原创 2021-11-15 09:31:26 · 1327 阅读 · 2 评论 -
vuex4 极速入门到上手
vuex4 是 vue3的兼容版本,提供了和vuex3 的相同API。因此我们可以在 vue3 中复用之前已存在的 vuex 代码。一、安装以及初始化vuex4安装:npm install vuex@next为了向vue3初始化方式看齐,vuex4 初始化方式做了相应的变化,使用新的 createStore 函数创建新的 store 实例。import { createApp } from 'vue'import App from './App.vue'import router原创 2021-11-12 09:27:31 · 1953 阅读 · 0 评论 -
vue-router 4 你真的熟练吗?
虽然 vue-router 4 大多数 API 保持不变,但是在 vue3 中以插件形式存在,所以在使用时有一定的变化。接下来就学习学习它是如何使用的。一、安装并创建实例安装最新版本的 vue-routernpm install vue-router@4 或yarn add vue-router@4安装完成之后,可以在 package.json 文件查看vue-router的版本"dependencies": { "vue": "^3.2.16", "vue-router原创 2021-11-08 09:16:45 · 800 阅读 · 3 评论 -
Vue3.x 关于组件的那些变化(前端开发必读)
一、组件内的 data 为什么总是函数形式?我们试着先做一个计数器案例,把 data 的返回形式修改成一个对象。具体的代码如下:<template> <div> <button @click="num++">+</button> {{num}} <button @click="num--">-</button> </div></template><script>con原创 2021-11-04 09:05:11 · 447 阅读 · 0 评论 -
极速上手 VUE 3—v-model 的使用变化
本篇文章主要介绍 v-model 在 Vue2 和 Vue3 中使用变化。一、Vue2 中 v-model 的使用v-model 是语法糖,本质还是父子组件间的通信。父子组件通信时有两种方式:父给子传值:通过 props 子给父传值:通过 Events up,使用 $emit 触发事件。1.1、父组件给子组件传值父组件代码<child :msg="msg" /><script> export default{ data(){ return{原创 2021-11-02 09:11:14 · 3479 阅读 · 3 评论 -
极速上手 VUE 3——teleport传送门组件
一、teleport 介绍teleport 传送门组件,提供一种简洁的方式,可以指定它里面的内容的父元素。通俗易懂地讲,就是 teleport 中的内容允许我们控制在任意的 DOM 中,使用简单。使用语法:<teleport to="body"> <div> 需要创建的内容 </div> </teleport>to 属性是指定 teleport 中的内容加入的 DOM 元素。可以是标签名,也可以是 id 或类名。//标签名原创 2021-10-29 17:06:28 · 1409 阅读 · 0 评论