Vue.js-扩展学习-3

Posted 2021-05-01 WEB学习小助手

一、vue-cli

vue-cli  是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，分为vue init webpack-simple 项目名 和vue init webpack 项目名两种。

当然首先需要安装 node等一些必要环境。

vue-cli作用：用配置好的模板迅速搭建起一个项目工程来，省去自己配置webpack配置文件的基本内容。

二、webpack

webpack 是一个模块打包工具。

用vue的项目来简单了解一下webpack: 浏览器是只是别js,不识别vue的。vue项目中写的代码后缀大多是 .vue,所以项目要被浏览器识别，我们就要使用webpack将它们打包成js文件以及相应的资源文件。这只是其中的一个功能。

三、了解jquery 、vue、angular 和react

JQUERY

jquery依靠丰富的dom操作去组合业务逻辑，当业务逻辑复杂的情况下，每行代码都会有不知所云的感觉，因为①业务逻辑和UI更改混一起；②UI里面还参杂着交互逻辑，让本来混乱的逻辑更加混乱。

VUE

Vue是一个‘MVVM'框架（库），与angular类似，比angular轻巧，比较容易上手；

Vue是一个构建用于界面的渐进式框架，与其它重量级框架不同，vue采用自底向上增量开发的设计；

Vue的核心库“只关注视图层”，非常容易与其它库或者已有的项目整合，另一方面，vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页面应用；

Vue的目标是通过尽可能简单的API实现“响应的数据绑定” 和“组合的视图组件”。

Angular

Angular是一个完整的框架。
基本属性包括：数据双向绑定、基本模板指令、自定义指令、表单验证、路由操作、依赖注入、过滤器、内置服务、自定义服务、组件、模块；

通俗的讲：angular =Vue +vue-router+axios+karma+表单验证插件...(渐进式）

Angular 的UI框架有：ng-bootstrap 、OnsenUI、material2等；

Vue的UI框架有：bootstrap-vue、vue-material、Element Ui、Minit UI 等；

React

优点：

a、React速度很快：它并不直接对DOM进行操作，引入了一个叫做虚拟DOM的概念，安插在javascript逻辑和实际的DOM之间，性能好。

b、跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API,甚至在ie8中都是没有问题的。

c、一切都是component,代码更加模块化，重用代码更容易，可维护性高。

d、单向数据流

四、了解 MVC、MVP、MVVM的区别

复杂的软件必须有清晰合理的架构，否则无法开发和维护。

MVC、MVP、MVVM 是用来解决界面呈现和逻辑代码分离而出现的模式。

通俗的讲，就是方便大多数人开发和维护出现的代码分离模式。

MVC

视图（view):用户界面

控制器（controller):逻辑业务

模型（model):数据处理

MVP

MVP是从经典的模式MVC演变而来，它们的基本思想有想通的地方，Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。MVP和MVC的一个重大区别是：在MVP中View并不直接使用Model,它们之间的通信是通过Presenter/Controller来进行的，所有的交互都发生在Presenter内部，而在MVC中，View会直接从Model中读取数据而不是通过Controller。

MVVM

MVVM在概念上是真正将页面与数据逻辑分离的模式，在开发方式上，它是真正将前台代码开发者（html、js)与后台代码开发者(asp、net、php、jsp)分离的模式。

双向绑定：view的变动，自动反应在viewModel,反之亦然

vue对比其他框架

1、vue-angualr
a、vue在设计之初参考了很多angular的思想；

b、vue相比于angular来说更加简单；

c、vue相比于angular要变得小巧的很多，运行速度比angular更快；

d、vue和angular绑定都可以用{{}};

e、vue指令用v-xx,angular指令用ng-xx;

f、vue中的数据放在data对象里面，angular数据绑定在$scope上面；

g、vue有组件化概念，angular中没有；

2、vue-react

共同点：

a、用虚拟DOM实现快速渲染；

b、提供了响应式（Reactive）和组件化（Componsable）的视图组件；

c、React和Vue都将注意力集中在核心库，并且有配套的路由和负责处理全局状态管理的库；

不同点：

a、Vue使用简单的模板渲染页面，React使用JSX渲染页面；

b、Vue比React运行更快；