Vue入门基础（火柴）

前言

由于个人十分欣赏博友——小火柴的蓝色理想，他的博文我看了大多数，觉得十分的精彩，然而很多都是看后即忘。我想除了没有经常动手敲代码，更可能是在看的时候忽略了很多细节，因此打算把他的博文通通给“抄袭”下来，各位不要和我一般见识哈^_^

概述

Vue.js是一套构建用户界面的渐进式框架，采用的是自底向上增量开发的设计，核心库只关注视图层，不仅易于上手，还便于和第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue也完全能够为复杂的单页应用程序提供驱动。

下面来解释下，何为渐进式框架，请看下图：

如果只使用Vue最基础的声明式渲染的功能，则完全可以把Vue当做一个模板引擎来使用；

如果想以组件化开发方式进行开发，则可以进一步使用Vue里面的组件系统；

如果要制作SPA（单页应用），则使用VUe里面的客户端路由功能；

如果组件越来越多，需要共享一些数据，则可以使用Vue里的状态管理；

如果想在团队里执行统一的开发流程或规范，则使用构建工具；

所以，可以根据项目的复杂度来自主选择使用Vue里面的功能。

安装

Vue.js有三种获取方式

1、官网直接下载

2、使用CDN（内容分发网络，地址：https://unpkg.com/vue）

3、使用NPM（npm install vue）

获取Vue之后，直接使用script标签引入即可使用

模板插值

对于Vue最简单的应用就是将其当做一个模板引擎，也就是采用模板语法把数据渲染进DOM。Vue使用双大括号语法来进行文本插值，下面的message相当于一个变量或占位符，最终会表示为真正的文本内容。

<div id="app">
    {{message}}
</div>

构造器

每个Vue应用都是通过构造函数Vue创建一个Vue的根实例启动的，经常使用vm（ViewModel的简称）这个变量名表示Vue实例。

var vm = new Vue({
    //选项
})

在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法和生命周期钩子等选项。

var vm = new Vue({
    el:"#app",
    data:{
        message:"hello world"
    }
})

上面为Vue构造函数传入了一个对象，对象中包括el和data这两个参数

【el】

参数el，是element的缩写，用于提供一个在页面上已经存在的DOM元素作为Vue实例的挂载目标；

参数值有两种类型，包括string和HTMLElement；

上例中，el:"#app"表示挂载目标为id是"app"的元素，也可以写成el:document.getElementById("app")

【data】

参数data表示Vue实例的数据对象；

上例中，data:{message:"hello world"}表示的是变量message所代表的真实值为"hello world"

简单实例

下面将Vue的模板插值和构造器结合起来，制作一个简单的实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <h4>{{message}}</h4>
    </div>

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          message: "hello world"
        }
      })
    </script>
  </body>
</html>

大家可以直接copy代码到本地上进行查看效果

【数据绑定】

看起来上面的例子跟单单渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。现在数据和DOM已经被绑定在一起，所有的元素都是响应式的。在控制台中修改vm.message的值，可以看到DOM元素相应的更新。