1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <title>Page Title</title>
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  9.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  10.     <style>
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  15.  
  16.         li {
  17.             list-style: none
  18.         }
  19.  
  20.         body {
  21.             height: 2000px;
  22.             overflow: hidden;
  23.         }
  24.  
  25.         .header {
  26.             width: 100%;
  27.             height: 40px;
  28.             background: #e1e1e1;
  29.             text-align: center;
  30.             line-height: 40px;
  31.             position: fixed;
  32.         }
  33.  
  34.         .header button {
  35.             padding: 0rem 0.2rem;
  36.             height: 40px;
  37.             top: 0;
  38.         }
  39.  
  40.         .header button:nth-of-type(1) {
  41.             position: fixed;
  42.             left: 0;
  43.         }
  44.  
  45.         .header button:nth-of-type(2) {
  46.             position: fixed;
  47.             right: 0;
  48.         }
  49.     </style>
  50. </head>
  51.  
  52. <body>
  53.     <div id="app">
  54.         <custom-header :title="title">
  55.             <button slot="left">返回</button>
  56.         </custom-header>
  57.     </div>
  58.  
  59.     <template id="header">
  60.         <div class="header">
  61.             <slot name="left"></slot>
  62.             <span>{{title}}</span>
  63.             <slot name="right"></slot>
  64.         </div>
  65.     </template>
  66.  
  67.     <script>
  68.         Vue.component("custom-header", {
  69.             template: '#header',
  70.             props: ["title"]
  71.         });
  72.         //多插槽的使用，则使用name属性来指定要插入的位置
  73.         var vm = new Vue({
  74.             el: '#app',
  75.             data: {
  76.                 title: "通讯录"
  77.             },
  78.             components: {
  79.  
  80.             }
  81.         });
  82.     </script>
  83.  
  84. </body>
  85.  
  86. </html>

Vue创建头部组件示例的更多相关文章

  1. Vue创建局部组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue创建全局组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue.js使用-组件示例（实现数据的CRUD）

    1.业务场景 用户(姓名,年龄,性别)的增删改查 2.数据格式 定义字段,name:字段名称,iskey:是否主键(添加,修改数据标志),dataSource:可选列表(下拉框选项) columns: ...

  4. vue 访问子组件示例 或者子元素

    1.子组件 <base-input ref="usernameInput"></base-input> this.$refs.usernameInput 2 ...

  5. Vue列表组件与弹窗组件示例

    列表组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <me ...

  6. vue通过extend动态创建全局组件（插件）学习小记

    测试环境:nodejs+webpack,例子是看文章的,注释为自己的理解 创建一个toast.vue文件: <template> <div class="wrap" ...

  7. Vue 创建组件的方式

    Vue 创建组件的方式 2018年08月07日 11:10:56 虔诚带着决然 阅读数:1015   版权声明:本文为博主原创文章,未经博主允许不得用做其他商业活动. https://blog.csd ...

  8. vue 创建单文件组件 注册组件 以及组件的使用

    <template> <div id="app"> <v-home></v-home> <hr > <br> ...

  9. vue创建组件

    vue创建组件是很容易的: js: Vue.component("component-item",{   //component-item就是我们在HTML页面上引用的组件,它会在 ...

随机推荐

  1. PHP isset 和 array_key_exists 对比

    经常使用 isset 判断变量或数组中的键是否存在,但是数组中可以使用 array_key_exists 这个函数,那么这两个 哪一个更优呢? 官方文档这样定义两者: isset:语言构造器,用于检测 ...

  2. 个人爱好：idea 项目结构呈现风格

  3. Idea搭建servlet开发过程

    Idea搭建servlet开发过程 https://www.cnblogs.com/javabg/p/7976977.html (1)    安装idea,jdk,tomcat:设置好环境变量: (2 ...

  4. Python 编程第一步

    Python  编程第一步 在前面的教程中我们已经学习了一些 Python3 的基本语法知识,下面我们尝试来写一个斐波纳契数列. # Fibonacci series: 斐波纳契数列 # 两个元素的总 ...

  5. 脚本可执行，但无HTML测试报告文件生成，其造成的原因是在PyCharm的执行模式错误

    定义测试报告两种写法: 1)测试报告直接在本地绝对路径下生成 # 导入HTMLTestRunner模块 import HTMLTestRunner # 通过open()方法以二进制写模式('wb')打 ...

  6. laravel数据库迁移 和 路由防攻击

    命令:php  artisan  migrate 防攻击:

  7. java虚拟机之虚拟机类加载机制

    此处主要需要知道什么是java虚拟机?java虚拟机如何进行类加载的? java语言本身是编译型和解释型的语言,先对本地的java文件进行编译,编译后会在本地生成一个class文件,而这个生成的cla ...

  8. Win10系列：C#应用控件基础18

    WebView控件 使用WebView控件可以在应用中添加一个简易的网页浏览器窗口,将指定地址的网页内容显示出来,并可以通过WebView控件所提供的方法.属性及事件,实现如页面导航.HTML文本解析 ...

  9. CodeForces - 1015 D.Walking Between Houses

    Description Natasha is planning an expedition to Mars for nn people. One of the important tasks is t ...

  10. WindowsForms 调用API

    WindowsForms 后台 using System;using System.Collections.Generic;using System.ComponentModel;using Syst ...