Vue学习01-第一个Vue程序

Vue

Soc：关注点分离原则

HTML+CSS+JS --> 给用户看，刷新后台给的数据

注意：Vue只做视图层，不做网络通信

网络通信：axios

页面跳转：vue-router

状态管理: vuex

VUE-UI: ICE 飞冰

前端使用CSS预处理器，便于后期维护修改

后端开发若要学习，建议学习LESS，功能简单，上手快，实际开发中功能基本够用。

webpack 属于一个前端打包工具 类似于 后端的 Maven

JavaSpring框架：

• jQuery

• Angular：加入了前端MVC新模式，对前端程序员不太友好，对后端友好

• React：提出了虚拟DOM的新概念

  • 虚拟DOM：利用内存

• Vue：特点综合了Angular（模块化）和React（虚拟DOM）的优点

  • 支持MVVM模式+虚拟化DOM
  • 入门门槛较低，模块化开发

• Axios：前端通信框架，以为Vue边界很明确，就是为了处理DOM，所以不具备通信能力，此时就需要额外使用一个通信框架与服务器进行交互；

  当然也可以直接选择使用jQuery提供的AJAX通信功能。

UI框架：

• ElementUI, iview, ice: 基于Vue的UI框架
• Bootstrap
• AmazeUI

JavaScript构建工具：

• Babel：JS编译工具
• WebPack：模块打包器，主要作用是打包，压缩，合并及按顺序加载

后端技术：

NodeJS框架及项目管理工具如下：

• Express：NodeJS 框架
• Koa：Express 简化版
• NPM：项目综合管理工具，类似于Maven
• YARN：NPM的替代方案，类似于Maven和Gradle的关系

大前端为主的MV…时代：

• MVC（同步通信为主）：Model，View，Controller
• MVP（异步通信为主）：Model，View，Presenter
• MVVM（异步通信为主）：Model，View，ViewModel

基于NodeJS的全栈模式

第一个Vue程序

​ 首先利用cdn引入Vue.js，中demo1.html中添加一下代码即可：

<!--    1.导入Vue.js-->
<script src