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页面上引用的组件,它会在 ...
随机推荐
- ajax全选、全不选、反选、单删/批删
<meta charset="utf-8"> <?php //链接数据库 $link = mysqli_connect('127.0.0.1','root','r ...
- App自动更新(DownloadManager下载器)
一.开门见山 代码: object AppUpdateManager { const val APP_UPDATE_APK = "update.apk" private var b ...
- 关于ExpressionChangedAfterItHasBeenCheckedError
最近在stackoverflow上似乎每天都有一些关于angular报错‘ExpressionChangedAfterItHasBeenCheckedError’的问题.发生这些问题通常是由于angu ...
- node多项目合一打包
因为公司的需要,需要将多个项目合并为一个项目,具体要求是:多个项目中的公用部分提取出来,单独维护,业务部分则分别在不同的目录中,而我们的项目配置文件则作为公用部分单独维护,在项目打包的时候遇到一个问题 ...
- 美国FLAG和中国BAT的比较（王益）
美国FLAG和中国BAT的比较(王益) http://cxwangyi.github.io/notes/2014-09-29-flag-vs-bat.html 知乎 http://www.zhihu. ...
- REACT Missing “key” prop for element
https://stackoverflow.com/questions/48266018/missing-key-prop-for-element-reactjs-and-typescript Whe ...
- haxe相关的计划安排
用多少写多少.先从入门开始,再到怎么写DSL解析器.最后自举(只是做个示范而已 在深入haxe的过程中,多少会跟typescript有交集,这些会边走边总结. 因为只是for example,所以这个 ...
- HTML⑤
W3C : 万维网联盟!(World Wide Web Consortium ) 创建于1994年,是web技术领域最权威最具有影响力的标准机构! W3C规定了web技术领域相关技术的标准! 官网地址 ...
- HDFS API编程
3.1常用类 3.1.1Configuration Hadoop配置文件的管理类,该类的对象封装了客户端或者服务器的配置(配置集群时,所有的xml文件根节点都是configuration ...
- python3入门教程（二）操作数据库（一）
概述 最近在准备写一个爬虫的练手项目,基本想法是把某新闻网站的内容分类爬取下来,保存至数据库,再通过接口对外输出(提供后台查询接口).那么问题就来了,python到底是怎么去操作数据库的呢?我们今天就 ...