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 相关文章推荐
jQuery 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
限制只能输入数字的实现代码
May 16 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
深入学习JavaScript中的bom
May 27 Javascript
javascript中的数据类型检测方法详解
Aug 07 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 file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
JS实现多功能计算器
2020/10/28 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
python多进程操作实例
2014/11/21 Python
python实现简单的计时器功能函数
2015/03/14 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
儿童学习python的一些小技巧
2018/05/27 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
Python post请求实现代码实例
2020/02/28 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
优秀毕业生求职信范文
2014/01/02 职场文书
奉献演讲稿范文
2014/05/21 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
Python的三个重要函数详解
2022/01/18 Python
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python