普通组件定义渲染和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>
效果:

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>
效果:

普通组件定义渲染和render渲染组件的区别(三)的更多相关文章
- vue组件定义方式,vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- iview table行render渲染不同的组件
table不同的行,相同的列渲染不同的组件,如图1:第一行渲染selece,第二行渲染input render:(h,params)=>{ if(params.index === 0){ //以 ...
- 渲染函数render和函数式组件
vnode对象 vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = da ...
- 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table
基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367
- vue+element ui table组件封装,使用render渲染
后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...
- React源码之组件的实现与首次渲染
react: v15.0.0 本文讲 组件如何编译 以及 ReactDOM.render 的渲染过程. babel 的编译 babel 将 React JSX 编译成 JavaScript. 在 ba ...
- 如何让vue自定义组件可以包裹内容,并且渲染出来,以及组件的组合使用
当我们用vue一开始写项目时,按需求文档自定义了一个公用组件,这个组件很多地方都用到了,然后随着项目的推进,又有了新的需求要在里面加东西,但又不是所有的地方都要加 这时候我们想这样往里面塞内容↓ ...
- router-view组件在app.vue中渲染不出来怎么办
1.在app.vue使用router-view组件直接渲染 页面什么都没显示,可能问题出在路由配置上了,检查路由是否配置完好,路由挂载那里必须使用routes属性 2.在app.vue中router- ...
- vue使用render渲染&jsx
vue&jsx文档 vue实例属性 // App.ts import hBtn from './components/hBtn' import hUl from './components/h ...
随机推荐
- Hadoop实战-MapReduce之max、min、avg统计(六)
1.数据准备: Mike,35 Steven,40 Ken,28 Cindy,32 2.预期结果 Max 40 Min 28 Avg 33 3.MapReduce代码如下 import ja ...
- Android笔记之强大的buildConfigField
在进行项目开发或维护时,经常会遇到调试和发布所用到的参数值不一致的情况 例如,服务器会分测试和正式,为了能方便地更改(自动更换)服务器地址,buildConfigField就派上用场了 以前都是手动更 ...
- 关于ActiveMQ接收端停止接收的方法
现在有一个需求: 在发送端服务器出现故障后,接收端的接收方法要停下来,关于停止接收的方法,我做了下面这些事情: // 获取 ConnectionFactory ConnectionFactory co ...
- wifi 协议栈的历史的总结
google 了一下找到下面的网页关于wifi 协议栈的说明 https://www.lifewire.com/wireless-standards-802-11a-802-11b-g-n-and-8 ...
- appium(3)-Running Tests
Running Tests Preparing your app for test (iOS) Test apps run on the simulator have to be compiled ...
- OpenGL之坐标转换(好文-清晰版)
http://blog.csdn.net/zhongjling/article/details/8488844OpenGL之坐标转换(好文-清晰版)
- python pickle/cPickle模块
序列化(picking): 把变量从内存中变成可存储或传输的过程称为序列化,序列化之后,就可以把序列化的对象写入磁盘,或者传输给其他设备; 反序列化(unpickling):相应的,把变量的内容从序列 ...
- Opencv— — Pinch Filter
// define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...
- 支持源码单步调试QT库编译笔记
支持源码单步调试QT库编译笔记 编译环境:windows 10 编译工具:mingw_4_4_0 Qt源码版本:qt-everywhere-opensource-src-4.8.5(下载地址:http ...
- Codeforces Round #535(div 3) 简要题解
Problem A. Two distinct points [题解] 显然 , 当l1不等于r2时 , (l1 , r2)是一组解 否则 , (l1 , l2)是一组合法的解 时间复杂度 : O(1 ...