Vue.js: 三分钟简明教程

Vue.js 是一个用于构建用户界面的 JavaScript 库。 去年它开始在网络中受到广大开发者的欢迎。 它重量轻，学习起来相对容易，而且功能强大。

在三分钟阅读文章中，你将看到一些如何构建基本的 Vue 应用程序。

让我们开始吧。

模板语法和数据

Vue.js 的核心是一个简单的模板语法，如下所示：

<div id="myApp">
    {{ message }}
</div>

它与下面的 JavaScript 语法相对：

var myApp = new Vue({
   el: '#myApp',
   data: {
       message: 'Hello world!'
   }
})

这样页面上就可以显示 Hello World！。

el：＃myApp 部分的作用是告诉 Vue 将应用程序渲染到 ID 为 myApp 的 DOM 元素中。 * data 对象存储的是你的应用程序中所使用的数据。 我们在这里只添加了一个关键字 message ，我们在 HTML 中引用这个关键字：{{message}}。

Vue 负责将 data 对象渲染到 DOM 元素中，如果 data 元素中的数据发生变化时，对应的页面也会被更新。

这被称为声明性渲染。 你只需指定你想要更新的 内容，而 Vue 会自动去 实现。

您可以通过以下操作更改数据：

myApp.message = 'Some new value';

这是截图：

指令

接下来学习的概念是指令。 指令就是以 v- 开头的 HTML 属性， 用来给 DOM 添加响应式行为。

当我们想如果条件为真时就渲染，为假时就隐藏时，就使用 v-if.

在 HTML 中可以这样写。

<div id="app">
    <p v-if="seen">Now you see me</p>
</div>

对应的 JavaScript 代码：

var app = new Vue({
    el: '#app',
    data: {
        seen: true
    }
})

如果 data 里的 seen 为真，Now you see me 就会被渲染出来。 你可以把 seen 改为假来隐藏掉它：

app.seen = false;

截图如下：

还有很多指令，像 v-for、v-on、 v-bind 和 v-model 等等。

处理用户输入

来学习一下另一个核心指令 v-on 。它会在 DOM 元素上挂载一个事件监听器，你可以用它来处理用户输入。 你还可以在冒号后面指定事件的类型， 比如 v-on:click 会监听点击事件。

<div id="app">
    <button v-on:click="myClickHandler">Click me!</button>
</div>

myClickHandler 是 methods 对象中的一个方法。 当然，你的应用里的所有方法都要写在这个对象里，至于这个对象里可以写多少个方法，那就全看你心情了。

var app = new Vue({
    el: '#app',
    methods: {
        myClickHandler: function () {
            console.log('button clicked!');
        }
    }
})

当点击了按钮以后，控制台里就会输出 button clicked! 。

截图如下：

将它们联系在一起

现在让我们创建一个例子，在这个例子中我们使用 data 和methods，将我们迄今为止学到的东西联系在一起。

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="changeMessage">点击我 !</button>
</div>

对应的 JavaScript 代码:

var app = new Vue({
    el: '#app',
    data: {
        message: '开始信息'
    },
    methods: {
        changeMessage: function () {
            this.message = '消息已经改变！'
        }
    }
})

最初，它会在页面上显示 开始消息，然后点击它将显示 此消息已经改变*。

this 关键字指的是 Vue 实例，我们称之为 app。 正是由于这个实例以及我们定义的数据存在，所以我们可以通过 this.message 来引用 message 数据。

这样你应该知道如何用 Vue.js 来开始创建简单的应用程序了吧。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://medium.freecodecamp.org/learn-ba...

译文地址：https://learnku.com/vuejs/t/23282/vuejs-...