【哪吒技能树之带薪之后被Vue折磨要自闭了】

本文链接：https://blog.csdn.net/m0_60738697/article/details/121311997

为什么我被Vue折磨

前文有提到我赶着秋招的尾巴进入十八线以外的某大厂，目前作为一个实习生进入公司两个周了，因为工作的缘故带薪在学习Vue，就是感觉没有之前备战秋招的哪种学习状态，可能是现在心态的变化，或者是身心的疲惫，又或者说这个javascript渐进式框架真的很牛x，就先从前因后果开始聊聊吧，感受一下vue的魅力

闲聊前端四要素

前端来说就是html中的标签构建了样式(主要就是表单吧)，css进行了页面的美化，javascript进行了事件操作，使得静态的页面有了伪动态；综合以上三个核心对前端框架的总结四要素：1.视图(说白了就是展示给用户看的，以一个俗人的眼光来看，里面加上图形一些东西就会感觉好形象，后来发现了echarts这个基于 JavaScript 的开源可视化图表库);2.逻辑（就是循环与判断的基本操作):3.事件(js中的操作Bom和Dom);4.通信(最直观应该想到了juery.ajax)

从架构方面来看

接触javaweb项目听的最多的也就是MVC三层架构，往后端衍生到了SpringMVC架构，因为在架构的层面是没有加一层解决不了，加一层解决不了就再加一层；往前端衍生的话先是有angular (前端三大框架之一)引入了MVC架构，中间的过度还有MVP模型，对了，这里提一下React(前端三大框架之一) 引入了虚拟DOM；之后到了MVVM架构模型，就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开，而Vue就是MVVM模型的实现者

初始Vue

附上vue的中文网 https://cn.vuejs.org/

vue作者尤雨溪，渐进式JavaScript 框架，只关心视图层，遵循soc关注点分离原则

vue的知识可以这么来分

vue的基本操作(基础肯定是重点)
vue-cli(vue脚手架)
scss(其实这个这是一个小细节，但我被折磨了，所以拉了出来)
vuex(专为 Vue.js 应用程序开发的状态管理模式)：Vuex 是什么？ | Vuex
axios(Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中) 附上链接： http://www.axios-js.com/zh-cn/docs/
vue-UI（使用element-ui是因为Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库）附上链接：Element - The world's most popular Vue UI framework

撸代码前的闲谈

对于后端开发来说，像前端框架layui，bootstrap就只是调用一下，绑定一下参数，仅此而已也就够用了，但vue有点特殊，像基础部分的学习编译软件还是推介idea，下载插件，创建html项目，就可以了使用了，首先是idea的智能，其次的是感情深厚，当然也有vs code，hbuilder一类软件，对于基本操作指令和属性学习完之后，我以为vue差不多了吧，结果最后发现自己学了一个假的vue，首先和人家要求的界面都不一样，甚至怎么搞出来的页面我都不懂，仔细一看，指令和属性以及axios有点熟悉的感觉，后来发现这是基于vue-cli搞出来的，说白了就是该配置的都配置，简化开发，先附上照片当然对于vue-cli的环境的搭建，我觉得有必要单独出一篇博客

vue之旅启航--第一个vue程序

这里是使用idea打开的第一个vue程序，导入在线的cdn，代码都来自官网，官方说的是声明式渲染，个人理解就是先创建一个模板出来，再写上数据，看一下运行结果，然后进行分析，首先整个操作的都在new实例化的vue对象中，其次定义的div用到了id选择器与vue的属性el（元素）进行了绑定，也就是模板的创建吧，最后是data也是vue的7大属性之一，里面存放了数据，语法定义与yaml相通，也算是一种规范，这里采用与两个大括号与js中的${}相近,进行了数据的绑定