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页面上引用的组件,它会在 ...
随机推荐
- 《温故而知新》JAVA基础三
面向对象 现实定义: 购买手机 阐述描述配置尺寸啥的,要求能打电话,然后服务员给你拿出一款手机,你所阐述的就是类,服务员给你的就是对象 package com.xie public class Tel ...
- Intellij IDEA 最新旗舰版注册激活破解（2018亲测，可用）
1.2017年亲测 参考:https://www.haxotron.com/jetbrains-intellij-idea-crack-123/ 安装IntelliJ IDEA 最新版 启动Intel ...
- .NET学习日记【1】
不得不说,之前一年学习的内容基本上在第一章中都有所涉及,而且还讲了很多不知道知识.看完第一张对多态和继承都多了一些体会.在1.4前面的都有很认证的看过,也在vs上面验证了一下.然后也明白了.NET到底 ...
- hdu多校第3场C. Dynamic Graph Matching
Problem C. Dynamic Graph Matching Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Tot ...
- Win10系列：C#应用控件基础16
ToolTip控件 ToolTip控件常作为一些控件的子元素,当鼠标移动到指定控件上时在界面上弹出一个信息提示框.例如,为了节省窗体上的空间或增加美观性,仅在按钮上显示一个指示性图案,当鼠标移动到按钮 ...
- PS切图采坑
博客记录我的各种采坑,有的坑很水,比如下面这个 谨记录自己的坑,以后作为入门笑料. 拿到设计师的psd设计图,理清事件逻辑,接下来就要切图啦.结果PS老是crash!检查了PS版本,也不低啊2017. ...
- apache 与 php-fpm 几种处理方式
目录 1.SetHandler 2.ProxyPassMatch 3.ProxyPass 1.SetHandler 在apache配置文件只部署一次 需要Apache 2.4.9以上才行 ip:por ...
- python批量插入mysql数据库（性能相关）以及反引号的使用
参考link: https://blog.csdn.net/qq_35958094/article/details/78462800(插入相关) https://www.cnblogs.com/hya ...
- Kerberos主从配置文档
Kerberos主从配置文档 1. Kerberos主从同步机制 在Master上通过以下命令同步数据: kdb5_util dump /var/kerberos/krb5kdc/slave_db ...
- 第一个java程序以及java的运行机制
课堂要点: 编写第一个java程序以及理解java的运行机制. 1.基本命令介绍: javac命令: 编译java文件得到.class字节码文件 -encoding 参数:指定编译的编码 java命令 ...