Vue組件的使用教程詳解

更新時間：2018年01月05日 09:44:37 作者：開始_終結_總是_沒變改

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。這篇文章給大家介紹了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標簽中，使用的時候，需要先導出組件，即（export default 塊），這樣才能在需要該組件的位置使用import導入

export 和 export default使用的區(qū)別：

兩個都是用于導出

不同之處在于：

export導出之后，在要接收的地方需要 import {變量名} from “位置”

此處，我在js文件中導出一個data的方法，然后在vue文件（組件）中使用

輸出組件

需要的地方使用

export default導出之后，接收的地方 import 變量名 from “位置”

注意: ./ 代表當前位置

輸出組件

在需要使用的位置import

接下來開始使用組件：

使用組件時需要先創(chuàng)建一個Vue實例，然后選中需要放置組件的位置（element），然后注冊組件，放入選定的位置

完成以上步驟，即可顯示組件在頁面上

頁面顯示結果圖

總結

您可能感興趣的文章:

基于Vue2.0的分頁組件
這篇文章主要為大家詳細介紹了基于Vue2.0的分頁組件的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
Vue.js學習教程之列表渲染詳解
這篇文章主要給大家介紹了關于Vue.js列表渲染的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-05-05
vue-cli創(chuàng)建項目ERROR?in?Conflict:?Multiple?assets?emit?dif
最近vue/cli創(chuàng)建項目后出現(xià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簡單解決方法
這篇文章主要關于介紹了警告[vue-router]?Duplicate?named?routes?definition的解決方法,這個錯誤提示是因為在Vue Router中定義了重復的路由名稱,需要的朋友可以參考下
2023-12-12
Vue 3集成?？礧eb插件實現(xiàn)視頻監(jiān)控功能
本文詳細介紹了如何使用 Vue 3 框架集成海康Web插件實現(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)類似錨點定位滾動效果
一個uniapp小程序的項目,我們需要實現(xiàn)一個非常實用的功能——類似于錨點定位的交互效果,即在首頁中有多個tab（分類標簽）,每個tab對應著不同的模塊,當用戶點擊某個分類的tab時,需要流暢地滾動到對應的內(nèi)容位置,提供更好的用戶體驗,
2023-10-10
前端vue按1920*1080設計圖的頁面適配屏幕縮放并適配4K屏詳解
最近在做一個數(shù)據(jù)可視化的項目,整個項目全是大屏展示,期間也是遇到很多問題,最令人頭疼的就是大屏的適配,下面這篇文章主要給大家介紹了前端vue按1920*1080設計圖的頁面適配屏幕縮放并適配4K屏的相關資料,需要的朋友可以參考下
2022-11-11
vue中$refs, $emit, $on, $once, $off的使用詳解
這篇文章主要介紹了vue中$refs, $emit, $on, $once, $off的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
Vue表單類的父子組件數(shù)據(jù)傳遞示例
本篇文章主要介紹了Vue表單類的父子組件數(shù)據(jù)傳遞示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05