Vue.js 中的 Hello World

Vue.js正在迅速成为一个非常受欢迎的选项作为一个反应组件的库. 它很轻,容易掌握和有趣的玩,它可以证明是一个很好的替代其他库,如React或Angular。

让我们用最简单的例子让我们的脚湿起来. 以下是我们基本的Hello World应用程序的代码,突出了有趣的部分:

 1<!DOCTYPE html>
 2<html lang="en">
 3  <meta>
 4    <meta charset="UTF-8">
 5    <title>Hello World in Vue.js</title>
 6  </meta>
 7
 8  <body>
 9    
10    <div id="hello-world-app">
11      <h1>{{ msg }}</h1>
12    </div>
13
14    <script
15      src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js">
16    </script>
17
18    <script>
19      new Vue({
20        el: "#hello-world-app",
21        data() {
22          return {
23            msg: "Hello World!"
24          }
25        }
26      });
27    </script>
28
29  </body>
30</html>

逐步分解:

首先,我们有一个基本的 HTML 锅炉文件
一个具有 #hello-world-app ID的 div 将包含我们的应用程序
在 div 中,我们有一个 h1 和一个参考的 msg 数据
我们呼吁在 cdnjs托管的微型 Vue.js 库。 2.1.6 是这个写作的最新版本
然后我们实例一个新的 Vue 对象,并告诉它,我们的应用程序是 #hello-world-div-app
最后,我们提供与数据对象所需的数据。

这是为了这个简短的介绍! 通过阅读官方 Vue.js 指南的 getting started section 来了解更多。