首页 > 代码库 > 【翻译】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 教程 起步