Vue学习笔记十一

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>