Vue创建头部组件示例代码详解


Posted in Javascript onOctober 23, 2018

Vue.js 组件

组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素,封装可重用的代码。

具体代码如下所示:

<!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创建头部组件示例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
js与applet相互调用的方法
Jun 22 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 #Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 #Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 #jQuery
React SSR样式及SEO的实践
Oct 22 #Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 #Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 #Javascript
electron实现qq快捷登录的方法示例
Oct 22 #Javascript
You might like
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
javascript引导程序
2008/10/26 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
个人简历的自荐信
2013/10/23 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书