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 相关文章推荐
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 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制作图型计数器的例子
2006/10/09 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
javascript数组去重小结
2016/03/07 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
JS异步函数队列功能实例分析
2017/11/28 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
python实现给微信公众号发送消息的方法
2017/06/30 Python
基于python时间处理方法(详解)
2017/08/14 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
python实现多进程代码示例
2018/10/31 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
环境日宣传活动总结
2014/07/09 职场文书
端午节寄语2015
2015/03/23 职场文书
大学同学聚会感言
2015/07/30 职场文书
运动会主持人开幕词
2016/03/04 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python