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

                                                            为什么我被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的知识可以这么来分

  1. vue的基本操作(基础肯定是重点)
  2. vue-cli(vue脚手架)
  3. scss(其实这个这是一个小细节,但我被折磨了,所以拉了出来)
  4. vuex(专为 Vue.js 应用程序开发的状态管理模式):Vuex 是什么? | Vuex
  5. axios(Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中)                      附上链接: http://www.axios-js.com/zh-cn/docs/
  6. 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折磨要自闭了】_第1张图片当然对于vue-cli的环境的搭建,我觉得有必要单独出一篇博客


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

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


       写在后面的话,关于指令与组件以及vue-cli的环境搭建,会写在后面的blogs,同样也还会写一个项目来实战vue的使用,最后附上哪吒社区入口:风火轮

你可能感兴趣的:(#,前端Vue,vue.js,前端,javascript)