我与vue的相遇

按理来说,我一个搞后端的应该是碰不到这玩意儿的,但缘分到了挡都挡不住,目前碰了两次,第一次是在我个人毕设中,第二次是公司项目。

说说第一次吧,当时毕设是spring+bootstrap+vue实现的。当时前端也没用到复杂的东西,比如webpack和vue-cli这些,这次公司项目中接触到vue,看见一些脚手架之类的东西,认为还是有必要看一下的,在之前到公司之前也就零零碎碎开始了解了。借此机会整理有关vue的内容,而且我感觉前端比后端有意思多了,js指不定就是我的第二语言

这篇文章的意义

看完这篇文章你将收获身为后端的我们应该掌握哪些内容,为什么这些内容是重要的,去哪学,怎么学效率高。但经验总是别人的,如果你想真正学会什么东西,还需要静下心来学习,从来没有可以速成的东西,学习是一种不断的积累。

前言酸溜溜不如看正文

vue是一个前端框架,类似Java中的spring框架。

回到主题,我当时学习spring框架的时候首先是系统性的学习了一遍,在之后就是利用spring框架独立搞了几个项目出来。也算是spring框架的入门了。不过也花费了不少时间,对于时间紧张的打工人来说,作为一个后端不可能跟spring一样系统性的学一遍。但也不能不学,真指望用jq行走天下吗?
但咱搞后端的凭什么要明白前端框架?其实干IT这行也没必要分那么清,就算你现在完全不碰前端,也不保证以后不碰吧,干IT的能挣得了高薪,还得耐得住寂寞,如果你能保证你往后的每份工作不接触前端,那么可以不用去了解前端。否则,前端是非常有必要接触的。

对于目前的主流框架而言,分别是Vue、React、angular。很多大厂都在用React,但门槛较高,不用说搞后端的了,就算专门搞前端的也得掂量掂量。Vue最常用也是最容易入门的一套框架。他降低了前端的门槛。而且作者尤雨溪是国人,文档很友好,而且写的也很细。Vue无疑是前端中最香的。可以这么说后端学前端vue必会(前提具备前端三剑客的知识)

后端程序员学到什么程度?

这个就是接下来的问题了,关于这个问题网上给出的并不多,有也说不到点儿上。当然任何知识都是掌握越多越好

  • 起码vue的代码到我手里我能看懂。这个类似于看外语,每个词儿你得知道什么意思。
  • 不研究前端八股文,可以利用vue+element-ui快速构建一个项目
  • 熟悉掌握一些项目中常用技术比如双向绑定,事件调用,接口联调那些
  • 理解组件化开发,前端模块化,webpack,vue-cli,vite等知识
  • 项目可以直接下开源的学习,不必从0到1构建。但你要门清,比如项目结构,组件通信,方法调用等

为什么学vue,jq不香吗?

我是从远古时代过来的,js学到jq再到vue,当时vue还没有模块化的概念,直接引入一个vue.js开发。可以这么说,jq是真的不香。

  • vue的最大特点:数据和页面解耦。你能想象jq的$冲突是什么感觉吗,还查不出原因呢的那种。反正企业项目开发我是遇到过,我当时引入JQuery使用AJAX出现了$冲突的情况,那么多的代码根本也找不出冲突的点,也不知道冲突的原因,虽然最后通过换命名解决,但处理这种问题也会降低工作效率。
  • jq很杂,似乎什么都有,而vue给你一套全家桶,用什么拿什么,各司其职。
  • vue的目的是让你舍弃dom操作,转为数据操作。jq通常指定事件需要一个选择器,获取dom元素,在给予其行为,这本来不应该是程序员应该关心的
  • 这里不是说vue和jq水火不容,也可以一块去使用,jq样式效果和动画效果还是很出色的,要根据具体场景去完成业务需求

我没有用vue做过项目,怎么学效率高?

很多人都是认可在项目中学习,你没做过,没关系,我做过呀。所以我也会告诉你vue需要学的一些核心东西,我建议系统性的学习下,我是通过看官方文档b站视频学习的,一共500多集,内容为vue2+vue3,之前我看了一套200集视频感觉没学下什么,又学了一套。这套我觉得还不错,推荐给你们。只是在vue3重复的内容还是有点多。最后利用我学的一点知识也是帮我司写了一个小模块出来,感觉还是有成就感。

vue项目核心技术有哪些?

我最初使用springboot+vue做了一个在线看小说的系统,前端用的bootstrap+vue(当时只单纯的将vue替换jq去使用了)

这个项目vue主要比较多的就是双向绑定、axios异步获取数据、将数据遍历展现到页面、事件的绑定与监听,对我毕设来说足够了实现了

我现在写的项目中涉及的很全,不在局限于简单的拖拉拽。可谓是真正的模块化与工程化开发,和用spring写后端差不多

分隔符

后面的就是一些关键知识点了,零散的知识点会单独开一篇文章放进去

前端工程化

不同于早两年的拖拉拽,前端也逐渐站了起来,各大企业也在重视前端人员,离不开的原因之一就是前端跟后端一样也实现了工程化

好处:自成体系,提高开发效率,降低技术选型,前后端联调带来的沟通成本。

说人话:有人帮你把能做的都做了,只要按照约定进行配置,按照给定语法进行开发即可

组件化开发

如果我们面对复杂问题的时候,通常的处理方式:

  1. 任何人的处理信息逻辑的能力都是有限的,所以在面临非常复杂的问题的时候,不太可能搞定
  2. 人天生有一种能力就是将问题去拆分,在项目管理中WBS是一个重要的内容。思想其实是一致的。那就是将一个复杂的问题,拆分成很多小问题去处理,那么再大的问题只要分的足够细化,也就迎刃而解了

组件化也是类似的思想

  1. 如果将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得十分复杂,jsp中不仅包括Java代码和html代码,还包括css样式,js函数,都在一个页面,找起来麻烦,代码观赏性也不佳。非常不利于后续的管理和扩展
  2. 如果能将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么后续的管理与维护就非常容易了

vue是什么

构架用户界面的一个前端框架,后端的spring

有啥优点

  • 渲染页面结构更加方便(数据驱动视图)
  • 提供独特的书简绑定机制,轻松处理交互行为
  • 工作重心转移,不在放在处理DOM上

vue2与vue3

  • vue2是比较经典的一个版本,也是企业用的版本,所以企业开发还是需要学习vue2的知识
  • vue3是2020年9月18日发布的,有较大的更新,可以说在近两年企业还是会以2为主,然后向3转移,现在学3刚刚好

vue全家桶

  • vue(核心库)
  • vue-router(路由)
  • vuex(状态管理)
  • vue组件库(快速搭建UI效果的方案)

vue特性

  • 数据驱动视图(单向数据绑定)
    vue起到了监听数据变化的作用,数据的变化会驱动视图自动更新
    image-20210823192330191
  • 双向数据绑定
    辅助开发者在不操作DOM的前提下,自动把用户填写的内容同步到数据源中
    image-20210823192802732

M-V-VM

Model-View-ViewModel,M表示抽离出的obj(new Vue)、V表示DOM(html + css)、VM表示监听M修改V,是双向绑定的要点。来一张经典图
image-20210823193148997
工作原理
image-20210906164344403

MVVM怎么工作的?(了解)

ViewModel通过bind让obj中的dom能够实时显示,在通过listener监听dom事件,通过method来修改数据 说白了也就是监听+绑定实现的

vue经典结构

el:类型string,决定你管理哪一块dom,这也是vue的一个优势点,整个代码按块管互不影响。

data:类型object,vue中需要存放的数据对象,这里可以存放的对象类型也是比较丰富的

method:类型function,定义一些方法,可以指令调用,也可以在其他地方调用

image-20210823194447037

下面是在我学习过程中的总结,我认为所需要知道的知识点,另外放了一篇文章

后端的vue笔记

结语

这只是个开始,纸上得来终觉浅。利用项目学习,从项目中学,学之于项目,我立志于当一名全干攻城狮,只想拥有更加广阔的视野