Vue学习笔记十一

ゝ一纸荒年。 2022-06-09 12:11 157阅读 0赞

### Render函数 ###

#### 正常注册组件，注意这里的顺序，需要先全局注册，再实例化。 ####

<div id="app">
        <anchored-heading :level="1">Hello world!</anchored-heading>
    </div>
    <script type="text/x-template" id="anchored-heading-template">
    <h1 v-if="level === 1">
        <slot></slot>
    </h1>
    <h2 v-else-if="level === 2">
        <slot></slot>
    </h2>
    <h3 v-else-if="level === 3">
        <slot></slot>
    </h3>
    <h4 v-else-if="level === 4">
        <slot></slot>
    </h4>
    <h5 v-else-if="level === 5">
        <slot></slot>
    </h5>
    <h6 v-else-if="level === 6">
        <slot></slot>
    </h6>
    </script>
    <script type="text/javascript">
    Vue.component('anchored-heading', {
      template: '#anchored-heading-template',
      props: {
        level: {
          type: Number,
          required: true
        }
      }
    })
    var app = new Vue({
        el: "#app",
        data: {
            show:true
        }
    })
    </script>

#### render重写 ####

<div id="app">
            <anchored-heading :level="1">Hello world!</anchored-heading>
        </div>
        <script type="text/javascript"> Vue.component('anchored-heading',{ render: function(createElement){ return createElement( 'h' + this.level, //tag name标签名称 this.$slots.default //子组件的阵列,可以简单理解为anchored-heading中的内容 ) }, props: { level: { type: Number, required: true } } }) var app = new Vue({ el: "#app", data: { show:true } }) </script>

#### render中的createElement ####

<div id="app">
        <anchored-heading :level="2">Hello world!</anchored-heading>
    </div>
    <script type="text/javascript"> Vue.component('anchored-heading',{ render: function(createElement){ var nameId = this.level return createElement( 'h' + this.level, //tag name标签名称 [ createElement('a', { attrs: { href: 'https://www.baidu.com', name: '#'+nameId, } },this.$slots.default) ] ) }, props: { level: { type: Number, required: true } } }) var app = new Vue({ el: "#app", data: { show:true } }) </script>

#### render创建重复组件 ####

render: function(createElement){ 
        return createElement('div',
            Array.apply(null, {length:10}).map(function(vale){ 
                return createElement('p','10个段落')
            })
        )
    },

#### render代替模板语法v-if与v-for ####

模板写法

<div id="app"> <ul v-if="items.length"> <li v-for="item in items">{ { item.name}}</li> </ul> <p v-else>No item</p> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { items: [ {name:"xiaoD"}, {name:"joe"} ] } }) </script>

render写法

<div id="app">
        <my-component v-bind:items="items">No item</my-component>
    </div>
    <script type="text/javascript"> Vue.component('my-component',{ props:['items'], render: function(creatElement){ if(this.items.length){ return creatElement('ul',this.items.map(function(item){ return creatElement('li',item.name) })) }else{ return creatElement('p',this.$slots.default) } } }) var app = new Vue({ el: "#app", data: { items: [ {name:"xiaoD"}, {name:"joe"} ] } }) </script>