vue局部组件和公共组件搭建页面模式

最新推荐文章于 2024-07-12 08:47:57 发布

阳光里的我们

最新推荐文章于 2024-07-12 08:47:57 发布

阅读量303

点赞数

分类专栏： vue 文章标签： vue局部组件和公共组件搭建页面模式

本文链接：https://blog.csdn.net/weixin_44748596/article/details/102234667

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  *{
    margin:0;
    padding:0;
  }
  .head{
    width: 100%;
    height: 100px;
    background-color: orange;
  }
  .main2{
    width: 100%;
    height: 1000px;
  }
  .aside{
    width: 30%;
    height: 100%;
    float:left;
    background-color: aquamarine;
  }
  .content{
    width: 70%;
    height: 100%;
    float:left;
    background-color: red;
  }
  </style>
</head>
<body>
 <div id="app"></div>
 <script src="../vue.js"></script>
 <script>
  //  全局组件（公共组件）：Vue.component(a,b)参数1是组件名称，参数2是options对象
  Vue.component('vbtn',{
    template:`<button> 按钮</button>`
  })
   var Vcontent={
     template:`
    <div class='content'>我是内容组件
        <vbtn/>
    </div>
     `
   };
   var Vaside={
     template:`
     <div class='aside'>
     我是侧边栏组件
     <vbtn/>
     </div>
     `
   };
   var Vhead={
     template:`
     <div class='head'>
     我是头部组件
     <vbtn/>
     </div>
     `
   };
   var App={
     template:`
     <div class='main'>
       <Vhead/>
       <div class='main2'>
          <Vaside/>
          <Vcontent/>
       </div>
     </div>
     `,
     components:{
      Vhead,
      Vaside,
      Vcontent
     }
   };
 new Vue({
   el:"#app",
   template:`<App></App>`,
   components:{
     App
   }
 })
 </script>
</body>
</html>