笔记：Vue选项---DOM渲染（el,template,render）

1.el选项：

指定被挂载元素，属性值仅限于CSS选择器或者DOM节点对象。

这里推荐使用以下语法：

el:"选择器"   //挂载点

若实例中不想使用el选项，你也可以像以下操作，结果都是相同的：

<script>
    <!--在实例后面添加$mount()-->
    var vm=new Vue({
        //选项
    }).$mount(document.querySelector("#app"));
</script>

 

 

2.template选项：

语法：

template:"<标签>......</标签>"   //模板节点创建新的DOM节点并将替换原有的DOM节点

可以放在实例中，也可以放在组件中。

3.渲染函数render选项：

使用在组件中，语法如下：

render:function(createElement){
    //代码
    return createElement('HTML标签字符串(String)','组件选项对象(object)',节点解析返回值类型为String/Object的函数)
}   //Vue通过建立一个虚拟DOM对真实的DOM发生变化保存追踪
    //节点解析函数的地方可以再次使用createElement

可以发现以上三个选项的功能是一致的，都是获取实例模板（指定或者是创建）。按照我自己的理解，render选项于template一样都是在组件中创建模板。

那么如果将其一起使用，优先级则是：

<1>el,template,render共存时，优先采用render选项创建的模板。

<2>el,template共存时，优先采用template选项创建的模板。