vue中2种直接对元素渲染的方法

上面的整个div都会被render或template的渲染内容替换掉。在官网教程里，在对html元素进行渲染时，都是先定义一个组件。然后使用已定义的组件，通过示例化的方式进行元素的渲染。如果要渲染的内容本来就很简单而且不需要重用，就可以直接在实例化vue对象时指定渲染内容。

方法一

直接在实例化vue对象时，指定要渲染的内容。使用template或render都可以。当同时都有时，优先使用render。

new Vue({
                el: "#app",
                render : function(h){
                    return h("div","我是render测试")
                },
                template:`<h1 style="color:red">我是template测试</h1>`
            })
           

<div id="app">
            <h1>整个app标签(包括div)的内容会被替换</h1>
        </div>
           

上面的整个div都会被render或template的渲染内容替换掉。

方法二

实例化vue对象时，不指定el参数，使用render或template指定要渲染的内容，然后使用$mount对指定元素进行渲染。

vm = new Vue({
                render:createElement => createElement('h1',[
                    createElement('span',{style:{color:'red'}},'hello'),
                    createElement('span','world')
                ])
            });
            vm.$mount('#app');
           

<div id="app">
            <h1>整个app标签(包括div)的内容会被替换</h1>
        </div>
           

上面的整个div都会被render或template的渲染内容替换掉。