![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=1738850201-9TqLTD1EVfWCAPLLvM0aqXVozkb5Qzig-0-1a457296485e6cd5e2221fe6041c5de4)
上面的代码非常简单。
(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=1738850201-DPjIQpMZYNq66GFC4wK1bX7a0yYNO5uJ-0-8dbd63ce4258fbc75fbb0730d6c9b9b2)
(4)使用浏览器打开这个页面后,就可以看到如图2-1所示的页面。
![](https://epubservercos.yuewen.com/7D93CA/17214369305518906/epubprivate/OEBPS/Images/Figure-P23_63529.jpg?sign=1738850201-9OPlqdPryjCRL8RBgOfd54lBU6553xOZ-0-92198e949ec25f18766e261e4deced1b)
图2-1 页面效果
这个页面的源代码可以在code_example/hello_world_bare_Vue.js中看到并直接运行。