文档章节

createElement 测试

originDu
 originDu
发布于 2017/05/03 10:35
字数 282
阅读 8
收藏 0

createElement ()

  • 第一个参数标签名,
  • 第二个参数如果嵌套标签就写[],里面继续写createElement,每一个变量就是一个标签
  • 如果不嵌套,第二个参数就写{},里面可以写属性,第三个参数写标签的内容,可以是变量名
<anchored-heading :level="2">Hello world! <p>pp</p></anchored-heading>

...

    Vue.component('anchored-heading', {
        render: function (createElement) {
            //createElement 第一个参数标签名,
            // 第二个参数如果嵌套标签就写[],里面继续写createElement,每一个变量就是一个标签
            // 如果不嵌套,第二个参数就写{},里面可以写属性,第三个参数写标签的内容,可以是变量名
            return createElement('div',
                [
                    createElement('i',  // 第一个i标签
                        [
                            createElement('a', { // 内部的子元素为一个a标签
                                attrs: {
                                    name: headingId,
                                    href: '#' + headingId,
                                    class: 'class'
                                }
                            }, '这是一个a标签')   // 也可以自己写
                        ]
                    ),
                    createElement('span', // 第二个span 标签
                        [
                            createElement('a', {  // 内部的子元素为一个a标签
                                attrs: {
                                    name: headingId, // 可以使用变量名
                                    href: '#' + headingId,
                                    class: 'class'  // 定义样式名
                                }
                            }, this.$slots.default) // 内容,可以使用插槽slot
                        ]
                    )
                ]
            )
        },
        props: {
            level: {    // 获取上组件的参数,并定规则
                type: Number,
                required: true
            }
        }
    })
<script type="text/x-template" id="anchored-heading-template">
  <div>
    <h1 v-if="level === 1">
      <!--<slot name='item'>item</slot>-->
      <slot></slot>
    </h1>
    <h2 v-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-if="level === 6">
      <slot></slot>
    </h6>
  </div>
</script>

© 著作权归作者所有

共有 人打赏支持
上一篇: vue函数化组件
下一篇: webpack2基本介绍
originDu
粉丝 1
博文 75
码字总数 22987
作品 0
海淀
私信 提问
2016-10月工作日志

2016-10-18下班后把courseList.js代码弄懂courseList.js上代码的$.ajax()参数与jquery的好像不同,还有 星号前的好像不应该用分号,应该用逗号 2016-10-19学习使用postman测试借口 2016-10-...

LM加强
2016/10/18
15
0
使用createElement()创建checkbox不能设置name属性

今天在使用document.createElement()动态创建复选框时,发现不能为其name赋值,以下是测试代码: Test

kjmeng
2008/08/01
0
0
初识react(一) 揭开jsx语法和虚拟DOM面纱

为什么学习react react以声明式、组件化、一次学习随处编写的理念深受广大开发者热爱,其重要程度不言而喻。因此值得我们深入学习,此专题主要分享些react中部分源码解析。 jsx简介(js +xml)...

言sir
07/19
0
0
解码GWT的JS小工具--degwt

degwt是一个解码GWT(google的网页工具包)生成的javascript代码的小工具。使用方法: 1.访问任何开启GWT的站点,例如:http://www.whirled.com/ 。 2.将下边的代码粘贴到地址栏。 javascript...

匿名
2012/05/16
1K
0
PHP读写XML文件

PHP读写XML文件 author: MoreWindows blog: http://blog.csdn.net/MoreWindows KeyWord: PHP 解析XML DOMDocument XML文件操作 PHP可以方便的生成和读取XML文件。PHP主要通过DOMDocument、D......

长平狐
2012/12/10
121
0

没有更多内容

加载失败,请刷新页面

加载更多

windows10小鹤双拼注册表

《安全第一》直接发文本内容,自己建文本,改文本后缀reg。 使用方法: 1.复制下示文本内容,打开你的文本编辑器(#记事本notepad或其他++),粘贴文本内容并保存在任意位置(不影响使用) ...

漫步海边小路
7分钟前
0
0
一、数据挖掘

数据挖掘的发展动力---需要是发明之母 数据爆炸问题 自动数据收集工具和成熟的数据库技术使得大量的数据被收集,存储在数据库、数据仓库或其他信息库中以待分析。我们拥有丰富的数据,但却缺...

凯文加内特
10分钟前
0
0
Java线程池ThreadPoolExecutor

线程池 ThreadPoolExecutor 线程池是ExecutorService的实现,可以通过Executors执行工厂构造不同类型的执行服务(线程池)。 ThreadPoolExecutor线程池使用的是阻塞队列BlockingQueue。 用于...

器石_
11分钟前
1
0
Mybatis 实现SQL拦截并在控制台打印SQL和参数

注:可以拦截sql 执行时间,优化sql。并打印sql 以及参数 第一步:创建类: SqlPrintInterceptor 并实现 Interceptor 该类如下: package com.ra.common.plugin;import org.apache.ibati...

轻量级赤影
14分钟前
1
0
Log4j2 配置

config: <?xml version="1.0" encoding="UTF-8"?><!-- http://logging.apache.org/log4j/2.x/manual/appenders.html --><!-- status 负责打印日记系统的 WARN 级别以及以上的日记 --><C......

Credo-Zhao
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部