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