![Vue.js快速入门](https://wfqqreader-1252317822.image.myqcloud.com/cover/548/31794548/b_31794548.jpg)
上QQ阅读APP看书,第一时间看更新
2.1 极速入门
如果只从体验的角度来看,Vue.js的安装非常简单,只需要引入一个第三方的js包即可。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
下面是一个简单的例子。
![](https://epubservercos.yuewen.com/7D93CA/17214369305518906/epubprivate/OEBPS/Images/22.jpg?sign=1738863538-I4W6OKhCj72pvykN4fNuqy7qRbq610cN-0-ad51f630209ac4a53f70905a1c6a84ad)
上面的代码非常简单。
(1)在head中引入Vue.js包。
(2)在<body>中,定义了一个<div id='app>'</div>,可以认为,所有的页面展示都是在这个<div>中。每次我们做任何点/单击的时候,整个页面不会刷新,都是Vue.js框架操作代码,对其中的内容进行局部刷新。
(3)后面的var app=new Vue...就是真正的操作代码。
![](https://epubservercos.yuewen.com/7D93CA/17214369305518906/epubprivate/OEBPS/Images/Figure-P23_65341.jpg?sign=1738863538-KHqD26Wbj7F8nPVCWtzybg21xnWzHiku-0-837159795b83a9b46590cb788ed8afc9)
(4)使用浏览器打开这个页面后,就可以看到如图2-1所示的页面。
![](https://epubservercos.yuewen.com/7D93CA/17214369305518906/epubprivate/OEBPS/Images/Figure-P23_63529.jpg?sign=1738863538-uY9jBiDdWxSh937k02To8KJ2ByXJN6ZR-0-6e5adf81ca04a17826f6ad398e8a8146)
图2-1 页面效果
这个页面的源代码可以在code_example/hello_world_bare_Vue.js中看到并直接运行。