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

<!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. Java类加载器(死磕 1-2)

      Java类加载器(  CLassLoader ) 死磕 1.2:  导入 & 类加载器分类 本小节目录 1.导入 1.1. 从class文件的载入开始 1.2. 什么是类加载器 2. JA ...

  2. 今日头条Go建千亿级微服务的实践

    今日头条Go建千亿级微服务的实践_36氪 http://36kr.com/p/5073181.html

  3. CSS3学习笔记（5）—页面遮罩效果

    今天把页面遮罩的效果发一下,之前遮罩都是用JS实现的,忽然发现CSS3里面的box-shadow属性除了做立体阴影外,还可以做页面的遮罩. 下面来看一下完成的动态效果: 从上图可以看出,就是当鼠标悬浮 ...

  4. Bestcoder round 18----B题（一元三次方程确定区间的最大值（包含极值比较））

    Math Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  5. Appium——解决每次启动时都安装setting和unlock app方法

    找到appium安装目录 C:\Program Files (x86)\Appium\node_modules\appium\lib\devices\android 修改代码,注释掉弹出setting ...

  6. 记录下 hubot相关

    适配器工厂https://hubot.github.com/docs/adapters/ 自己写适配器https://hubot.github.com/docs/adapters/developmen ...

  7. Jmeter创建一个简单的http接口用例

    1.新建线程组 添加->Threads(Users)->线程组 线程组用来模拟用户进程. 2.添加http信息头管理器 添加->配置元件->http信息头管理器 Systemi ...

  8. Xamarin.Forms初始

    前言 Xamarin.Forms 为 .NET 开发人员提供一个完整的跨平台 UI 工具包. 在 Visual Studio 中使用 C# 生成完全本机的 Android.iOS 和通用 Window ...

  9. CF 809D Hitchhiking in the Baltic States——splay+dp

    题目:http://codeforces.com/contest/809/problem/D 如果值是固定的,新加入一个值,可以让第一个值大于它的那个长度的值等于它. 如今值是一段区间,就对区间内的d ...

  10. windows install JDK&&JRE

    重装系统后,安装的java环境没了,只能重装一下~~~~ 1.下载JDK 2.这里会安装两次,其中第一次为安装 JDK,第二次安装JRE,建议不要将这两个放在同一个文件夹. 3.配置环境变量 用鼠标右 ...