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页面上引用的组件,它会在 ...
随机推荐
- JS实时获取输入框中的值
实时获取input输入框中的值需要oninput和onpropertychange属性来实现.原因是onpropertychange属性为IE专属,而oninput属性支持大部分浏览器包括IE9及以上 ...
- Matlab:非线性高阶常微分方程的几种解法
一.隐式Euler: 函数文件1: function b=F(t,x0,u,h) b(,)=x0()-h*x0()-u(); b(,)=x0()+*h*x0()/t+*h*(*exp(x0())+ex ...
- React文档（八）条件渲染
在React中,你可以创建不同的组件各自封装你需要的东西.之后你可以只渲染其中的一部分,这取决于应用的state(状态). 条件渲染在React里就和js里的条件语句一样.使用js里的if或者条件表达 ...
- 数据分析库之Numpy
Numpy get started NumPy中我们要学习的核心其实就是一个 ndarray n多 d dimension 维度 array数组 多维数组 创建一个ndarray的几种方法 impor ...
- CRM INBOX 结果增强功能
前段时间接到的需求:INBOX(ICCMP_INBOX)查询结果,多选后弹出选择用户的框,选择用户,带入到单据的PARTNER FUNC的工程师中,并修改单据状态. 其实标准的INBOX的Compon ...
- IIS+NGINX 负载web服务器
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在 ...
- VS2017调试技巧
Visual Studio的调试技巧 调试技巧是衡量程序员水平的一个重要指标.掌握好的调试技巧与工具的使用方法,也是非常重要的.*** 演示环境: VS2017C#*** 演示用的代码: publ ...
- 羽翼metasploit第一,二季学习笔记
-----------------第一季-------------------- 启动Metasploit:msfconsole 升级和更新:./msfupdate 直接退出:exit 退回上一级:q ...
- 【转载】GET和POST两种基本请求方法的区别
原文地址:http://www.cnblogs.com/logsharing/p/8448446.html GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一 ...
- Alpha 冲刺 （10/10）
Alpha 冲刺 (10/10) 队名:第三视角 组长博客链接 本次作业链接 团队部分 团队燃尽图 工作情况汇报 张扬(组长) 过去两天完成了哪些任务: 文字/口头描述: 1.和愈明.韫月一起对接 2 ...