• 首页 Home
  • 简介 About
  • 项目 Service
  • 案例 Cases
  • 新闻 News
  • 技术文章 本硕新闻 行业资讯

    [vue]使用components和render函数渲染页面

    发表时间:2019-04-03  热度:

    components方式渲染页面

    <div id="app">

        <mybox></mybox>

    </div>

    <script>

    //创建模板对象

    var mybox ={

        template:'<h1>我将会主宰你的世界!!!</h1>',

    }

    var vw=new Vue({

        el:'#app',

        components:{

            mybox  //注册模板组件

        }

    })

    </script>

     

    render函数

    <div id="app2">

    </div>

    <script>

    //创建模板对象

    var mybox ={

        template:'<h1>我将会主宰你的世界!!!</h1>',

    }

    var vw=new Vue({

        el:'#app2',

        render:function(createElements){ //render函数提供一个createElement方法,调用此方法能将模板渲染成html结构

           return createElements(mybox) //return返回将覆盖整个el指定的容器

        }

    })

    </script>

     

    区别:components方式不会替换容器,render则会替换。components可以多次调用,render只能渲染一次。

    文章怎么样?
    相关资讯