普通方式定义组件和效果:

<!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渲染组件的区别(三)的更多相关文章

  1. vue组件定义方式,vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  2. iview table行render渲染不同的组件

    table不同的行,相同的列渲染不同的组件,如图1:第一行渲染selece,第二行渲染input render:(h,params)=>{ if(params.index === 0){ //以 ...

  3. 渲染函数render和函数式组件

    vnode对象 vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = da ...

  4. 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table

    基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367

  5. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

  6. React源码之组件的实现与首次渲染

    react: v15.0.0 本文讲 组件如何编译 以及 ReactDOM.render 的渲染过程. babel 的编译 babel 将 React JSX 编译成 JavaScript. 在 ba ...

  7. 如何让vue自定义组件可以包裹内容,并且渲染出来,以及组件的组合使用

    当我们用vue一开始写项目时,按需求文档自定义了一个公用组件,这个组件很多地方都用到了,然后随着项目的推进,又有了新的需求要在里面加东西,但又不是所有的地方都要加 这时候我们想这样往里面塞内容↓    ...

  8. router-view组件在app.vue中渲染不出来怎么办

    1.在app.vue使用router-view组件直接渲染 页面什么都没显示,可能问题出在路由配置上了,检查路由是否配置完好,路由挂载那里必须使用routes属性 2.在app.vue中router- ...

  9. vue使用render渲染&jsx

    vue&jsx文档 vue实例属性 // App.ts import hBtn from './components/hBtn' import hUl from './components/h ...

随机推荐

  1. 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 ...

  2. Android笔记之强大的buildConfigField

    在进行项目开发或维护时,经常会遇到调试和发布所用到的参数值不一致的情况 例如,服务器会分测试和正式,为了能方便地更改(自动更换)服务器地址,buildConfigField就派上用场了 以前都是手动更 ...

  3. 关于ActiveMQ接收端停止接收的方法

    现在有一个需求: 在发送端服务器出现故障后,接收端的接收方法要停下来,关于停止接收的方法,我做了下面这些事情: // 获取 ConnectionFactory ConnectionFactory co ...

  4. wifi 协议栈的历史的总结

    google 了一下找到下面的网页关于wifi 协议栈的说明 https://www.lifewire.com/wireless-standards-802-11a-802-11b-g-n-and-8 ...

  5. appium(3)-Running Tests

    Running Tests   Preparing your app for test (iOS) Test apps run on the simulator have to be compiled ...

  6. OpenGL之坐标转换(好文-清晰版)

    http://blog.csdn.net/zhongjling/article/details/8488844OpenGL之坐标转换(好文-清晰版)

  7. python pickle/cPickle模块

    序列化(picking): 把变量从内存中变成可存储或传输的过程称为序列化,序列化之后,就可以把序列化的对象写入磁盘,或者传输给其他设备; 反序列化(unpickling):相应的,把变量的内容从序列 ...

  8. Opencv— — Pinch Filter

    // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...

  9. 支持源码单步调试QT库编译笔记

    支持源码单步调试QT库编译笔记 编译环境:windows 10 编译工具:mingw_4_4_0 Qt源码版本:qt-everywhere-opensource-src-4.8.5(下载地址:http ...

  10. Codeforces Round #535(div 3) 简要题解

    Problem A. Two distinct points [题解] 显然 , 当l1不等于r2时 , (l1 , r2)是一组解 否则 , (l1 , l2)是一组合法的解 时间复杂度 : O(1 ...