Hello Vue.

Vue 是一套用于构建用户界面的渐进式框架，是当下很火的一个 JavaScript MVVM库，是以数据驱动和组件化的思想构建的。在学习Vue之前首先需要了解清楚几个概念：

库和框架的区别

Vue.js 本身只是一个 JavaScript 库，包括 React 也一样，它们都是只需要引入一个JavaScript文件就可以使用了。平时开发中用到的 Vue 框架，是指利用NPM集成了一系列组件之后融合的一整套解决方案。

更加详细的解释：

• 「库」 就是写好的一个文件，使用者只需要将其导入项目就等于是嵌入了一段JavaScript代码，对于它定义的函数和变量就可以直接拿来用，不用也不会影响到使用者的代码。
• 「框架」 顾名思义是一套架构，会基于自身的特点向用户提供一套比较完整的解决方案，规定了使用者的开发行为。就像Vue集成的框架，页面规定分为<template> 、<script>、<style>，必须采用这种格式才会被解析出正确的结果。

MVVM 模式

MVVM模式有Model、View、ViewModel组成：Model代表数据模型，存储了从接口中拿到的数据源；View则是具体的标签展示，将数据赋值给它就会在页面上显示出来；ViewModel则是用来同步View中Model数据的对象。

没有MVVM模式之前我们的开发模式：

拿到接口的数据后，通过操作DOM来将其复制给具体的组件。每次操作涉及到两个方面：

1.修改数据对象；

2.操作DOM更改页面显示。

MVVM模式下的开发模式：

直接操作数据对象，页面会随着数据的变化而变化。

之前在知乎看到一个评论：如果你用了Vue框架，遇到问题还想着操作DOM，多半还是对Vue理解不足。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，复杂的数据状态维护完全由 MVVM 来统一管理。

Hello Vue

在学习阶段我们还是通过引入JavaScript文件的方式，将关注点落到Vue的语法理解上。将Vue.js拷贝到当前路径，导入即可：

<script src="vue.js"></script>

vue.js文件获取

然后，创建一个简单的Vue对象：

<script>
  var app = new Vue({
      // 选中一个id='app'的组件
      el: '#app',
      data: {
          //数据源
          message:'hello world'
      }
   });
 </script>

对应的，创建出具体渲染的组件：

<div id="app">
    <p>{{ message }}</p>
</div>

此处的{{message}}是差值表达式，就是实现MVVM的语法，有了它我们就可以直接拿到message的值，而不需要通过操作DOM来为标签赋值了。具体的界面演示：