如颖随行|「Vue 入门系列」第一期，新手快速入门指南，初识 Vue 引言Vue是JavaScript开发人员非常喜欢

引言Vue 是 JavaScript 开发人员非常喜欢的技术之一，所以，我希望能为那些想学习 Vue 技术的朋友们提供一些简要的说明，使它形成一个系列，帮助他们迈入 Vue 开发的大门。
学习 Vue 的先决条件

熟悉 HTML 和 CSS，可以尝试用它们做一些页面布局
了解 JavaScript 的基础知识
对 ES6 的语法和新特性有一定了解
会用 npm 进行全局安装和项目依赖安装

什么是 Vue？Vue 是一套开源的前端 JavaScript 框架，核心只关注视图层，目前非常流行，备受前端开发人员喜爱。 Vue 非常容易上手，并且可以和其它第三方库或现有项目整合使用。
但最让我感到兴奋的特性是 Vue 基于数据驱动视图，数据变了，视图就跟着变了。
关于 Vue 的优点和特性相信大家已经了解很多了，更多细节可以移步 Vue 官网查看。
安装 Vue 与一些基础知识有两种方式可以在项目中使用 Vue，我们结合一个示例，展示第一种使用 Vue 的方式，它是最简单的使用 Vue 的方式。
Vue CDN 方式
试一试
新建一个叫 vue-demo 的目录，进入目录，在里面建立一个 index.html 文件。这个示例将会在页面中显示一句话：“Hello, VueJS!” 。
Hello, VueJS{{ message }}{{ message }}我不是 VueJS 接管的！

运行效果
正如代码中标签内所示，通过这种方式是最简单的一种应用 Vue 的方式，代码结构也相对简洁，正是利用这一特点，我们可以更清晰的关注上面代码示例本身的知识细节。
每一个 Vue 应用都是以一个 Vue 实例开始的，这个 Vue 实例通过 new Vue 构造函数创建，例如示例中的 app 就是一个 Vue 实例。
const app = new Vue({el: '#app',data: {message: 'Hello VueJS!'}})有了根实例，就可以包含其它嵌套的组件，例如，一个通讯录应用，它的根实例可以包含用户列表组件，用户列表组件又嵌套了具体每一个用户信息的组件和编辑、删除按钮组件。
根实例 └─ 用户列表组件└─ 每一行用户信息组件| 修改按钮组件| 删除按钮组件仔细观察上面的代码 JS 部分，我们给 Vue 实例传入了一组选项对象。
其中 el: '#app'，代表 Vue 实例挂载到了 id 为 app 的 DOM 元素上，这个 DOM 元素是一个 div。 Vue 将对这个 div 全权控制。
而 id 为 app2 的 div 则不受 Vue 的控制。这有机会让我们可以利用其它类库控制 app2 中的内容，例如 jQuery。这充分说明 Vue 可以很好的整合其它库。
{{ message }}{{ message }}我不是 VueJS 接管的！可以将 el: '#app' 修改为 el: '#app2' 看看 Vue 接管的 div 渲染情况。
el 选项指定的 HTML 容器被提取出来，当作模板。不过，还可以利用下面这种方式手动挂载。
{{ message }}{{ message }}我不是 VueJS 接管的！利用手动挂载方式，不需要提供 el 选项。
现在，让我们关注模板。
写在之间的 html 代码叫做模板，模板中的 {{ message }} 相当于一个占位符， Vue 会将选项 data 中的数据渲染到 DOM 中的 {{}} 位置，例如 HTML 中的 {{ message }} 会被写入 data 中 message 属性的数据 'Hello, VueJS!'。