第2章 原生的Vue.js
所谓的原生Vue.js，就是独立的Vue.js框架，不与Webpack等框架结合使用。学习这个比较有必要，因为在后期查看官方文档时，很多概念都是用“原生Vue.js”的形式说明的，脱离了其他框架，说明起来更加简明一些。
虽然我们在做项目时极少会使用原生Vue.js，但是对于未来的学习大有好处。
2.1 极速入门
如果只从体验的角度来看，Vue.js的安装非常简单，只需要引入一个第三方的js包即可。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
下面是一个简单的例子。
上面的代码非常简单。
（1）在head中引入Vue.js包。
（2）在<body>中，定义了一个<div id='app>'</div>，可以认为，所有的页面展示都是在这个<div>中。每次我们做任何点/单击的时候，整个页面不会刷新，都是Vue.js框架操作代码，对其中的内容进行局部刷新。
（3）后面的var app=new Vue...就是真正的操作代码。
（4）使用浏览器打开这个页面后，就可以看到如图2-1所示的页面。
图2-1 页面效果
这个页面的源代码可以在code_example/hello_world_bare_Vue.js中看到并直接运行。
2.2 实际项目
下面我们看一个实际的例子。这个例子就是SPA的应用：TODO-list，来自于Vue.js的官方。
需求如下：
（1）可以列出代办事项。
（2）可以新增代办事项。
（3）可以把待办事项标记成“已办完”。
该例子的目的是为了让大家对于原生的Vue.js有一个直观的认识，里面的技术细节其实有些复杂，使用了基本的Vue.js知识、Component（组件）、Watcher（监听器）、Computed Properties（计算得到的属性）、Filter（过滤器）等概念。读者暂时不用深究，在第4章Webpack+Vue.js实战中会依次讲解到。
读者只需要对实际的原生项目有所了解即可。
2.2.1 运行整个项目
新建文件index.html，内容如下：
将该文件保存后，使用浏览器直接打开，就可以看到效果。原生Vue.js的TODO-list项目界面如图2-2所示。
图2-2 原生Vue.js的TODO-list项目界面
2.2.2 HTML代码的<head>部分
注释如下所示。
2.2.3 HTML代码的<body>部分
注释如下所示。
2.2.4 js代码部分
注释如下所示。
2.2.5 小结
该例子总共217行，代码精炼、功能齐备。可以看出，使用Vue.js做开发效率非常高。
完整的代码可见：https://cn.vuejs.org/v2/examples/todomvc.html。
但是，一旦项目的需求增加，代码也会越来越膨胀，把html, js和css代码都写在一个文件中不是好主意，所以需要以一种更好的形式来组织文件，这就是Webpack框架下的Vue.js。