vue基础篇-初识 Vue.js（第一章）

一、Vue.js是什么？
Vue.js是一套构建用户界面（view）的MVVM框架。Vue.js的核心库只关注视图层，目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
vue两大特点：响应式编程、组件化
vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快。

开发中常见的高级功能，比如
• 解辑视图与数据。
• 可复用的组件
• 前端路由．
• 状态管理
• 虚拟 DO ( Virtual DOM)

1.1什么是MVVM？
MVVM模式
MVVM可以拆分成：View — ViewModel — Model三部分
M: model 业务模型，用处：处理数据，提供数据
V: view 用户界面、用户视图
看下面的视图：

上图中，左侧的View相当于我们的DOM内容，我们所看到的页面视图，右侧的Model相当于我们的数据对象
业务模型model中的数据发生改变的时候，用户视图view也随之变化。用户视图view改变的时候，业务模型model中的数据也可以发生改变，而这个过程就是有ViewModel来操作的，不需要你手动地去写代码去实现（你不用再手动操作DOM了）。

1.2. Vue.js有什么不同
（1）jquery：轻量级的js库
（2） vue：前端js库，是一个精简的MVVM，它专注于MVVM模型的viewModel层，通过双向数据绑定把view和model层连接起来，通过对数据的操作就可以完成对页面视图的渲染。
（3）vue和jquery对比：
vue是通过vue对象将数据和view完全分离开的，对数据操作不在引用相应的DOM对象；主要是操作数据

  jQuery是使用选择器（$）选取DOM对象，并对其进行赋值、取值、事件绑定等操作；主要是操作DOM

二、如何使用Vue.js

在一个html文件中，我们直接可以通过script标签引入Vue.js，然后就可以在页面里写Vue.js代码了。下图中我们通过new Vue()构建了一个Vue的实例

可以包含挂在元素（el），数据（data），模板（template），方法（methods）与生命周期钩子（created等）等选项。不同的实例选项拥有不同的功能，如：

（1）el表明我们的Vue需要操作哪一个元素下的区域，’#demo’表示操作id为demo的元素下区域。

（2）data表示Vue 实例的数据对象，data 的属性能够响应数据的变化。

（3）created表示实例生命周期中创建完成的那一步，当实例已经创建完成之后将调用其方法。

总结：在Vue.js中，网页是可以看成多个组件组成的。把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。这样是页面的复用度达到最高（支持组件化）。看下图：