Vue組件的使用教程詳解
官網(wǎng)： https://cn.vuejs.org/v2/guide/components.html
1.Vue組件的介紹
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。
所有的 Vue 組件同時(shí)也都是 Vue 的實(shí)例，所以可接受相同的選項(xiàng)對(duì)象 (除了一些根級(jí)特有的選項(xiàng)) 并提供相同的生命周期鉤子。
2.使用組件
對(duì)于自定義標(biāo)簽的命名 Vue.js 不強(qiáng)制遵循W3C 規(guī)則(小寫(xiě)，并且包含一個(gè)短杠)
組件在注冊(cè)之后，便可以作為自定義元素 在一個(gè)實(shí)例的模板中使用。
注意：在初始化根實(shí)例之前注冊(cè)組件
注冊(cè)組件的時(shí)候，首先要編寫(xiě)需要的組件（相當(dāng)于一個(gè)頁(yè)面，包含js操作，css樣式等），比如：
新建一個(gè)頭部組件
上面這個(gè)頭部組件只有一句話，放在h標(biāo)簽中，使用的時(shí)候，需要先導(dǎo)出組件，即（export default 塊），這樣才能在需要該組件的位置使用import導(dǎo)入
export 和 export default使用的區(qū)別：
兩個(gè)都是用于導(dǎo)出
不同之處在于：
export導(dǎo)出之后，在要接收的地方需要 import {變量名} from “位置”
此處，我在js文件中導(dǎo)出一個(gè)data的方法，然后在vue文件（組件）中使用
輸出組件
需要的地方使用
export default導(dǎo)出之后，接收的地方 import 變量名 from “位置”
注意: ./ 代表當(dāng)前位置
輸出組件
在需要使用的位置import
接下來(lái)開(kāi)始使用組件：
使用組件時(shí)需要先創(chuàng)建一個(gè)Vue實(shí)例，然后選中需要放置組件的位置（element），然后注冊(cè)組件，放入選定的位置
完成以上步驟，即可顯示組件在頁(yè)面上
頁(yè)面顯示結(jié)果圖
總結(jié)
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了基于Vue2.0的分頁(yè)組件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要給大家介紹了關(guān)于Vue.js列表渲染的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-05-05
vue-cli創(chuàng)建項(xiàng)目ERROR?in?Conflict:?Multiple?assets?emit?dif
最近vue/cli創(chuàng)建項(xiàng)目后出現(xiàn)了錯(cuò)誤,下面這篇文章主要給大家介紹了關(guān)于vue-cli創(chuàng)建項(xiàng)目ERROR?in?Conflict:?Multiple?assets?emit?different?content?to?the?same?filename?index.html問(wèn)題的解決辦法,需要的朋友可以參考下2023-02-02![警告[vue-router]?Duplicate?named?routes?definition簡(jiǎn)單解決方法](http://img.jbzj.com/images/xgimg/bcimg3.png)
警告[vue-router]?Duplicate?named?routes?definition簡(jiǎn)單解決方法
這篇文章主要關(guān)于介紹了警告[vue-router]?Duplicate?named?routes?definition的解決方法,這個(gè)錯(cuò)誤提示是因?yàn)樵赩ue Router中定義了重復(fù)的路由名稱,需要的朋友可以參考下2023-12-12
Vue 3集成?？礧eb插件實(shí)現(xiàn)視頻監(jiān)控功能
本文詳細(xì)介紹了如何使用 Vue 3 框架集成?？礧eb插件實(shí)現(xiàn)視頻監(jiān)控功能,通過(guò)定義屬性、事件、變量,以及編寫(xiě)初始化、播放視頻、處理節(jié)點(diǎn)點(diǎn)擊事件等方法,我們成功實(shí)現(xiàn)了視頻監(jiān)控系統(tǒng)的前端部分,感興趣的朋友一起看看吧2024-11-11
詳解vue2.0+vue-video-player實(shí)現(xiàn)hls播放全過(guò)程
這篇文章主要介紹了詳解vue2.0+vue-video-player實(shí)現(xiàn)hls播放全過(guò)程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
UniApp中實(shí)現(xiàn)類似錨點(diǎn)定位滾動(dòng)效果
一個(gè)uniapp小程序的項(xiàng)目,我們需要實(shí)現(xiàn)一個(gè)非常實(shí)用的功能——類似于錨點(diǎn)定位的交互效果,即在首頁(yè)中有多個(gè)tab（分類標(biāo)簽）,每個(gè)tab對(duì)應(yīng)著不同的模塊,當(dāng)用戶點(diǎn)擊某個(gè)分類的tab時(shí),需要流暢地滾動(dòng)到對(duì)應(yīng)的內(nèi)容位置,提供更好的用戶體驗(yàn),2023-10-10
前端vue按1920*1080設(shè)計(jì)圖的頁(yè)面適配屏幕縮放并適配4K屏詳解
最近在做一個(gè)數(shù)據(jù)可視化的項(xiàng)目,整個(gè)項(xiàng)目全是大屏展示,期間也是遇到很多問(wèn)題,最令人頭疼的就是大屏的適配,下面這篇文章主要給大家介紹了前端vue按1920*1080設(shè)計(jì)圖的頁(yè)面適配屏幕縮放并適配4K屏的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue中$refs, $emit, $on, $once, $off的使用詳解
這篇文章主要介紹了vue中$refs, $emit, $on, $once, $off的使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
本篇文章主要介紹了Vue表單類的父子組件數(shù)據(jù)傳遞示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05