一、概述

vue官网介绍Vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。渐进式框架普遍理解为使用Vue不必掌握它的全部功能与组件，可以需要什么用什么，易于上手。
声明式渲染——组件系统——客户端路由——-大数据状态管理——-构建工具

它基于MVVM模式，基于这种思想实现数据双向绑定，使开发人员关注于业务逻辑，减少dom的操作。
M----Model数据
V----view视图，web页面的html结构，dom对象。
VM----一个调度者，实现VM之前的关联

image.png

二、核心特点

1.双向数据绑定

传统上要更新数据，在拿到数据之后，要将数据手动更新到控件的value值。使用Vue，当前绑定的值变化后，组件会自动更新。同样对于输入表单如Input框，输入的数据会自动更新到其绑定的变量。
它的原理是利用了 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。（这也是为什么vue不支持ie8 以及更早的ie浏览器的原因）

2.组件化思想

Vue的页面是由组件树实现的。组件化思想即在一个页面中引入可以组件，一个组件又可以引入其他多个组件。比如一个信息管理系统，页面中包含侧边栏，头部，内容区三个组件，在内容区又可以写表单组件，表格组件等等。

3.虚拟DOM

如果更新数据后要渲染整个页面，会造成大量的资源浪费。因此Vue在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM
当数据发生变化时，能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

4.声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM，初始化根实例，vue自动将数据绑定在DOM模板上
声明式渲染与命令式渲染区别
声明式渲染：所谓声明式渲染只需要声明在哪里，做什么，而无需关心如何实现
命令式渲染：需要具体代码表达在哪里，做什么，如何实践
简而言之命令式渲染需要用js将数据更新到html控件上，声明式渲染只需要遵循Vue的模板语法，更新变量就可以了。

三、实例

贴段代码回忆一下语法

<template>
  <div id="vue">Hello Vue.js! {{ message }}</div>
</template>

<script type="text/javascript">
  export default { //这里需要将模块引出，可在其他地方使用
    name: "HelloVue",
    data (){ //注意：data即使不需要传数据，也必须return,否则会报错
      return {
        message: "HelloVue"//{{}}双大括号，文本插值
      }
    }
  }
</script>

<style type="text/css">
  #vue{
    color: green;
    font-size: 28px;
  }
</style>

Vue框架简介