Vue創(chuàng)建頭部組件示例代碼詳解
更新時(shí)間：2018年10月23日 08:34:01 作者：DonlyLuik
本文通過(guò)實(shí)例代碼給大家介紹了Vue創(chuàng)建頭部組件的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
Vue.js 組件
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。
組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。
具體代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none
}
body {
height: 2000px;
overflow: hidden;
}
.header {
width: 100%;
height: 40px;
background: #e1e1e1;
text-align: center;
line-height: 40px;
position: fixed;
}
.header button {
padding: 0rem 0.2rem;
height: 40px;
top: 0;
}
.header button:nth-of-type(1) {
position: fixed;
left: 0;
}
.header button:nth-of-type(2) {
position: fixed;
right: 0;
}
</style>
</head>
<body>
<div id="app">
<custom-header :title="title">
<button slot="left">返回</button>
</custom-header>
</div>
<template id="header">
<div class="header">
<slot name="left"></slot>
<span>{{title}}</span>
<slot name="right"></slot>
</div>
</template>
<script>
Vue.component("custom-header", {
template: '#header',
props: ["title"]
});
//多插槽的使用，則使用name屬性來(lái)指定要插入的位置
var vm = new Vue({
el: '#app',
data: {
title: "通訊錄"
},
components: {
}
});
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的Vue創(chuàng)建頭部組件示例代碼詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue mixins提供了一個(gè)非常靈活的方式來(lái)分發(fā)Vue組件中的可復(fù)用功能,通過(guò)全局混入和局部混入,可以將預(yù)定義的方法、數(shù)據(jù)等混合到Vue組件中,這種技術(shù)可以簡(jiǎn)化代碼,提高開(kāi)發(fā)效率,并允許在不同組件間共享功能2024-09-09
這篇文章主要為大家詳細(xì)介紹了vue3手動(dòng)封裝彈出框組件message的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
今天小編就為大家分享一篇基于form-data請(qǐng)求格式詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
基于ElementUI實(shí)現(xiàn)v-tooltip指令的示例代碼
文本溢出隱藏并使用tooltip 提示的需求,相信在平時(shí)的開(kāi)發(fā)中會(huì)經(jīng)常遇到,常規(guī)做法一般是使用 elementui 的 el-tooltip 組件,在每次組件更新的時(shí)候去獲取元素的寬度/高度判斷是否被隱藏,本文給大家介紹了基于ElementUI實(shí)現(xiàn)v-tooltip指令,需要的朋友可以參考下2024-09-09
通過(guò)Element ui往頁(yè)面上加一個(gè)分頁(yè)導(dǎo)航條的方法
這篇文章主要介紹了通過(guò)Element ui往頁(yè)面上加一個(gè)分頁(yè)導(dǎo)航條的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
深入理解vue.js雙向綁定的實(shí)現(xiàn)原理
vue.js是MVVM結(jié)構(gòu)的，同類(lèi)的還有AngularJs；至于MVC、MVP、MVVM的比較網(wǎng)上已經(jīng)有很多了，這樣不再重復(fù)。這篇文章將給大家深入的介紹vue.js雙向綁定的實(shí)現(xiàn)原理，有需要的朋友們可以參考借鑒，下面跟著小編一起來(lái)看看吧。2016-12-12
隨著互聯(lián)網(wǎng)的發(fā)展,PDF?文件在信息交流和文檔分享中起著重要的作用,通過(guò)在?Vue?組件中實(shí)現(xiàn)?PDF?預(yù)覽功能,我們可以為用戶提供便捷的內(nèi)容閱讀體驗(yàn),下面我們就來(lái)看看具體實(shí)現(xiàn)方法吧2023-08-08
Vue3 computed初始化獲取設(shè)置值實(shí)現(xiàn)示例
這篇文章主要為大家介紹了Vue3 computed初始化以及獲取值設(shè)置值實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了vue3之向echarts組件傳值的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue項(xiàng)目打包(build)時(shí),自動(dòng)打以時(shí)間命名的壓縮包方式
這篇文章主要介紹了Vue項(xiàng)目打包(build)時(shí),自動(dòng)打以時(shí)間命名的壓縮包方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10