vue大纲

Vue介绍
Vue是一套用于构建前端用户界面的前端框架

前端开发者主要的工作,就是为了网站的使用者(又称为网站的用户)构建出美观舒适的网页

构建用户界面的传统方式

在传统的web前端开发中,基于jQuery 模板引擎的方式来构建用户界面的

使用vue构建用户界面

使用vue构建用户界面,解决了jquery+模板引擎的诸多痛点,及大的提高了开发效率和体验

vue全家桶

官方给vue的定位是前端框架,因为他提供了一套构建用户界面的一整套解决方案(俗称 vue全家桶)

vue(核心库)

vue-router(路由方案)

vuex(状态管理方案)

vue组件库(快速搭建页面ui效果的方案)

以及辅助vue项目开发的一系列工具

vue-cli (npm全局包:一键生成工程化的vue项目-基于webpack 大而全)

vite(npm全局包:一键生成工程化的vue项目-小而巧)

vue-devetools(浏览器插件:辅助调试的工具)

vetur(vscode插件,提供语法高亮,和智能提示)

vue介绍总结

vue是一套构建用户界面的前端工具

Vue功能
数据驱动视图

在使用了vue的页面中,vue会监听数据的变化,从而自动渲染页面的结构,示意图如下：

双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下 ， 自动把用户填写的内容同步到数据源中。示意图如下：

MVVM

MVVM 是 vue 实现 数据驱动视图 和 双向数据绑定 的核心原理。MVVM 指的是 M odel、 View 和 View Model， 它把每个 HTML 页面都拆分成了这三个部分，如图所示：

MVVM 的工作原理

ViewModel 作为 MVVM 的核心 ，是它把当前页面的 数据源 （Model）和 页面的结构 （View）连接在了一起

当 数据源发生变化 时，会被 ViewModel 监听到，VM 会根据最新的数据源 自动更新 页面的结构

当 表单元素的值发生变化 时，也会被 VM 监听到，VM 会把变化过后最新的值 自动同步 到 Model 数据源中  

Vue 的版本
当前，vue 共有 3 个大版本，其中：

2.x 版本的 vue 是目前企业级项目开发中的主流版本

3.x 版本的 vue 于 2020-09-19 发布，生态还不完善，尚未在企业级项目开发中普及和推广

1.x 版本的 vue 几乎被淘汰，不再建议学习与使用

总结：

3.x 版本的 vue 是未来企业级项目开发的趋势；

2.x 版本的 vue 在未来（1 ~ 2年内）会被逐渐淘汰

vue3.和vue2.x版本的对比

vue2.x中绝大多数的api与特性在vue3.x中同样支持,同时vue3.x中还新增了3.x中所持有的功能,并废弃了某些2.x中的旧功能

新增的功能例如:组合式api,多根节点组件,更好的typescript支持

废弃的旧功能如下:过滤器,不在支持 $on $off 和$once实例方法等

详情的变更信息请参考官方文档给出的迁移指南

1、Vue 的基本使用
基本使用步骤

① 导入 vue.js 的 script 脚本文件

② 在页面中声明一个将要被 vue 所控制的 DOM 区域

③ 创建 vm 实例对象（vue 实例对象）

基本代码与 MVVM 的对应关系