1.前端三个框架:
vue(尤雨溪) react(facebook) angular6.0 (谷歌公司) ts
angular2.0 2.0~5.0
前端:html、css、js
库 :jquery (操作DOM)
框架 : bootstrap
2.Vue-单页应用程序(SPA) :数据驱动视图
虚拟DOM diff算法
{{ }} 插值语法
v-if和v-show
v-for
v-bind(缩写:):用于绑定HTML 属性中的值
v-on(缩写@) : 监听事件
v-html:渲染html元素
v-text:渲染文本
v-model: 它能轻松实现表单输入和应用状态之间的双向绑定。
computed 和 watch
3.组件全家桶
3.1 Vuex+Vue-route
- Vuex是vue的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。
- Vue-route是vue的一个前端路由器,这个路由器不是我们上网用的路由器,而是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换,让用户感觉就像切换到了网页一样。
3.2 Vue-resource和Axios
-
在传统的前后端不分离的开发中,后端直接把数据通过模版引擎拼接进了返回的HTML中。而现在做单页应用程序属于前后端分离开发,那么这个单页应用程序中的数据就得通过ajax的方式获取,也要通过ajax的方式提交到后端。
-
在传统开发中我们都是通过xmlhttprequest手动操作,或者通过JQuery的ajax方法来进行数据提交获取。
-
vue.js本身没有封装ajax操作库,所以我们要通过Vue-resource和Axios来进行ajax操作,而因为种种原因,现在vue.js2.0已经将axios作为官方推荐的ajax库了。
3.3 Virtual DOM
-
现在的网速越来越快了,很多人家里都是几十甚至上百M的光纤,手机也是4G起步了,按道理一个网页才几百K,而且浏览器本身还会缓存很多资源文件,那么几十M的光纤为什么打开一个之前已经打开过,已经有缓存的页面还是感觉很慢呢?这就是因为浏览器本身处理DOM也是有性能瓶颈的,尤其是在传统开发中,用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候,浏览器要不停的渲染新的DOM树,导致页面看起来非常卡顿。
-
而Virtual DOM则是虚拟DOM的英文,简单来说,他就是一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化,由于这个DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交,将DOM操作变化反映到DOM树上。
-
对于vue.js的Virtual DOM,目前业界有着褒贬不一的评价。有人认为Vue.js作为一个轻量级框架,引入Virtual DOM会加大Vue.js本身的代码尺寸,也会消耗更多CPU(手机上会更耗电)(注意:消耗更多的CPU并不意味着会更卡,因为JavaScript计算是后台计算,他的计算量还不至于让DOM操作变得卡顿),并且在操作单个DOM元素的时候,反而多了一道计算工序,会更慢。但也有人认为基本上会用Vue.js开发的都是页面中内容很多的元素,肯定操作的DOM量级普遍较大,平均一下还是比较划算的。
4. Vue核心概念Action
4.1 State
4.2 Getter
4.3 Mutation
4.4 Action
4.5 Module
5.Vue.js 模板语法
- Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
- Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
- 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
5.1 数据属性
5.2 实例属性
5.3 实例生命周期钩子
created、mounted、updated 和 destroyed。