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 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
JavaScript 事件记录使用说明
Oct 20 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
下拉框select的绑定示例
Sep 04 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
vue实现在data里引入相对路径
Jun 05 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
一个用于MySQL的PHP XML类
2006/10/09 PHP
PHP网站提速三大“软”招
2006/10/09 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
python连接池实现示例程序
2013/11/26 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
通过实例学习Python Excel操作
2020/01/06 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
python的launcher用法知识点总结
2020/08/07 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
业务经理岗位职责
2013/11/11 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
HTTP中的Content-type详解
2022/01/18 HTML / CSS