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代码
Nov 19 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
小程序实现录音功能
Sep 22 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
星际原理概述
2020/03/04 星际争霸
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
php树型类实例
2014/12/05 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
python实现XML解析的方法解析
2019/11/16 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
成立公司计划书
2014/05/07 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
党校毕业心得体会
2014/09/13 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
先进工作者事迹材料
2014/12/23 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
安全教育培训制度
2015/08/06 职场文书