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获取样式中颜色值的方法
Jan 29 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
vue模块移动组件的实现示例
May 20 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实现基于文本的摩斯电码生成器
2016/01/11 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
python使用chardet判断字符串编码的方法
2015/03/13 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
Python异常处理操作实例详解
2018/08/28 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
中国旅游网站:途牛旅游网
2019/09/29 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
网络编辑岗位职责
2014/03/18 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
2015年教师新年寄语
2014/12/08 职场文书
实名检举信范文
2015/03/02 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python