上QQ阅读APP看书，第一时间看更新
2.1 极速入门
（本节对应的源文件为public/with_external_link.html）
从体验的角度来看，Vue.js的安装非常简单，只需要引入一个第三方的JS包即可。
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.2"></script>
下面是一个简单的例子。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.2"></script>
</head>
<body>
<div id='app'>
{{show_my_text}}
</div>
<script>
let init = {
data() {
return {
show_my_text: 'Vue.js is the best one page App!'
}
}
}
Vue.createApp(init).mount('#app')
</script>
</body>
</html>
上面的代码非常简单：
（1）在<head>中引入Vue.js包。
（2）在<body>中，定义了<div id='app>'</div>，可以认为，所有的页面展示都是在这个<div>中。每次我们做任何点／单击的时候，整个页面不会刷新，都是Vue.js框架操作代码对其中的内容进行局部刷新。
（3）后面的Vue.createApp(init).mount('#app')就是真正的操作代码。
// 定义一个临时的对象，该对象包含一个data()函数，在data()函数中返回一个对象
// 该对象的一个key是show_my_text
// 可以简单地认为，需要在页面渲染的变量都会定义在data()中
let init = {
data() {
return {
show_my_text: 'Vue.js is the best one page App!'
}
}
}
// 加载JS代码并渲染页面，所有内容的渲染都是基于 <div id='app' >来操作的
Vue.createApp(init).mount('#app')
（4）使用浏览器打开这个页面后，就可以看到如图2-1所示的页面。
图2-1 页面效果
这个页面的源代码可以在Demo项目中的public/with_external_link.html中看到并直接运行。