03/005 两栏式与 vue.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="vue.js"></script>
  <style type="text/css">
  #Header {
    width: 360px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 15px;
    color: #fffaf3;
    font-weight: bold;
    background-color: #f9c81e;
  }

  #Sidebar {
    width: 120px;
    float: left;
    height: 280px;
    text-align: center;
    line-height: 280px;
    font-size: 15px;
    color: #ffffff;
    font-weight: bold;
    background-color: #cecece;
  }

  #body {
    width: 240px;
    height: 280px;
    text-align: center;
    line-height: 280px;
    font-size: 15px;
    color: #f9c81e;
    font-weight: bold;
    background-color: #fffaf3;
    float: left;
  }

  #Footer {
    width: 360px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 15px;
    color: #fffaf3;
    font-weight: bold;
    background-color: #f9c81e;
  }
  </style>
</head>

<body>
  <!----------------view 宣告自定义的元素-->
  <div id="app">
    <app-header></app-header>
    <app-sidebar></app-sidebar>
    <app-body></app-body>
    <div style='clear:both;'></div>
    <app-footer></app-footer>
  </div>
  <!---------------- VUE-->
  <script>
  // 定义 (用 Vue.extend() 创建一个组件构造器)
  var appHeader = Vue.extend({
    template: '<div id="Header">上方列</div>'
  })
  var appSidebar = Vue.extend({
    template: '<div id="Sidebar">侧边栏</div>'
  })
  var appBody = Vue.extend({
    template: '<div id="Body">内容</div>'
  })
  var appFooter = Vue.extend({
      template: '<div id="Footer">页尾资讯</div>'
  })
  // 注册 (要把这个构造器用作组件，需要用 Vue.component(tag, constructor) 注册 ：)
  // 注意！组件注册后，会去替换 自定义的元素
  Vue.component('app-header', appHeader)
  Vue.component('app-sidebar', appSidebar)
  Vue.component('app-body', appBody)
  Vue.component('app-footer', appFooter)
  // 创建根实例
  new Vue({
    el: '#app'
  })
  </script>
</body>

</html>
<!--

-->