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.name代替cookie的实现代码
Nov 28 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
ionic3 懒加载
Aug 16 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
JS实现简易留言板增删功能
Feb 08 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
python+django加载静态网页模板解析
2017/12/12 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
机械制造专业个人的自我评价
2013/12/28 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
人与自然的观后感
2015/06/18 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
如何用python反转图片,视频
2021/04/24 Python
redis实现共同好友的思路详解
2021/05/26 Redis
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
springboot实现string转json json里面带数组
2022/06/16 Java/Android
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS