目录

一、MVVM 思想

二、Vue 简介

 2.1、安装

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

 2.1.2、安装上vue的2.6.11版本

三、Vue的单向绑定

一、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文件，!加空格初始化

{}} ，从数据区里，取到name，放到这里-->
 {{name}} ,真不辍！

在网页上打开F12打开控制台

输入vm.name="李四"

还可以在线修改name的值