createElement 测试

为什么80%的码农都做不了架构师？>>>   

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>

转载于:https://my.oschina.net/mdu/blog/891134