网站根 html,网站建设行业数据,烟台制作网站的公司简介,用织梦做的网站下载文章底部有个人公众号#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享#xff1f; 踩过的坑没必要让别人在再踩#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官#xff1a;有使用过vue吗#xff… 文章底部有个人公众号热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享 踩过的坑没必要让别人在再踩自己复盘也能加深记忆。利己利人、所谓双赢。 面试官有使用过vue吗说说你对vue的理解 一、从历史说起
Web是World Wide Web的简称中文译为万维网我们可以将它规划成如下的几个时代来进行理解
石器时代文明时代工业革命时代百花齐放时代
石器时代
石器时代指的就是我们的静态网页可以欣赏一下1997的Apple官网
最早的网页是没有数据库的可以理解成就是一张可以在网络上浏览的报纸直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互如当时的Google1998年 文明时代
ASPJSP大家应该都不会太陌生最早出现于 2005 年左右先后出现了微软的 ASP 和 Java Server Pages [JSP] 等技术,取代了 CGI 增强了 WEB 与服务端的交互的安全性类似于下面这样其实就是Java HTML
% page languagejava contentTypetext/html; charsetutf-8 pageEncodingutf-8% !DOCTYPE html html head meta charsetutf-8 titleJSP demo/title /head body img srchttp://localhost:8080/web05_session/1.jpg width200 height100 / /body /htmlJSP有一个很大的缺点就是不太灵活因为JSP是在服务器端执行的通常返回该客户端的就是一个HTML文本。我们每次的请求获取的数据、内容的加载都是服务器为我们返回渲染完成之后的 DOM这也就使得我们开发网站的灵活度大打折扣在这种情况下同年Ajax火了(小细节这里为什么说火了因为 Ajax 技术并不是 2005 年出现的他的雏形是 1999 年)现在看来很常见的技术手段在当时可是珍贵无比
工业革命时代
到这里大家就更熟悉了移动设备的普及Jquery的出现以及SPASingle Page Application 单页面应用的雏形Backbone EmberJS AngularJS 这样一批前端框架随之出现但当时SPA的路不好走例如SEO问题SPA 过多的页面、复杂场景下 View 的绑定等都没有很好的处理经过这几年的飞速发展节约了开发人员大量的精力、降低了开发者和开发过程的门槛极大提升了开发效率和迭代速度我们可以称之其为工业时代
百花齐放时代
这里没有文字放一张图感受一下 PS这里为什么要说这么多Web的历史我们可以看到Web技术的变化之大与快每一种新的技术出现都是一些特定场景的解决方案那我们今天的主角Vue又是为了解决什么呢我们接着往下看
二、vue是什么
Vue.js/vjuː/或简称为Vue是一个用于创建用户界面的开源JavaScript框架也是一个创建单页应用的Web应用框架。2016年一项针对JavaScript的调查表明Vue有着89%的开发者满意度。在GitHub上该项目平均每天能收获95颗星为Github有史以来星标数第3多的项目同时也是一款流行的JavaScript前端框架旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层同时它也能方便地获取数据更新并通过组件内部特定的方法实现视图与模型的交互PS: Vue作者尤雨溪是在为AngularJS工作之后开发出了这一框架。他声称自己的思路是提取Angular中为自己所喜欢的部分构建出一款相当轻量的框架最早发布于2014年2月
三、Vue核心特性
数据驱动MVVM)
MVVM表示的是 Model-View-ViewModel
Model模型层负责处理业务逻辑以及和服务器端进行交互 View视图层负责将数据模型转化为UI展示出来可以简单的理解为HTML页面 ViewModel视图模型层用来连接Model和View是Model和View之间的通信桥梁 这时候需要一张直观的关系图如下
组件化
1.什么是组件化一句话来说就是把图形、非图形的各种逻辑均抽象为一个统一的概念组件来实现开发的模式在Vue中每一个.vue文件都可以视为一个组件
2.组件化的优势
降低整个系统的耦合度在保持接口不变的情况下我们可以替换不同的组件快速完成需求例如输入框可以替换为日历、时间、范围等组件作具体的实现调试方便由于整个系统是通过组件组合起来的在出现问题的时候可以用排除法直接移除组件或者根据报错的组件快速定位问题之所以能够快速定位是因为每个组件之间低耦合职责单一所以逻辑会比分析整个系统要简单提高可维护性由于每个组件的职责单一并且组件在系统中是被复用的所以对代码进行优化可获得系统的整体升级
指令系统 解释指令 (Directives) 是带有 v- 前缀的特殊属性作用当表达式的值改变时将其产生的连带影响响应式地作用于 DOM
常用的指令 条件渲染指令 v-if列表渲染指令v-for属性绑定指令v-bind事件绑定指令v-on双向数据绑定指令v-model
没有指令之前我们是怎么做的是不是先要获取到DOM然后在…干点啥
四、Vue跟传统开发的区别
没有落地使用场景的革命不是好革命就以一个高频的应用场景来示意吧注册账号这个需求大家应该很熟悉了如下 用jquery来实现大概的思路就是选择流程dom对象点击按钮隐藏当前活动流程dom对象显示下一流程dom对象如下图(代码就不上了上了就篇文章就没了…) 用vue来实现我们知道vue基本不操作dom节点 双向绑定使dom节点跟视图绑定后通过修改变量的值控制dom节点的各类属性。所以其实现思路为视图层使用一变量控制dom节点显示与否点击按钮则改变该变量如下图 总结就是
Vue所有的界面事件都是只去操作数据的Jquery操作DOMVue所有界面的变动都是根据数据自动绑定出来的Jquery操作DOM
五、Vue和React对比
相同点 都有组件化思想都支持服务器端渲染都有Virtual DOM虚拟dom数据驱动视图都有支持native的方案Vue的weex、React的React native都有自己的构建工具Vue的vue-cli、React的Create React App 区别 数据流向的不同。react从诞生开始就推崇单向数据流而Vue是双向数据流数据变化的实现原理不同。react使用的是不可变数据而Vue使用的是可变的数据组件化通信的不同。react中我们通过使用回调函数来进行通信的而Vue中子组件向父组件传递消息有两种方式事件和回调函数diff算法不同。react主要使用diff队列保存需要更新哪些DOM得到patch树再统一操作批量更新DOM。Vue 使用双向指针边对比边更新DOM
