在使用HTML編寫(xiě)網(wǎng)頁(yè)時(shí)，經(jīng)常需要引用一些JavaScript框架，Vue是其中一種常用的框架。Vue是一個(gè)漸進(jìn)式框架，可以輕松構(gòu)建現(xiàn)代化、可復(fù)用、交互性強(qiáng)的用戶界面，所以在設(shè)計(jì)WEB應(yīng)用程序時(shí)，引用Vue框架非常重要。
Vue可以通過(guò)多種方式引入到HTML文件中。其中一種常用的方法是直接在HTML文件中引入Vue文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
...
</div>
<script src="app.js"></script>
</body>
</html>在引入Vue之后，下一步是創(chuàng)建Vue實(shí)例，即在app.js文件中編寫(xiě)Vue代碼：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})在這里，我們定義了一個(gè)名為app的Vue實(shí)例，該實(shí)例可以通過(guò)指定選擇器訪問(wèn)到HTML中的根元素（在本例中為id為app的元素）。讓我們將數(shù)據(jù)設(shè)置為“Hello Vue！”
現(xiàn)在，讓我們將Vue元素添加到HTML文件中，在app元素中插入我們的Vue消息：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="app.js"></script>
</body>
</html>現(xiàn)在，當(dāng)打開(kāi)這個(gè)HTML文件時(shí)，將看到頁(yè)面中顯示“Hello Vue！”
我們已經(jīng)成功地在HTML文件中引入并使用了Vue框架。總結(jié)一下，如果想使用Vue實(shí)例，請(qǐng)?jiān)贖TML文件中引入Vue.js，接著在JavaScript文件中定義Vue實(shí)例，最后在HTML文件中通過(guò)選擇器訪問(wèn)HTML元素。這就是引用Vue框架的基本過(guò)程。
下一篇vue中組件data