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 的对应关系