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与Prototype并存的冲突的解决方法
Aug 29 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
老生常谈的跨域处理
Jan 11 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
JavaScript this使用方法图解
Feb 04 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
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
详解python中的index函数用法
2019/08/06 Python
python 爬取疫情数据的源码
2020/02/09 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
高中军训广播稿
2014/01/14 职场文书
法学专业自我鉴定
2014/02/05 职场文书
统计系教授推荐信
2014/02/28 职场文书
企业新年寄语
2014/04/04 职场文书
高一学生评语大全
2014/04/25 职场文书
食品工程专业求职信
2014/06/15 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫