一、宏观上展现了Vue整体流程:
Vue推荐在绝大多数情况下使用template
来创建你的HTML。然而在一些场景中,需要使用JavaScript的编程能力和创建HTML,这就是render
函数,它比template
更接近编译器。
其实就是为固定的HTML模板提供了动态生成的操作。简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM。
二、如何使用render
当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h,vm中有一个方法_c,也是这个函数的别名。
createElement({String-HTML 标签字符串 | Object-组件选项对象 | Function-异步函数})
三、普通vue使用render示例
<script>
//模板
var login = {
template: '<h1>这是登录组件</h1>'
}
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
//createElements 是一个 方法,调用它,能够把 指定的 组件模板,渲染为 html 结构
render: function (createElements) {
// 注意:这里 return 的结果,会 替换页面中 el 指定的那个 容器
return createElements(login)
}
});
</script>
注:通过这种方式,实现了通过js来创建HTML。尤其是有组件时候,这种方式会很方便。
注:在webpack中,需要使用渲染方式。