Vue.js快速入门教程

像AngularJS这种前端框架可以让我们非常方便地开发出强大的单页应用,然而有时候Angular这种大型框架对于我们的项目来说过于庞大,很多功能不一定会用到。这时候我们就需要评估一下使用它的必要性了。如果我们仅仅需要在一个简单的网页里添加屈指可数的几个功能,那么用Angular就太麻烦了,必要的安装、配置、编写路由和设计控制器等等工作显得过于繁琐。

这时候我们需要一个更加轻量级的解决方案。Vue.js就是一个不错的选择。Vue.js是一个专注于视图模型(ViewModal)的框架。视图模型是UI和数据模型之间进行数据交流的桥梁,实现了UI到数据模型之间的双向数据绑定。它不是一个“完整的框架”,而是一个专注于视图层的简单灵活的框架。

接下来我们将通过一个简单的备忘录应用来带大家了解Vue.js的基础知识。为了让大家更加关注Vue.js本身,我们设计一个基于本地数据的客户端应用,在本文最后会提及Vue.js与后端的交互方式。

准备工作

让我们先通过npm获取Vue.js和Bootstrap(非必须,这里是为了应用其样式库),在命令行中输入以下内容

rush:js;"> npm install vue bootstrap

然后创建index.html和app.js两个文件

rush:js;"> touch index.html app.js

同时添加以下内容到index.html中

rush:js;"> <Meta charset="utf-8"> Vue dist/css/bootstrap.min.css">
heading">

Add an Event