Vue学习笔记001：快速启动

发表于 分类于 阅读次数： Disqus：

Vue是三大前端框架之一，在国内应该是现在最火的框架了。

前端框架和库的区别

前端和框架和前端库都是我们经常用到的工具。比如前几年非常火的jQuery就是一个前端库，前端库主要用于某一个专门的功能的集合，比如jQuery就用于操作DOM，库的功能由开发者来操纵，可以从封装的角度来理解库，我们从库中引用封装好的功能，再应用到项目中。

前端框架是一个全方位的功能更齐全的架构。和库相比，框架更像一整套解决方案，它有自己的执行规范，同时按照它的规范来执行开发者编写的代码。

我们可以将框架的使用总结为三个步骤：

  1. 初始化框架
  2. 执行自己编写的代码
  3. 释放一些资源

vue起步

引入

1
npm i vue -S

下载之后我们可以在vue的包里看到dist文件包，里面有不同的vue文件：

这是针对不同的规范的vue版本。这里我们使用vue.js。在实际项目中可以使用vue.min.js，但在开发环境中，使用vue.js可以有报错信息，方便我们修改。

启动

如前面所说，框架需要先初始化，那么我们就按步骤来启动一个vue框架实现的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>vue project</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 1. 引入包 -->
  	<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script>
    <!-- 2. 创建vue对象来启动vue -->
      new Vue({
        // 3. 配置options
        //3.1 配置发生行为的目的地(即vue在哪里生效)，建议不要用html元素，所以我们创建一个div来作为容器
        el: "#app",
        // 3.2 配置装载的模板
        template: '<div><h1>{{text}}</h1></div>',
        // 3.3 动态数据声明
        data: function(){
          return {
            text: "hello world"
          }
        }
      })
    </script>
  </body>
</html>

这样我们就完成了vue最简单的配置，在浏览器中打开html文件就可以看到如下效果：