Vue学习

Vue

---

HTML+CSS+JS：视图，给用户看，刷新后台给的数据

网络通信：axios

页面跳转：vue-router

状态管理：vuex

Vue-UI：ICE

ES6->ES5

let->var

就用到打包工具webpack，通过webpack打包成ES5从而支持

TypeScript：有点像less，写完转换为JavaScript

---

前端三大框架

Angular特点：将后台的MVC模式搬到了前端并且增加了模块化开发的理念

M：模型

V：视图

C：控制器

View：JSP{{}}

DATA：

vm：数据双向绑定

（MVVM）

React特点：虚拟dom（利用内存）

Vue特色：计算属性（集大成者，mvvm+dom）

---

Axios：前端通信框架（因为Vue就是为了处理dom，所以不具备通信功能，所以用这个，当然也可以用jQuery提供的Ajax）

UI框架

• Ant-Design
• ElementUI
• Bootstrao
• AmazeUI

JavaScript构建工具

• Babel
• WebPack

---

三端统一

混合开发（Hybrid App）

微信小程序

微信小程序UI开发框架：WeUI

---

后端技术（NodeJS）

• Express
• Koa
• NPM
• YARN

主流前端框架

• iView
• ElementUI
• ICE
• VantUI
• AtUI
• CubeUI
• Flutter
• lonic
• mpvue
• WeUI

---

前端为主的MV*时代

MV*模式如下：

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

MVVM的组成部分

MVVM模式的实现者

• Model：模型层，在这里表示JavaScript对象

• View：视图层，在这里表示DOM（HTML操作的元素）

• ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者

  在MVVM架构中，是不允许数据和视图直接通信的，只能够通过ViewModel来通信，而ViewModel就是定义了一个Observe观察者

  • ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
  • ViewModel能够监听到视图的变化，并能够通知数据发生改变

为什么要使用MVVM

• 低耦合
• 可复用
• 独立开发
• 可测试

---

Vue语法

指令带有前缀v-

方法必须定义在Vue的methods对象中

双向绑定

v-model和{{}}

、、

组件

组件是可复用的Vue实例

定义一个Vue组件component:

axios异步通信

钩子函数 链式编程 ES6新特性

解决闪烁问题

这样就不会显示{{info.name}}到数据的转变，会是白屏变为数据

计算属性

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性) , 仅此而已；可以想象为缓存。

methods定义方法（带括号），computed定义计算属性（不带括号）

调用computed中currentTime2和methods中的currentTime1的区别在于是否加（）

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经
常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。

Vue开发