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. ES6 对象解构赋值（浅拷贝 VS 深拷贝）

    对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中. 拷贝对象 let aa = { age: 18, name: 'aaa' } let bb = {...aa}; co ...

  2. 上传文本到hdfs上的一些命令

    在hadoop下创建文件夹 bin/hdfs dfs -mkdir -p /usr/hadoop/spark/ touch wc.input  写一些文本进去. 上传到hdfs上  bin/hdfs ...

  3. Spring+SpringMVC+Hibernate 与 shiro 整合步骤

    目录 1. 业务需求分析 2. 创建数据库 3. 创建 maven webapp 工程 4. 创建实体类(POJO) 5. 配置 Hibernate 和 Mapping 5.1 Hibernate 主 ...

  4. OSI&TCP/IP模型

    OSI模型 OSI协议 基于OSI模型异构网络主机之间通信的协议 1. 应用层 不同的应用程序所在层,如邮件程序,web程序 2. 表示层 不同的文件类型如图片,视频等 3. 会话层 决定是否建立与其 ...

  5. 机器学习笔记4:SVM支持向量积的推导过程

    内容来自:https://github.com/GreedyAIAcademy/Machine-Learning 最初 支持向量机的目的:找到一条好的分割线 什么杨的分割线最好? 有最大间隔的分割线最 ...

  6. prometheus学习系列一： Prometheus简介

    Prometheus简介 prometheus受启发于Google的Brogmon监控系统(相似kubernetes是从Brog系统演变而来), 从2012年开始由google工程师Soundclou ...

  7. Linux学习之组管理和权限管理

    Linux组的基本介绍 在Linux中的每个用户必须属于一个组,不能独立于组外.在Linux中每个文件有所有者,所在组,其他组的概念. 1)所有者 2)所在组 3)其他组 4)改变用户所在的组 文件/ ...

  8. Centos7 增量备份数据脚本

    #!bin/bash#Automatic Backup Linux System Files#By Author www.jfedu.net#Define VariablesSOURCE_DIR=( ...

  9. zabbix--邮件告警

    zabbix 邮件告警机制 通过腾讯企业邮箱进行告警通知等.邮箱服务器账号需要在邮箱设置里面进行设置,开通ssl认证及专用密码 参考官档:https://www.zabbix.com/document ...

  10. 调试用Chrome浏览器

    今天写HTML页面调试时出了问题:一个页面在本地的工作空间文件夹内可以打得开,在HBuilder里用Edge打不开. 我还以为是工作空间路径出问题了,重建了好几次空间和项目.. 询问了小页,他建议以后 ...