【vue2】vue全家桶介绍,学习vue必备

简介: 学习vue

【前言】当你看到这一篇文章,恭喜你!你将会对vue的认识度有一个进一步的提高,本文将用简洁明了的大白话介绍vue全家桶是什么、怎么用。考虑到文章篇幅的限制,本文将适当的引入我之前介绍全家桶之一的博客同大家进行一个分享,我相信大家看完这些文章一定会有一个很大的收获!

一、vue介绍

1.1 由来:

引入vue作者尤雨溪的话:

       “Vue 一开始完全是一个个人兴趣项目。2013 年的时候我还在 Google Creative Lab,那时候前端框架还处于比较草莽的阶段,React 刚刚发布还没几个人知道,最成熟的是 AngularJS (Angular 1)。我当时一方面是想自己实现一个简单的框架练练手,另一方面是想尝试一下用 ES5 的 Object.defineProperty 实现数据变动侦测。众所周知 AngularJS 使用的是脏检查,而当时大部分的应用还需要支持 IE8,所以不能全面使用 ES5,而个人项目则不需要考虑这些。Vue 就是这样作为一个实验性质的项目开始的。"

发展历程:

       从最初的实验阶段(2013 年中到 2014 年 2 月),0.x 阶段 (2014 年 2 月到 2015 年 10 月),1.x 阶段 (2015 年 10 月到 2016 年 9 月),到现在的2.x 阶段 (2016 年 9 月至今),加上正式对外发布之前的时间,到今天已经有 足足5 年多的时间了。 0.x - 1.0 的改动主要集中在模版语法上,在 1.0 之后,模版语法就相对稳定,没有再经历过特别大的改动了。2.0 的改动则专注于内部的渲染机制变化,引入了 Virtual DOM,从而获得了服务端渲染、原生渲染、手写渲染函数等能力。目前 3.0 正在竭力的开发过程中,主要集中于利用 ES2015 的新特性、改进内部架构和性能优化上。

1.2 vue特性:

1.vue四大特点:

jsvaScript渐进式、易用、灵活、高效  官方文档:Vue.js

1e17c375c8a644b08ff9ad7df808bdb4.png

2.javaScript渐进式框架介绍:

a. Vue.js提供了很多的功能,但是这些功能并不是集成在一起的,而是分开的

类似于Nodejs,拆分成很多个小模块

b. 在项目中我们用到什么,就导入什么

这样可以保证我们用到的最少

c. 说人话:Vue相当于是一个五星级自助餐,我们想要用什么就拿什么,这样可以最大限度避免浪费资源

3.vue设计模式:

vue是MVVM设计模式的框架。

MVVM设计模式:一种软件架构模式,决定了写代码的方式。

M:model数据模型(ajax获取到的数据)

V:view视图(页面)

VM:ViewModel 视图模型(vue实例)

MVVM通过数据双向绑定让数据自动地双向同步 不在需要操作DOM

V(修改视图) -> M(数据自动同步)

M(修改数据) -> V(视图自动同步)

1. 在vue中,不推荐直接手动操作DOM!!!

2. 在vue中,通过数据驱动视图,不要在想着怎么操作DOM,而是想着如何操作数据!!

1.3 更多信息:

关于vue的学习指南请大家移步博主的vue专栏:vue专栏(从0开始,大家可以看看)

目前文章已书写了16篇文章,后面会持续更新喔!我有信心能够很好的帮助大家由0到1帮大家学习好相关知识点,系统的学习好vue,不再迷路!!!

64ab7408227a4fe3a51058d14f24246e.png

二、vue全家桶

2.1 vue-cli

1.官方介绍:

Vue CLI 是一个用于快速 Vue.js 开发的完整系统,提供:

交互式项目脚手架通过 .@vue/cli

运行时依赖项 (),即:@vue/cli-service

可升级;

构建在 webpack 之上,具有合理的默认值;

可通过项目内配置文件进行配置;

可通过插件扩展

丰富的官方插件集合,集成了前端生态系统中最好的工具。

一个完整的图形用户界面,用于创建和管理 Vue.js 项目。

Vue CLI 旨在成为 Vue 生态系统的标准工具基线。它确保各种构建工具与合理的默认值一起顺利运行,因此您可以专注于编写应用程序,而不是花费数天时间争论配置。同时,它仍然提供了调整每个工具配置的灵活性,而无需弹出。

大白话:我们专注于框架中的业务与数据的处理即可,用cli会自动帮我们处理默认的配置与用Cli还可以通过插件可扩展我们的项目中功能

vue cli学习指南:【vue2】Vue Cli脚手架与VueTools的安装详解

2.2 vue-router

1.路由是什么?

URL 与 页面 之间的对应规则

路由中的页面:主要指vue的组件(在vue中 页面 和 盒子 都是 组件)

2.为什么要学习vue中的路由

vue是一个渐进式框架,一个网页由很多个页面组成,那我页面之间如何跳转呢?

在vue中,页面跳转主要由路由来实现

vue-router学习指南:【vue2】对路由的理解

2.3 vuex

1.vuex介绍

vuex的作用是解决多组件状态共享的问题,在大型的项目中,组件通讯会变得很混乱,使用vuex可以统一管理组件之间的通讯

它是独立于页面而单独存在的,所有的组件都可以把它当作一座桥梁来进行通讯。

2.使用vuex好处

响应式:只要vuex中的数据变化,对应的组件会自动更新(类似于vue数据驱动)

操作更简洁 : 类似于sessionStorage,只有几个方法

2.vuex使用场景

1.不是所有的场景都适用于vuex,只有在必要的时候才使用vuex,能不用就不要用

使用了vuex之后,会一定程度上增加了项目的复杂度

2.适合使用vuex场景

这个数据需要在多个地方使用,如果采用组件传值方式,写起来很麻烦,而且多个地方都要写

例如:用户信息(姓名,头像),可能会在很多个地方使用(个人页面,评论页面等)

3.不适合使用vuex场景

这个数据不需要在多个地方使用,如果某个数据仅仅只是在两个组件之间通讯,优先使用props或$emit

4.vuex特点

所有组件数据共享

响应式: 一旦vuex数据修改,所有使用的地方都会自动更新

vue-router学习指南:【vue2】vuex超超超级详解!(核心五大配置项)

2.4 axios

1.axios作用:

ajax是一种在javaScript代码中发请求并获取响应数据的技术,我们的axios是一个别人封装好的、用来发ajax请求的工具。那么我们发送请求与响应数据可以用来做什么呢?这样做有什么好处呢?可以实现——当我们不刷新页面的情况下,我们从服务器获取请求的数据,以局部更新我们定点的数据而不是我们整个页面的刷新。

2.常用的请求方法

post、get、put、patch、delete

axios学习指南:AJAX专栏

2.5 UI组件库

这个也是突出了我们脚手架厉害的地方:可以使用我们插件进行拓展。

为什么用框架:缩减我们开发的时间与难度

1.下面是我们常见的UI框架

1.PC端组件库

ElementUI  官网地址:https://element.eleme.cn/#/zh-CN

Ant Design Vue  官网地址:https://www.antdv.com/docs/vue/introduce-cn/

2.移动端 UI 组件库

Vant  官网地址:https://youzan.github.io/vant/#/zh-CN/

Vuetify  官网地址:https://vuetifyjs.com/zh-Hans/



相关文章
|
15天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
134 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
571 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
111 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
246 1
|
4月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
375 17
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
213 1
|
存储 前端开发 JavaScript
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
|
6月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
770 4
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
548 77

热门文章

最新文章