javascript

技术文章

开发

Vue入门、插件安装

一、Vue

1、什么是Vue？

(1)官网地址： https://cn.vuejs.org/

(2)Vue是一个渐进式的JavaScript框架。采用自底向上增量开发的设计。可以简单的理解为Vue是一个不断的去完善浏览器功能特性的前端框架(根据浏览器版本的不同去实现新特性)。

注：

所谓渐进式就是逐步实现新特性的意思 。比如实现了模块化开发、路由、状态管理等新特性。

(3)Vue的核心库只关注视图层(只负责布局，不负责通信，通信由第三方库提供)，易于上手，便于与其他项目整合。

注：

Axios是一个前端通信框架，由于Vue只负责视图层，不负责通信，所以可以使用Axios来与服务器进行交互。

ElementUI是一个基于Vue的UI框架。

简单的说：

可以使用 Vue + Axios + ElementUI 来开发前端。

再加个NodeJS写后端(使用Express或者Koa框架)，使用NPM(项目综合管理工具，类似于maven)。

(4)Vue 综合了 Angular (模块化)和 React (虚拟DOM)的优点，还可以使用原生JS开发(ES)，集合众家之所长。

Angular实现模块化开发，对后端开发人员友好，对前端人员不友好。

React实现虚拟DOM，在内存中模拟DOM操作，提高前端渲染效率，使用起来复杂，需要学习JSX。

2、MVVM模式

(1)MVVM模式指的是 Model - View - ViewModel。其将视图层与业务逻辑层分离开。在MVVM模式中，不允许视图层与数据直接交互，需要通过中间件(ViewModel)来通信。

Model ：模型层，指的是 JavaScript对象。

View ： 视图层，指的是 DOM。

ViewModel ： 连接视图层与数据的中间件，指的是 Vue。

(2)ViewModel工作：(作为一个观察者)

能观察数据的变化，并将视图中对应的部分进行修改。

能监听视图的变化，并通知数据发生改变。

即：

Vue的核心是 DOM监听 与 数据绑定(双向绑定)。

Vue是MVVM模式的实现者，MVVM的核心是ViewModel，而ViewModel是一个观察者。

3、第一个Vue程序(写一个普通的html文件来演示)

可以通过js文件的方式来使用vue。

【step1：引入js文件(或者引入下载的js文件)】【step2：创建vue对象】
var vm = new Vue({
el: "#test", // el(element)用于指定选择器
data: { // 初始化数据
message: "Hello"
}
});
【step3：双向数据绑定】
v-model等价于【step4：显示数据】
{{XXX}}
【step5：MVVM实现】
model层相当于data
data: {
username : "Jarry"
}
view层相当于div
Hello {{username}}
ViewModel相当于Vue实例