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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
JS 文字符串转换unicode编码函数
May 30 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
浅谈开发eslint规则
Oct 01 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
JavaScript箭头函数中的this详解
Jun 19 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相当简单的分页类
2008/10/02 PHP
php session安全问题分析
2011/06/24 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
php根据年月获取季度的方法
2014/03/31 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
php获取linux命令结果的实例
2017/03/13 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
Python动态加载模块的3种方法
2014/11/22 Python
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
暇步士官网:Hush Puppies
2016/09/22 全球购物
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
公司会计主管岗位责任制
2014/03/01 职场文书
聘任书模板
2014/03/29 职场文书
先进员工获奖感言
2014/08/14 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
同学聚会邀请函
2015/01/30 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书