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 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
推荐文章: