一、MVVM 思想

M：即 Model，模型，包括数据和一些基本操作

V ：即 View ，视图，页面渲染结果

VM ：即 View-Model ，模型与视图间的双向操作（无需开发人员干涉）

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

而 MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model

和 View 之间是如何互相影响的：

· 只要我们 Model 发生了改变， View 上自然就会表现出来。

· 当用户修改了 View ， Model 中的数据也会跟着改变。

把开发人员从繁琐的 DOM 操作中解放出来，把关注点放在如何操作 Model 上。

二、Vue 简介

Vue (读音 /vjuː/ ，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官网： https://cn.vuejs.org/

参考： https://cn.vuejs.org/v2/guide/

Git 地址： https://github.com/vuejs

尤雨溪， Vue.js 创作者， Vue Technology 创始人，致力于 Vue 的研究开发。

2.1、安装

官网文档提供了 3 中安装方式：

1. 直接 script 引入本地 vue 文件。需要通过官网下载 vue 文件。

2. 通过 script 引入 CDN 代理。需要联网，生产环境可以使用这种方式

3. 通过 npm 安装。这种方式也是官网推荐的方式，需要 node.js 环境。

首先新建一个Vue的文件夹，导入相关的JS文件以及样式文件

打开vue文件夹的终端，输入

2.1.1、初始化vue项目 -y默认确定

npm init -y

初始化成功，多了个packeage.json文件

2.1.2、安装上vue的2.6.11版本

npm install vue@2.6.11

安装成功

卸载vue

npm uninstall -g @vue/cli

安装最新版vue

npm install vue

三、Vue的单向绑定

新建一个html文件，!加空格初始化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 单向绑定 -->

    <!-- 给div创建一个id，让直接Vue管控到 -->
    <div id="app">
        <!-- 采用插值表达式{{}} ，从数据区里，取到name，放到这里-->
        <h1> {{name}} ,真不辍！</h1>
    </div>

    <!-- 1、引入vue依赖 -->
    <script src="./node_modules/vue/dist/vue.js"></script>

    <!-- 单向绑定实例 -->
    <script>
        // 声明一个对象叫vm，相当于创建一个vue对象，让vue对象管控上面的div
        // 在new Vue()的时候传入一个对象
        let vm = new Vue({
            // element元素的意思，获取哪个元素
            // 让这个Vue对象管控哪个元素
            el: "#app",      //id选择器，现在已经管控了div
            // data数据信息
            // 可能有很多的数据，用{}代表这个数据是一个对象，里面可以有很多key value
            data: {
                name: "张三"
            }
        })
    </script>

</body>
</html>