<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8" /> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Page Title</title> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1"> <Scriptsrc= "Https://cdn.jsdelivr.net/npm/[email protected]/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> <DivID= "App"> <Custom-header: Title= "title"> <ButtonSlots= "Left">Return</Button> </Custom-header> </Div> <TemplateID= "header"> <Divclass= "header"> <Slotsname= "Left"></Slots> <span>{{title}}</span> <Slotsname= "Right"></Slots> </Div> </Template> <Script>Vue.component ("Custom-header", {Template:'#header', props: ["title"] }); //For multi-slot use, use the Name property to specify the location to insert varVMS= NewVue ({el:'#app', data: {title:"Contacts"}, components: {}}); </Script></Body></HTML>
Vue Creating a Head component example
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
