Vue.js 什么是Vue?如何使用Vue

        今天新开一个博客分类，准备整理一下之前学习的vue笔记。

什么是Vue？

        首先说一下什么是Vue，下面一段是我从官网截来的一段话：
        Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
        Vue被称作时下最火的前端框架。它和React一样都是前端框架。而React被称作是最流行前端框架。最火和最流行的区别，最火是关注的Vue的人比较多。最流行是使用的人比较多。每次和别人说到Vue时，我都会说这么一句，它们都提供组件化开发的方式，使前端开发，更加方便快捷。但是两个框架的设计思路不同。
        我目前对React不是很了解，因为我还没学。这里我只说说我对Vue的看法，Vue通过vue文件的形式，将HTML+CSS+JS结合在一起，封装为一个一个的组件。实现前台模块化开发。
        Vue提供双向数据绑定，对页面的数据渲染不在直接操作元素，还是将元素和组件的data（数据模型）绑定起来，直接操作这个数据模型来达到渲染页面数据的目的。
        Vue不主张直接操作Dom元素，如果必须要操作Dom元素，Vue提供了ref属性来操作Dom，然而这样，操作的也是Vue中的虚拟Dom。
        Vue的特点还有很多，后面我会一一叙述。

如何使用Vue？

        Vue的安装方法有很多，大概概括下来有两种：CDN引入、npm安装
        本片文文章就只介绍CDN引入的方式，随后会单独写一篇关于npm安装Vue的方式。

CDN引入Vue

我这里是将CDN上的资源下载下来了。

<script src="../js/vue-2.4.0.js"></script>

这是CDN在线引入Vue资源以下引入其中一个即可

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

编写Vue入门实例

        在引入Vue资源之后，我们就可以进行Vue开发了首先编写一个Vue实例。

<script>
    // 2. 创建一个Vue的实例
    // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
    var vm = new Vue({
      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
      data: { // data 属性中，存放的是 el 中要用到的数据
        msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
      }
    })
  </script>

        这里我来介绍以下，Vue借鉴了MVVM的设计思想，MVVM中的M就是Model是数据模型，就是我们Vue实例中的data属性，V就是View，对应的是我们的Html代码，之后我们的html代码大部分都会写在Vue提供的template标签中。而VM就是模型视图，我们通过Vue实例来对它进行操作，在我们使用Vue之前，都要先创建一个Vue实例，这个Vue实例就是VM的调度者。
        以上代码我就创建了一个Vue实例：
        el属性指定了我们要控制的页面上的区域（dom元素）。#app对应的是区域的id。
        data属性中提供了待使用的数据。表述方式类似json的键值对，键名为“msg”，值为“欢迎学习Vue”

在页面上显示数据

        我们想在页面上显示数据，只需要在对应了Vue实例控制的区域内用双重大括号包裹data属性中定义的数据名字即可。如下代码：

  <div id="app">
    <p>{{ msg }}</p>
  </div>

        好了，本篇文章就介绍到这里，下面是留下Vue的全部代码截图。