淺析Vue單文件組件與非單文件組件使用方法
更新時間：2022年12月21日 12:01:33 作者：小五ccc
這篇文章主要介紹了Vue單文件組件與非單文件組件使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
單文件組件：一個文件中只包含一個組件，后綴為.vue（常用）
<template>
<!-- html部分 -->
<div>
<p class="title">{{name}}</p>
</div>
</template>
<script>
// js部分
export default {
data() {
return {
title: '這是標題'
}
}
}
</script>
<style>
/*css部分*/
.title {
font-size: 24px;
color: orange;
}
</style>
非單文件組件：一個文件中包含有多個組件，后綴為.html
在非單文件組件中“定義、注冊、使用”組件
【下例中將header-com注冊為局部組件、footer-com注冊為全局組件】
<div id="root"> <!-- 使用局部組件 --> <header-com></header-com> <!-- 使用全局組件 --> <footer-com></footer-com> </div>
// 定義組件
const header = Vue.extend({
template: `
<div id="header-container">
{{title}}
</div>
`,
data() {
return {
title: '這是標題'
}
}
});
// 定義組件
const footer = Vue.extend({
template: `
<div id="footer-container">
{{title}}
</div>
`,
data() {
return {
title: '這是底部'
}
}
});
// 注冊全局組件
Vue.component('footer-com', footer);
new Vue({
el: '#root',
// 注冊局部組件
components: {
'header-com': header
}
});
注意事項
① 組件中不能添加el配置項，只需在根vm中配置，因為所有的組件最終都被一個vm管理（vue只有一個老大）
② 組件中使用name配置項修改組件在開發(fā)者工具中展示的名字
③ 組件實際是一個VueComponent構(gòu)造函數(shù)，在每次使用組件的時候都會實例化一個組件對象。
④ 重要的內(nèi)置關(guān)系：VueComponent.prototype.proto === Vue.prototype，目的是讓組件能訪問到根vm上的屬性和方法。
到此這篇關(guān)于淺析Vue單文件組件與非單文件組件使用方法的文章就介紹到這了,更多相關(guān)Vue單文件組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了vue中el-dialog打開與關(guān)閉的幾種方式,包括 update:visible, ref和兄弟 bus這三種方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-01-01
v-html是Vue.js框架中的一個指令,用于將數(shù)據(jù)中的HTML代碼動態(tài)渲染到頁面上,它主要用于渲染一些靜態(tài)的HTML內(nèi)容或者從后臺獲取的富文本數(shù)據(jù),下面介紹Vue v-html詳細解析與代碼實例,感興趣的朋友一起看看吧2024-12-12
vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)
vue大屏項目開發(fā),客戶覺得地圖上的文字標注太多了,要求地圖上只顯示省市等主要城市的標注,這篇文章主要給大家介紹了關(guān)于vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue使用element-plus依賴實現(xiàn)表格增加的示例代碼
這篇文章主要為大家詳細介紹了vue使用element-plus依賴實現(xiàn)表格增加,文中示例代碼講解的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2023-12-12
這篇文章主要為大家詳細介紹了如何使用vue實現(xiàn)視頻全屏切換的功能,文中的示例代碼講解詳細, 具有一定的借鑒價值,有需要的小伙伴可以參考一下2023-11-11
今天小編就為大家分享一篇快速解決vue-cli在ie9+中無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了基于elementUI豎向表格、和并列的案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了解決vue中reader.onload讀取文件的異步問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue中使用ts配置的具體步驟，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決
Vue項目devServer.proxy代理配置詳解的是一個非常常見的需求,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決的相關(guān)資料,需要的朋友可以參考下2023-02-02