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. Django2.2 pymysql 连接mysql数据库的坑

    参考链接 https://www.52pojie.cn/thread-921141-1-1.html 1. mysqlclient 1.3版本不对 解决办法:注释掉D:\Users\xxx\AppDa ...

  2. 一步一步实现kbmmw的httpsys使用https功能

    kbmmw的httpsys的功能已经实现了好长时间,但是现在各个平台都要求使用https来提供服务. 今天一步一步来说一下如何使用kbmmw 的httpsys功能支持https. 首先为了获得证书,我 ...

  3. Mac 编译报错 symbol(s) not found for

    查看静态库文件支持的arm64指令集架构的方法 root# lipo -info libname.a Architectures in the fat file: libname.a are: arm ...

  4. idea操作maven时控制台中文显示乱码/maven项目启动方式

    在idea中通过maven启动项目时,在前台显示数据库信息,没有中文乱码问题,在控制台中mybatis显示数据库的信息,中文显示乱码. 在程序中用 System.out.println 输出中文的时候 ...

  5. Redis中的LFU算法

    在Redis中的LRU算法文中说到,LRU有一个缺陷,在如下情况下: ~~~~~A~~~~~A~~~~~A~~~~A~~~~~A~~~~~A~~| ~~B~~B~~B~~B~~B~~B~~B~~B~~ ...

  6. linux下activemq安装与配置activemq-5.15.2

    linux下activemq安装与配置 前提 配置好jdk环境   一.下载:apache-activemq-5.15.2-bin.tar.gz https://archive.apache.org/ ...

  7. 分布式限流组件-基于Redis的注解支持的Ratelimiter

    原文:https://juejin.im/entry/5bd491c85188255ac2629bef?utm_source=coffeephp.com 在分布式领域,我们难免会遇到并发量突增,对后端 ...

  8. 编程题：SaturdayNightStay

    "输入2019年的一个时间段,开始时间代表出发,结束时间代表在那一天返回,判断在该时间段内,如果旅行有多少个子时间段可以在周六晚上休息" * 周六晚上休息,即子时间段必须包含周六, ...

  9. 项目Beta冲刺（7/7）（追光的人）(2019.5.29)

    所属课程 软件工程1916 作业要求 Beta冲刺博客汇总 团队名称 追光的人 作业目标 描述Beta冲刺每日的scrum和PM报告两部分 队员学号 队员博客 221600219 小墨 https:/ ...

  10. 20180523模拟赛T2——前缀！

    简化版题面 jyt毒瘤,写了超长的题面,要看完整题面的翻到最后-- 定义\(f_0(x) = A_x\),\(f_n(x) = \sum^x_{i = 1} f_{n-1}(i)\).给出长度为\(N ...