文章目录
一、Vue.js简介
1.1 优缺点
1.1.1优点
1.1.2 缺点
1.2 安装
1.3 引入Vue
二、 编程思想
2.1 面向事件
2.2 面向过程
2.3 面向对象
一、Vue.js简介
Vue.js是一个轻巧、高性能、可组件化的MVVM框架,同时拥有非常容易上手的API。它一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,不仅易于学习,而且方便与第三方库或已有项目整合。Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。
简而言之:Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。
1.1 优缺点
1.1.1优点
双向数据绑定
也就是所谓的响应式数据绑定。这里的响应式不是@media 媒体查询中的响应式布局,而是指vue.js会自动对页面中某些数据的变化做出同步的响应。
也就是说,vue.js会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系,就是以input标签的v-model属性来声明的,因此也可以粗略的称vue.js为声明式渲染的模版引擎。
这也就是vue.js最大的优点,通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,有更多的时间去思考业务逻辑。
组件化开发
在前端应用,我们是否也可以像编程一样把模块封装呢?这就引入了组件化开发的思想。
Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。
虚拟DOM
浏览器本身处理DOM有性能瓶颈,尤其是在传统开发中,用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候,浏览器要不停的渲染新的DOM树,导致页面看起来非常卡顿,这也就是高网速和缓存也救不了有些页面的加载速度的原因
简单来说,他就是一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化,由于这个DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交,将DOM操作变化反映到DOM树上。
轻量高效
Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统
1.1.2 缺点
Vue 不缺入门教程,可是很缺乏高阶教程与文档。同样的还有书籍。
Vue不支持IE8
生态环境差,不如Angular和React
社区不大
1.2 安装
cnpm install vue
该命令会安装最新稳定版,在输入命令的路径会出现一个名为node_modules的文件夹
1.3 引入Vue
将node_modules文件夹中的vue.js置于需要用到Vue框架的项目里面,然后像引入一个普通的js文件一样引入即可,例如:
1
二、 编程思想
2.1 面向事件
分析出用户会产生的行为,以行为为中心
2.2 面向过程
分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了。强调的是功能行为
2.3 面向对象
将构成问题事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为。将功能封装进对象,强调具备功能的对象。面向对象更加强调运用人类在日志的思维逻辑中采用的思想方法与原则