1.普通的组件渲染方式

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <p>33333</p>

    <login></login>

  </div>

  <script>

    var login = {

      template: '<h1>这是登录组件</h1>'

    }

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {},

      methods: {},

      components: {

        login

      }

    });

  </script>

</body>

</html>

　　效果：

　　

2.使用render方法

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <p>444444</p>

  </div>

  <script>

    var login = {

      template: '<h1>这是登录组件</h1>'

    }

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {},

      methods: {},

      render: function (createElements) { // createElements 是一个 方法，调用它，能够把 指定的 组件模板，渲染为 html 结构

        return createElements(login)

        // 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器

      }

    });

  </script>

</body>

</html>

　　效果：

　　

3.说明

　　后一种方式会替换容器

010 vue使用render方法渲染组件的更多相关文章

  1. render方法渲染组件和在webpack中导入vue

    使用component注册的组件div容器里可以放多个,但是使用render的只能放一个 <div id="app"> <p>我可以放两个</p> ...

  2. 实例的render方法渲染组件

    1.普通渲染组件 在app容器中插入login组件 <login></login>  一个app可以多个这种组件 <script> var login = { te ...

  3. 19 使用Vue实例的render方法渲染组件

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 使用render函数渲染组件

    使用render函数渲染组件:https://www.jianshu.com/p/27ec4467a66b

  5. 用ActionController::Renderer的render方法渲染模版

    使用Cable进行pub: ActionCable.server.broadcast "call", {address: AddressesController.render(@a ...

  6. Vue页面刷新方法(子组件改变数据后兄弟组件刷新，不闪烁)

    todo https://blog.csdn.net/qq_40571631/article/details/91533248

  7. [前端随笔][Vue] 多级菜单实现思路——组件嵌套

    说在前面 本篇记录学习了vue-element-admin中的多级菜单的实现 [传送门] @vue/cli 4.2.2:vuex:scss:组件嵌套 正文 创建项目 npm create 项目名 // ...

  8. 创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

  9. vue 自定义全局方法

    import {myfun} from '../static/js/test.js' //se6的正确写法export default {methods:{ diyfun:function () { ...

随机推荐

  1. Linux-crontab定时执行脚本配置

    crontab是一个可以根据自己配置的命令定时执行脚本的服务 安装crontab(centos) yum install Vixie-cron yum install crontabs vixie-c ...

  2. Docker版zabbix

    1. docker-compose docker-compose :容器自带的编排工作,可以通过yaml编排文件,将容器要启动的命令写入文件,然后再利用docker-compose run file. ...

  3. SqlServer中的更新锁(UPDLOCK和READPAST)

    UPDLOCK和READPAST,通过UPDLOCK和READPAST的结合我们能够解决许多问题,比如我当前项目中对于更新预约人数,则用到了UPDLOCK和READPAST,因为考虑到并发如果固定预约 ...

  4. Linux创建目录和文件的默认权限设置

    这两天,项目中使用jenkins自动构建系统时遇到了在Linux中创建目录和文件的权限问题,临时的解决办法是在脚本中增加了chmod赋权限命令; 偶然想到Linux应该是可以设置默认权限的,故学习了一 ...

  5. js--动画

    运动框架实现思想1.速度(改变值left,right,width,height,opacity)2.缓冲运动3.多物体运动4.任意值变化5.链式运动6.同时运动 我们先来介绍第一章改变left值来使物 ...

  6. windows + SQL Server环境，创建ArcSDE服务

    ArcGIS for Server启用FeatureService需要ArcSDE和Geodatabase. 使用ArcSDE需要创建windows服务,ArcSDE只有命令行,所以只好阅读文档,找合 ...

  7. nginx 负载均衡，如何判断某台服务器宕机？

    答:使用参数:proxy_connect_timeout: 这个参数是连接的超时时间.设置成1,表示是1秒后超时会连接到另外一台服务器. 配置在 server 部分里.

  8. 2019牛客暑期多校训练营（第五场）B：generator 1 （10进制快速幂）

    题意:给定x0,x1,a,b,满足xi=a*xi-1+b*xi-2: 求xn,n<10^(10^6): 思路:10进制快速幂裸题.降幂来写好像也是可以的,但是循环节不是phi(mod),所以数学 ...

  9. JQuery系列（7） - JQuery最佳实践

    上篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery".今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osman ...

  10. ReadIniTest_GetPrivateProfileString

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...