快捷導(dǎo)航

通過html文件來使用Vue的單文件組件形式詳解

更新時間：2023年05月26日 08:36:08 作者：菜園前端

這篇文章主要介紹了通過html文件來使用Vue的單文件組件形式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

非單文件組件

可以理解為是通過 html 文件來使用 Vue。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                },
                template: '<div id="app">{{ message }}</div>'
            })
        </script>
    </body>
</html>

這種方式在很多中小規(guī)模的項目中運(yùn)作的很好，在這些項目里 JavaScript 只被用來加強(qiáng)特定的視圖。但當(dāng)在更復(fù)雜的項目中，或者你的前端完全由 JavaScript 驅(qū)動的時候，下面這些缺點將變得非常明顯。

非單文件組件缺點

全局定義 (Global definitions) 強(qiáng)制要求每個 component 中的命名不得重復(fù)
字符串模板 (String templates) 缺乏語法高亮，在 HTML 有多行的時候，需要用到丑陋的 \
不支持 CSS (No CSS support) 意味著當(dāng) HTML 和 JavaScript 組件化時，CSS 明顯被遺漏
沒有構(gòu)建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用預(yù)處理器，如 Sass 和 Babel

單文件組件

文件擴(kuò)展名為 .vue 的 single-file components (單文件組件) 為以上所有問題提供了解決方法，并且還可以使用 webpack 或 Browserify 等構(gòu)建工具。

<template>
    <div>
        {{ message }}
    </div>
</template>
<script>
export default {
    data() {
        return {
            message: 'hello world'
        }
    }
}
</script>

這些特定的語言只是例子，你可以只是簡單地使用 Babel、TypeScript、SCSS、PostCSS 或者其他任何能夠幫助你提高生產(chǎn)力的預(yù)處理器。

單文件組件一般可以通過 Vue CLI 腳手架快速搭建一個項目，并且已經(jīng)幫你配置好了 Babel、Webpack 熱更新等功能。

后續(xù)所有和 Vue 相關(guān)的文章都會以單文件組件的形式來舉例，更多關(guān)于Vue單文件組件形式的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vue .then和鏈?zhǔn)秸{(diào)用操作方法
這篇文章主要介紹了vue .then和鏈?zhǔn)秸{(diào)用操作方法,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-07-07
使用Vue與Fabric.js開發(fā)一個圖片標(biāo)注工具
在現(xiàn)代的Web應(yīng)用開發(fā)中,能夠?qū)D片進(jìn)行標(biāo)注是一項非常實用的功能,無論是在項目管理、圖像處理還是教育領(lǐng)域,這種功能都能極大提升用戶體驗,本文將介紹如何利用Vue框架結(jié)合Fabric.js庫來構(gòu)建一個具有矩形框選、箭頭繪制和文本添加功能的圖片標(biāo)注工具,需要的朋友可以參考下
2026-02-02
Vue可左右滑動按鈕組組件使用詳解
這篇文章主要為大家詳細(xì)介紹了基于Vue可左右滑動按鈕組組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
使用VUE+iView+.Net Core上傳圖片的方法示例
這篇文章主要介紹了使用VUE+iView+.Net Core上傳圖片的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
web前端Vue報錯:Uncaught?(in?promise)?TypeError:Cannot?read?
這篇文章主要給大家介紹了關(guān)于web前端Vue報錯:Uncaught?(in?promise)?TypeError:Cannot?read?properties?of?nu的解決方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
詳解vue跨組件通信的幾種方法
本篇文章主要介紹了詳解vue跨組件通信的幾種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
用VueJS寫一個Chrome瀏覽器插件的實現(xiàn)方法
這篇文章主要介紹了用VueJS寫一個Chrome瀏覽器插件的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02
解決vue keep-alive 數(shù)據(jù)更新的問題
今天小編就為大家分享一篇解決vue keep-alive 數(shù)據(jù)更新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
基于Vue的側(cè)邊目錄組件的實現(xiàn)
這篇文章主要介紹了基于Vue的側(cè)邊目錄組件的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
vue3中路由傳參query、params及動態(tài)路由傳參詳解
vue3中的傳參方式和vue2中一樣,都可以用query和params傳參,下面這篇文章主要給大家介紹了關(guān)于vue3中路由傳參query、params及動態(tài)路由傳參的相關(guān)資料,需要的朋友可以參考下
2022-09-09