<!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属性来指定要插入的位置

        var vm = new Vue({

            el: '#app',

            data: {

                title: "通讯录"

            },

            components: {

            }

        });

    </script>

</body>

</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. vivado 创建PL工程

    参考来源 https://china.xilinx.com/video/hardware/i-and-o-planning-overview.html 前言 我Win10系统上的Xilinx Plat ...

  2. CSS 简介 3

    css css 外边距属性 margin 简写属性 在一个声明中设置所有外边距属性 margin-bottom 设置元素的下外边距 margin-left 设置元素的左外边距 margin-right ...

  3. npm init 命令生成package.json文件

    通过npm init 命令可以生成一个package.json文件.这个文件是 整个项目的描述文件.通过这个文件可以清楚的知道项目的包依赖关系,版本,作者等信息.每个NPM包都有自己的package. ...

  4. 【转】 C++析构函数的作用和用法

    转自:https://www.cnblogs.com/puyangsky/p/5319470.html 一.定义1. 作用:对象消亡时,自动被调用,用来释放对象占用的空间2.特点:   (1) 名字与 ...

  5. org.apache.hadoop.mapreduce.lib.input.InvalidInputException: Input path does not exist: file:/input

    原我是这样写的 //输入数据所在的文件目录 FileInputFormat.addInputPath(job, new Path("/input/")); //mapreduce执 ...

  6. python 二分法模板——牢记

    class Solution: # @param nums: The integer array # @param target: Target number to find # @return th ...

  7. python dpkt SSL 流tcp payload（从三次握手开始到application data）和证书提取

    # coding: utf-8 #!/usr/bin/env python from __future__ import absolute_import from __future__ import ...

  8. python3练习-发送IP地址到邮箱

    需求: 从外网通过VPN访问内网,并登录电脑A.在电脑A通过共享文件夹(需要\\IP的方式访问)访问到内网电脑B,由于电脑B的WI-FI的IP地址会变化,所以当电脑B的I访问路径需要获知电脑B的最新I ...

  9. JAVA 创建文件和文件夹,删除文件和文件夹的实用工具

    package com.file; import java.io.File; import java.io.IOException; //创建新文件和目录 public class CCRDFile ...

  10. 关于vs调用数据库存储过程 返回输出参数的一些总结

    1.直接上练习的存储过程,方便回想 create proc proc_output @totlecount int output, @pageIndex int, @pageSize intas de ...