普通方式定义组件和效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<p>111111111</p>
<login></login>
</div> <script> // var login = {
// template:"<h1>这是登录组件</h1>"
// } var vm = new Vue({
el:"#app",
data:{},
methods:{},
// render:function(createEle){
// //把制定的组件模板渲染成html结构
// //此参数为形参，名字自定义，这个形参是一个方法，返回的是一个html
// return createEle(login);
// },
components:{
login:{
template:"<h1>这是登录组件</h1>"
}
}
}); </script> </body>
</html>
效果：
render渲染组件方式和效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<p>111111111</p>
<!--<login></login>-->
</div> <script> var login = {
template:"<h1>这是登录组件</h1>"
} var vm = new Vue({
el:"#app",
data:{},
methods:{},
render:function(createEle){
//把制定的组件模板渲染成html结构
//此参数为形参，名字自定义，这个形参是一个方法，返回的是一个html
return createEle(login);
}
// components:{
// login:{
// template:"<h1>这是登录组件</h1>"
// }
// }
}); </script> </body>
</html>
效果：