最新文章推荐：使用 Vue.js 和 Bluemix 创建模块化的单页应用程序
Posted developerWorks中国
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了最新文章推荐：使用 Vue.js 和 Bluemix 创建模块化的单页应用程序相关的知识，希望对你有一定的参考价值。
第1部分: 开发和测试前端
使用 Vue.js、webpack、Foundation 和 NPM 借助 UI 和 CRUD 功能构建 RESTful 应用程序
在这个由两部分组成的教程中，构建一个具有响应式 UI、简单而又强大的单页应用程序，并将其部署到云中。在第 1 部分中，将使用Vue.js javascript 框架开发前端，使用 Node Package Manager (NPM) 执行依赖关系管理，使用 webpack作为构建工具，使用 Foundation 实现响应式 UI。学习 Vue.js 的基本原理和高级使用，使用模块化设计来支持不断扩展的应用程序。在 第 2 部分 中，会将应用程序部署到 IBM® Bluemix®。
当创建一个会部署到浏览器环境中的应用程序时，必须解决我称之为应用程序/视图状态同步 的问题：您需要控制前端视觉结果（DOM的形状），还需要处理应用程序数据。DOM与数据之间的交互会随着应用程序的增长而变得越来越复杂，所以自行管理该交互会变成一种容易出错的做法。理想情况下，您会将这些工作转交给第三方框架来负责。您希望投入尽可能少的精力来解决应用程序/视图状态同步问题。
在您可选择的几个JavaScript 框架中，新一代 Vue.js框架非常关注如何用极少的外部特性来解决应用程序/视图状态同步问题。Vue.js 是一个面向对象、数据驱动的 DOM 管理系统—或者更简洁地说，就是一个对象-DOM 绑定系统。Vue.js 负责在浏览器 DOM中创建应用程序的数据清单。
这个由两部分组成的教程系列将介绍 Vue.js 的基本知识，然后介绍 Vue 的高级用法。在第 1部分中，将会使用 Vue、NPM 和 webpack 为一个模块化应用程序构建一个小巧但功能全面的UI，以及一个符合生产级的构建版本和依赖关系管道。在 第 2 部分 中，会通过 IBM Bluemix 平台即服务将该应用程序部署在云中。完成本教程的学习后，您就可以轻松地在自己的项目中应用 Vue。请参见 下载 部分，获取第 1 部分的完整示例代码。
Vue.js 的实践性介绍
尽管具有极低的复杂性，但 Vue.js支持复杂的、大规模的需求。该框架为您提供了足够的工具来构建您所需的任何功能，无需堆叠其他大量特性。根据我的经验，与其他框架相比，Vue在复杂性和特性频谱中找到了简单性与功能的平衡点：
首先，我将向您介绍 Vue.js 的基础知识，以便您能了解 Vue 的工作原理和如何最佳地使用它。然后，在此基础上，您将使用更高级的Vue 技术，以及现代的、提供生产级环境支持的工具来构建应用程序和管道。
简单的值绑定
为新项目创建一个名为 recruiteranking 的目录。然后 下载 最新的 Vue包，将其保存在一个单独的位置，在包含该 Vue 包的 recruiteranking 中创建一个 index.html 文件，如清单 1 所示。
清单 1. 基本的 index.html文件
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" ></script>
</head>
<body>
<div id="test">
<p>User: {{ username }}</p>
</div>
<script>
test = new Vue({ // 1 — Instantiate a vue instance
el: '#test',
data: {
username: "Luke Skywalker"
}
});
</script>
</body>
</html>
“Vue 中的大部分操作都是通过 Vue 实例完成的，这正是我将 Vue 描述为面向对象的原因。”
请阅读原文以获得更多信息
以上是关于最新文章推荐：使用 Vue.js 和 Bluemix 创建模块化的单页应用程序的主要内容，如果未能解决你的问题，请参考以下文章