首页 > 代码库 > 【翻译】Vue.js 2.0 教程 起步

【翻译】Vue.js 2.0 教程 起步

第一次在博客园上翻译东西,因为现在还没有中文的Vue.js2.0文档,很多英语不好的同学就郁闷了。以后有时间就翻译一些,不过等我翻译完,官方中文文档肯定就上线了......大家可以打开英文原网站,因为里面有些例子可以直接演示。

官方英文文档链接

正文:

起步

什么是Vue.js?

Vue(发音类似view)是一个紧跟时代潮流的框架,为构建用户界面而生。不同于其他庞大的框架,Vue的设计是从底层向上逐步递增的(译者附:刚开始使用Vue不需要太多依赖)。Vue的核心库不仅仅聚焦于视图层,它还非常容易结合其他库和现存的项目使用。另一方面,当你能够熟练使用一些流行的工具和Vue提供的插件库时,Vue也能够完美的胜任开发复杂且高性能的单页应用的任务。

如果你是一个老练的前端开发者,同时想了解Vue和其他库或框架的区别,请点击这里。

开始学习

最简单的方法体验Vue.js就是尝试JSFiddle的Hello World例子。随便在另一个选项卡中打开这个链接,并跟随我们去体验一些基础示例。如果你更喜欢从包管理工具下载或安装Vue.js,查看安装教程。

响应的数据绑定(Declarative Rendering)

Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同步非常简单,只需要使用简单的模板语法:

HTML<div id="app">  {{ message }}</div>
JSvar app = new Vue({  el: ‘#app‘,  data: {    message: ‘Hello Vue!‘  }})
outPutHello Vue!

我们已经创建好非常nice的第一个Vue app了!它看起来相当小巧,只是渲染一个string模板,但是Vue.js在背后做了大量工作。现在数据和DOM已经绑定了,而且现在所有都是响应的。我们如何知道?打开你的浏览器的控制台,修改 exampleData.name,你将看到上例相应地更新。

注意我们不需要撰写任何 DOM 操作代码:被绑定增强的 HTML 模板是底层数据状态的声明式的映射,数据不过是普通 JavaScript 对象。我们的视图完全由数据驱动。

除了插入文本,我们还可以绑定元素的属性,像这样:

HTML<div id="app-2">  <span v-bind:id="id">Inspect me</span></div>
JSvar app2 = new Vue({  el: ‘#app-2‘,  data: {    id: ‘inspect-me‘  }})
outPutInspece me//当前这个span元素的id为"inspect-me"

这里我们遇到一些新的东西,你看到的v-bind称之为指令。

 未完...

【翻译】Vue.js 2.0 教程 起步