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 相关文章推荐
给Function做的OOP扩展
May 07 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
小程序自定义日历效果
Dec 29 Javascript
js实现二级联动简单实例
Jan 11 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 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
把77A收信机改造成收音机
2021/03/02 无线电
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
python用什么编辑器进行项目开发
2020/06/17 Python
python数据类型强制转换实例详解
2020/06/22 Python
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
新学期班主任寄语
2014/01/18 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
考研导师推荐信范文
2015/03/27 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python