Vue创建头部组件示例
<!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创建头部组件示例的更多相关文章
- Vue创建局部组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue创建全局组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js使用-组件示例（实现数据的CRUD）
1.业务场景 用户(姓名,年龄,性别)的增删改查 2.数据格式 定义字段,name:字段名称,iskey:是否主键(添加,修改数据标志),dataSource:可选列表(下拉框选项) columns: ...
- vue 访问子组件示例 或者子元素
1.子组件 <base-input ref="usernameInput"></base-input> this.$refs.usernameInput 2 ...
- Vue列表组件与弹窗组件示例
列表组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <me ...
- vue通过extend动态创建全局组件（插件）学习小记
测试环境:nodejs+webpack,例子是看文章的,注释为自己的理解 创建一个toast.vue文件: <template> <div class="wrap" ...
- Vue 创建组件的方式
Vue 创建组件的方式 2018年08月07日 11:10:56 虔诚带着决然 阅读数:1015 版权声明:本文为博主原创文章,未经博主允许不得用做其他商业活动. https://blog.csd ...
- vue 创建单文件组件 注册组件 以及组件的使用
<template> <div id="app"> <v-home></v-home> <hr > <br> ...
- vue创建组件
vue创建组件是很容易的: js: Vue.component("component-item",{ //component-item就是我们在HTML页面上引用的组件,它会在 ...
随机推荐
- 【SCOI 2008】奖励关
Problem Description 你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关. 在这个奖励关里,系统将依次随机抛出 \(k\) 次宝物,每次你都可以选择吃或者不吃(必须在抛出下一个宝物之 ...
- 运行Python出错，提示“丢失api-ms-win-crt-runtime-l1-1-0.dll”
运行python时出错,提示“丢失api-ms-win-crt-runtime-l1-1-0.dll”, 上网搜了一下说是本地api-ms-win-crt-runtime-l1-1-0.dll 版本过 ...
- ES6 新加的类型Symbol()
Symbol()如果一个对象中的键已经存在,但目前我们目前不知道这个键是存在的,然后我们去给这个键赋值,Symbol()就不会改变这个键对应的值
- STL标准库-容器-deque 双端队列
头文件: #include<deque> 常用操作: https://www.cnblogs.com/LearningTheLoad/p/7450948.html
- linux系统下如何挂载NTFS移动硬盘
前言 数据迁移是我们经常会遇到的,有时候做大数据量迁移时,为了快速迁移大数据,有可能在Linux服务器上临时挂载NTFS格式的移动硬盘, 一般情况下,Linux是识别不了NTFS格式移动硬盘的(需要重 ...
- 主机连接虚拟机redis 服务器
1. centos 虚拟机安装redis sudo yum install epel-release sudo yum update sudo yum install redis sudo syste ...
- Dao层的sql语句
2018-08-12 21:33:43 反思:在数据库执行的时候,sql语句是正确的,复制到方法中,执行出错 因为把限定条件改为?时,把左括号删掉了,sql语句报错 改正:一定要确保sql ...
- Saiku相关异常处理（十五）
Saiku大概是我的第一个持续更博的技术点,希望自己能在这条研究saiku的道路上越走越远嘻嘻 这里我们来记录一下研究saiku时遇到的异常信息,这篇博客会保持持续更新的. 1. Java heap ...
- C语言实现Winsocket网络传输数据时乱码问题
问题描述:输入中文字符时在数据结尾总是有别的字符冒出 解决办法: recvBuf[ret] = '\0';//接收数据的数组,表示存储的数据截止,后面没有数据了 再运行,传输正常. 提示:C语言基础知 ...
- mongodb的db.collection is not function
mongodb的3.0版本之前: 如2.3版本,可以直接使用db调用collection来操作数据 但在3.0版本以上,会报错:db.collection is not a function 3.0版 ...