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解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
树结构之JavaScript
Jan 24 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 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.MVC的模板标签系统(二)
2006/09/05 PHP
Apache设置虚拟WEB
2006/10/09 PHP
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
jQuery常见开发技巧详细整理
2013/01/02 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python深度优先算法生成迷宫
2018/01/22 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
django中forms组件的使用与注意
2019/07/08 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
三年级数学教学反思
2014/01/31 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
开国大典观后感
2015/06/04 职场文书
大学生暑期实践报告
2015/07/13 职场文书
小学三年级作文之写景
2019/11/05 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
python随机打印成绩排名表
2021/06/23 Python
Python matplotlib多个子图绘制整合
2022/04/13 Python
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS