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 来了解更多。