翻译Vue.js 2.0 教程 起步

Posted 2020-08-15

第一次在博客园上翻译东西，因为现在还没有中文的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>

JS
var app = new Vue({
  el: ‘#app‘,
  data: {
    message: ‘Hello Vue!‘
  }
})

outPut
Hello 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>

JS
var app2 = new Vue({
  el: ‘#app-2‘,
  data: {
    id: ‘inspect-me‘
  }
})

outPut
Inspece me//当前这个span元素的id为"inspect-me"

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

 未完...