Vue2.0教程（一） 一些基础概念

vue简介

1. 什么是vue？

官方概念: Vue 读音（/vju/，类似view) 是一套用于构建用户界面的前端框架。
1）构建用户界面

• 用vue往 html页面中填充数据，非常的方便
  2）框架
• 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
• 要学习vue，就是在学习vue框架中规定的用法
• vue的指令、组件（是对UI结构的复用）、路由、vuex
• 只有掌握以上内容才能有开发vue项目的能力！

2.vue的特性

vue框架的特性，主要体现在如下两个方面:

1. 数据驱动视图
   2）双向数据绑定

2.1 数据驱动视图

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

|页面结构| <-------自动渲染------ |vue监听数据的变化| <----------变化--------------- |页面所依赖的数据|

1)好处：当页面数据发生变化时，页面会自动重新渲染！
2)注意：数据驱动视图是单向的数据绑定

2.2 双向数据绑定

在网页中，form表单负责采集数据，ajax负责提交数据
js数据的变化，会被自动渲染到页面上。
在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。
1)好处：开发者不用需要手动操作dom元素，来获取表单元素最新的值。

2.3 MVVM

MVVM 是vue实现数据驱动视图和双向绑定的核心原理。MVVM指的是Model、view和 viewModel,它把每个HTML页面都拆分成了三个部分.
在 MVVM概念中:
Model 表示当前页面渲染时所依赖的数据源。
view 表示当前页面所渲染的DOM结构。
ViewModel表示vue的实例，它是MVVM的核心。

2.4 MVVM工作原理

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

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

3. vue版本

当前，vue共有三个大版本，其中:
2.x版本的vue是目前企业级项目开发中的主流版本
3.x版本的vue于2020-09-19发布，生态还不完善，尚未在企业级项目开发中普及和推广
1.x版本的vue几乎被淘汰，不再建议学习和使用

总结：
3.x版本的vue是未来企业级项目开发的趋势
2.x版本的vue会在未来（1~2年内)被逐渐淘汰