知识点一：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>