render
render
渲染组件,也可以实现components
一样的效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var login = {
template: '<h1>这是登陆组件</h1>'
}
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// 定义render函数,这里的参数createElements也是一个函数
render: function(createElements) {
return createElements(login)
}
});
</script>
</body>
</html>
render
和 components
两种方式的区别:render
方式不用显示的定义一个标签,来表示占位,告诉vue
就是替换这个部分,因为他没有这个标签,所以vue实例控制的区域内所有的元素都会被覆盖,好比v-text
的方式,components
的方式就只是替换定义的标签的位置,别的位置不会替换。