普通组件定义渲染和render渲染组件的区别（三）
2024-08-23 01:36:59
普通方式定义组件和效果：
<!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>
效果：
最新文章
- phpcms调取数据库的两种机制
- C#中JSON序列化和反序列化
- Android基于mAppWidget实现手绘地图（四）--如何附加javadoc
- LR常见问题整理
- MySQL深入利用Ameoba实现读写分离
- Exception与相关
- Linux中open函数以及退出进程的函数
- POJ 3692 Kindergarten (二分图 最大团)
- CodeVS 3415-最小和
- Android-Error3：Error when loading the SDK
- [NOIp 2011]Mayan游戏
- Android中一个经典理解误区的剖析
- [八]基础数据类型之Double详解
- ORA-19606: Cannot copy or restore to snapshot control file
- js的eval代码快速解密
- git 创建新项目 本地仓库和远程仓库的合并
- 获取url查询参数的方法
- JAVA Maven 安装 jar 包到本地仓库，以 Oracle11g 的访问包 为例
- intellij idea设置ss代理
- JUnit单元测试--IntelliJ IDEA