海门建网站公司,山西网站建设排名,wordpress 文章的id,中原免费网站建设第一章#xff1a;基础知识
我能看懂吗#xff1f; 只要你现在能用htmlcssjs制作一个静态页面#xff0c;相信我#xff0c;你100%可以读懂这篇文章。
本文尤其适合那些想要了解前后端分离开发技术#xff0c;或者刚刚脱离传统MVC开发模式的前端人员。 回想一下#xf…第一章基础知识
我能看懂吗 只要你现在能用htmlcssjs制作一个静态页面相信我你100%可以读懂这篇文章。
本文尤其适合那些想要了解前后端分离开发技术或者刚刚脱离传统MVC开发模式的前端人员。 回想一下常见的开发流程是什么样子的
设计师先出图然后前端开发人员把这些图切成页面交给后端后端开发人员再把php或者java嵌入html页面生成数据。
你有没有发现这个开发模式的几个弊端 第一设计师设计了10张图你就要做10个页面万一设计师修改了一个地方你这10个页面每个地方都要重新修改一遍 第二嵌入式开发跳转页面的时候是同步的页面刷新的时候会产生空白体验很不好 第三对于一些跨平台的应用比如说小程序。后端人员就只能把原来生成到html上的数据改为接口的形式再提供给前端。
我们大胆设想能不能把前端开发模块化比如页面顶部是一个公共模块底部是一个公共模块。所有页面都引用这俩模块修改的时候只需要修改公共模块改一个地方10个页面就跟着全变了。 并且所有的数据通讯都通过ajax来完成这样pc和移动端共用一套接口后台仅提供数据逻辑和渲染都在前端完成。
vue就是这样一套快捷的框架它可以简单有效的解决上述所有问题本文将会由浅入深的为你讲解vue的使用和前后端分离开发的强大之处。
初步了解
所谓设计模式龙哥举一个生动的例子帮助你理解比如我们经常打的王者荣耀中刺客打野战士上单法师走中路。这种默认形成的大家都认可的套路就叫设计模式。 后端编程语言中有一个非常经典的设计模式名叫MVC。 我们平时开发的静态页面就是V层视图层。帮助视图层改变数据并且发送数据给后台的叫C层控制器。分类储存数据的是M层模型。 传统的MVC开发模式
这里你会发现一个非常有意思的情况就是帮助视图做改变本来应该是前端的事。但是现在归为控制器中了。不分离式开发的时候控制器和模型都是在后端的。 如果开发人员在前端使用jquery他还需要获取到这个元素再修改dom的值。数据流瞬间被打乱并且繁琐的dom操作让页面变得缓慢无比这不是我们想要的
于是MVVM诞生了。你会注意到C层不见了。这就要提到vue最大的优势它实现了数据到视图的自动化解决了mvc中逻辑层需要处理帮助视图改变这块的工作。 vue中使用的MVVM开发模式
所以总结一下mvvm比mvc的好处就再于实现了自动化更新视图让数据去驱动视图。省掉了我们去document.getElementByxxx那一步
然后我再传授你一些其他的新颖理念让你的理论更加扎实...
前端项目工程化听着很高大上
所谓的工程化就是用软件开发的那一套理论来管理前端。
从开发的规范代码的迭代代码库分支的管理模块测试和部署。这些操作都是一个体系里面的东西。这也是前端从后端分离出来的一个显著的问题。它没有一个特定的规范和流程那样的结果势必是混乱的。
那么就像写作文一样我们要问时间地点人物是谁前端我们要问用什么方式迭代和管理代码用什么工具搭建和管理项目如何部署 如果有人面试问你这个问题你应该这样回答我使用码云Git管理代码库使用基于webpack的vueCLI脚手架搭建项目后端通过数据接口AJAX传递数据。
这里提到了使用webpack打包代码和一些自动化手段我们不做讨论当我们熟练掌握了vue的使用以后我们会深入探讨基于webpack的vuecli的使用那将会我们的终极目的
大概了相关概念以后我们正式进入vue框架的学习吧 作者党云龙 链接https://www.jianshu.com/p/3b44eda73cc5 来源简书 著作权归作者所有。商业转载请联系作者获得授权非商业转载请注明出处。
