淺析Vue單文件組件與非單文件組件使用方法
單文件組件：一個(gè)文件中只包含一個(gè)組件，后綴為.vue（常用）
<template>
<!-- html部分 -->
<div>
<p class="title">{{name}}</p>
</div>
</template>
<script>
// js部分
export default {
data() {
return {
title: '這是標(biāo)題'
}
}
}
</script>
<style>
/*css部分*/
.title {
font-size: 24px;
color: orange;
}
</style>
非單文件組件：一個(gè)文件中包含有多個(gè)組件，后綴為.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: '這是標(biāo)題'
}
}
});
// 定義組件
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
}
});
注意事項(xiàng)
① 組件中不能添加el配置項(xiàng)，只需在根vm中配置，因?yàn)樗械慕M件最終都被一個(gè)vm管理（vue只有一個(gè)老大）
② 組件中使用name配置項(xiàng)修改組件在開發(fā)者工具中展示的名字
③ 組件實(shí)際是一個(gè)VueComponent構(gòu)造函數(shù)，在每次使用組件的時(shí)候都會(huì)實(shí)例化一個(gè)組件對(duì)象。
④ 重要的內(nèi)置關(guān)系：VueComponent.prototype.proto === Vue.prototype，目的是讓組件能訪問到根vm上的屬性和方法。
到此這篇關(guān)于淺析Vue單文件組件與非單文件組件使用方法的文章就介紹到這了,更多相關(guān)Vue單文件組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果
在vue項(xiàng)目中,我們通常會(huì)使用Axios來與后臺(tái)進(jìn)行數(shù)據(jù)交互,而當(dāng)我們發(fā)起請(qǐng)求時(shí),常常需要在頁面上顯示一個(gè)加載框（Loading）,然后等數(shù)據(jù)返回后自動(dòng)將其隱藏,本文介紹了基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果,需要的朋友可以參考下2024-03-03
在我的項(xiàng)目中,甲方要求系統(tǒng)登錄時(shí)對(duì)密碼進(jìn)行加密后再傳給后端,指定使用國密SM3,下面這篇文章主要給大家介紹了關(guān)于vue普通加密及國密SM2、SM3和sm4使用的相關(guān)資料,需要的朋友可以參考下2022-12-12
本文主要介紹了vue實(shí)現(xiàn)瀏覽器桌面通知的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue3中實(shí)現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)
在Vue3中使用拖拽功能時(shí)應(yīng)選用vue-draggable-next插件,傳統(tǒng)的draggable插件不兼容Vue3,可能導(dǎo)致TypeError錯(cuò)誤,安裝后,需在項(xiàng)目中引入并使用,具體步驟包括安裝插件、引入使用、查看效果和相關(guān)說明,需要的朋友可以參考下2024-09-09
vue + vuex todolist的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了vue + vuex todolist的實(shí)現(xiàn)示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
本篇文章主要介紹了淺談Vue下使用百度地圖的簡易方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
vue 2 實(shí)現(xiàn)自定義組件一到多個(gè)v-model雙向數(shù)據(jù)綁定的方法(最新推薦)
有時(shí)候我們需要對(duì)一個(gè)組件綁定自定義 v-model,以更方便地實(shí)現(xiàn)雙向數(shù)據(jù),例如自定義表單輸入控件,這篇文章主要介紹了vue 2 實(shí)現(xiàn)自定義組件一到多個(gè)v-model雙向數(shù)據(jù)綁定的方法,需要的朋友可以參考下2024-07-07
Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法
下面小編就為大家分享一篇Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了通過圖帶你深入了解vue的響應(yīng)式原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，2019-06-06
這篇文章主要介紹了Vue之Dep和Observer的用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05