知识点一：MVVM 模式

MVVM 之前：

    开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到 View 中。而后当用户操作视图，我们还需要通过 DOM 获取 View 中的数据，然后同步到 Model 中。

MVVM 之后：

   DOM 操作完全封装起来：Model 发生了改变，View 上自然就会表现出来。用户修改了 View，Model 中的数据也会跟着改变。如图所示：

图片描述

知识点二：Node 和 NPM

NPM：

NPM 是 Node 提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括 Jquery、AngularJS、VueJs 都有。为了后面学习方便，我们先安装 node 及 NPM 工具。步骤一：下载 Node.js
完成后可以在控制台输入
node -v // 查看版本命令
步骤二：查看 npm
安装完成 Node 应该自带了 NPM 了，在控制台输入 npm -v 命令查看：

知识点三：Vue 入门

1. 安装 vue

步骤一：进入指定的目录
步骤二：输入 `npm init -y` 命令进行初始化
步骤三：安装 vue，输入命令 `npm install vue --save`
发现多了一个 node_modules 目录

2.vue 渲染

<div id="app">
    <h2>{{name}} 非常帅 </h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 生成一个 Vue 实例
var app = new Vue({
    el:"#app", // el, 即 element。要渲染的的页面元素
    data:{ // 数据
        name:"虎哥"
    }
})
</script>

解析：

1. 首先通过 new Vue()来创建 Vue 实例
2. 然后构造函数接收一个对象，对象中有一些属性：el：是 element 的缩写，通过 id 选中要渲染的页面元素，本例中是一个 div。data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中。

3. 双向绑定

在上面进行修改：
<div id=”app”>

<input type="text" v-model="num">
<h2>
    {{name}} 非常帅,
    有 {{num}} 位女神为他着迷。</h2>

</div>
对 num 进行绑定。

4. 事件绑定

在页面添加：

<button v-on:click="num++"> 点我 </button>