Vue.js: 三分钟简明教程

翻译 Summer ⋅ 于 2个月前 ⋅ 9347 阅读 ⋅ 原文地址

站点的翻译文章创建时,您将第一时间收到通知。

这是一篇社区协同翻译的文章,已完成翻译,更多信息请点击 协同翻译介绍

file

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

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

让我们开始吧。

Ellison 翻译于 2个月前

模板语法和数据

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';

这是截图:

file

Ellison 翻译于 2个月前

指令

接下来学习的概念是指令。 指令就是以 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;

截图如下:

file

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

Soldoros 翻译于 2个月前

处理用户输入

来学习一下另一个核心指令 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!

截图如下:

file

Soldoros 翻译于 2个月前

将它们联系在一起

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

<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 来开始创建简单的应用程序了吧。

Ellison 翻译于 2个月前

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

译文地址:https://vuejscaff.com/topics/38/vuejs-th...


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

回复数量: 0
暂无回复~
您需要登陆以后才能留下评论!

Vue.js 官方中文文档

前端开发环境部署