vue頁(yè)面有3個(gè)組成部分：1、模板（template），即template標(biāo)簽包裹的界面展示代碼（HTML代碼）；2、script標(biāo)簽包裹的業(yè)務(wù)實(shí)現(xiàn)代碼（js腳本代碼）；3、style標(biāo)簽包裹的界面樣式代碼（css樣式代碼）。

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

一個(gè)vue頁(yè)面通常由三部分組成：模板(template)、js(script)、樣式(style)

• <script>export default {業(yè)務(wù)實(shí)現(xiàn)代碼}</script>

  立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

[template-模板]

（1） 模板只能包含一個(gè)父節(jié)點(diǎn)，也就是說(shuō)頂層的div只能有一個(gè)（如上圖，父節(jié)點(diǎn)為#app的div，其沒(méi)有兄弟節(jié)點(diǎn)）

（2）是子路由視圖插槽，后面的路由頁(yè)面都顯示在此處，相當(dāng)于iframe

【script-JS代碼】

vue通常用es6來(lái)寫(xiě)，用export default導(dǎo)出，其下面可以包含數(shù)據(jù)data，生命周期(mounted等)，方法(methods)等。

【style-CSS樣式】

樣式通過(guò)style標(biāo)簽包裹，默認(rèn)是影響全局的，如需定義作用域只在該組件下起作用，需在標(biāo)簽上加scoped，

引入外部CSS示例：

<style>
    import './assets/css/public.css'
</style>

【相關(guān)推薦：vuejs視頻教程、web前端開(kāi)發(fā)】

以上就是vue頁(yè)面有哪些組成的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！