
上QQ阅读APP看书,第一时间看更新
2.1 极速入门
如果只从体验的角度来看,Vue.js的安装非常简单,只需要引入一个第三方的js包即可。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
下面是一个简单的例子。

上面的代码非常简单。
(1)在head中引入Vue.js包。
(2)在<body>中,定义了一个<div id='app>'</div>,可以认为,所有的页面展示都是在这个<div>中。每次我们做任何点/单击的时候,整个页面不会刷新,都是Vue.js框架操作代码,对其中的内容进行局部刷新。
(3)后面的var app=new Vue...就是真正的操作代码。

(4)使用浏览器打开这个页面后,就可以看到如图2-1所示的页面。

图2-1 页面效果
这个页面的源代码可以在code_example/hello_world_bare_Vue.js中看到并直接运行。