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. 史上最全的整合第三方登录的工具JustAuth

    JustAuth,如你所见,它仅仅是一个第三方授权登录的工具类库,它可以让我们脱离繁琐的第三方登录SDK,让登录变得So easy! 参考图例 授权gitee 授权github 授权weibo 授权钉 ...

  2. 数据结构与算法5—KMP算法

    串的模式匹配算法 子串(模式串)的定位操作通常称为串的模式匹配. 这是串的一种重要操作,很多 软件,若有“编辑”菜单项的话, 则其中必有“查找”子菜单项. 串的顺序存储实现 #include<s ...

  3. Ansible入门笔记（2）之常用模块

    目录 Ansible常用模块 1.1.Ansible Ad-hoc 1.2.Ansible的基础命令 1.3.常用模块 Ansible常用模块 1.1.Ansible Ad-hoc 什么事ad-hoc ...

  4. Fiddler无法抓取HTTPS的问题，Fiddler证书无法安装终极解决方案，

    win7下Fiddler证书安装之后,总是无法抓取https的包:网上搜了很多方法都没解决问题,最终摸索解决方法如下: 第一步: 安装证书:到Fiddler的Tools-options-https下, ...

  5. ASP.NET 内容管理系统CMS

    一.Umbraco 项目地址: http://umbraco.org/ Umbraco是一个开放源码的CMS内容管理系统,基于asp.net建立,使用mssql进行存储数据. 使用Umbraco ,设 ...

  6. Mybatis技术一数据库连接池配置（druid）

    只简单叙述,网上相关的内容很多,这里只是给出参考: 数据库连接池druid配置列表: 配置 缺省值 说明 name   配置这个属性的意义在于,如果存在多个数据源,监控的时候可以通过名字来区分开来.如 ...

  7. 一个项目设置两个git地址，并最终实现一次性同时推送到到两个git地址上的方法总结

    基于多处备份的想法,确保自己的代码不丢失.或者是代码的git本身搭建在自己公司的服务上,而你为了保险起见,想把项目同时放在码云或者github上面. 这样,你就需要让一个项目同时备份在两个云端,这样即 ...

  8. The Architectural Principles Behind Vrbo’s GraphQL Implementation

    转自:https://medium.com/expedia-group-tech/graphql-component-architecture-principles-homeaway-ede8a58d ...

  9. JS稀奇古怪题目

    JS稀奇古怪题目: 1.操作对象属性优先级高于普通赋值操作 var a = { n: 1 }; var b = a; //操作对象属性优先级高于普通赋值操作 a.x = a = { n: 2 }; c ...

  10. JS线程机制与事件机制

    JS线程机制与事件机制 1.进程与线程 (1).定义: 进程:程序的一次执行,它占有一片独有的内存空间 CPU的基本调度单位,是程序执行的一个完整的流程 (2).进程与线程的关联 一个进程一般至少有一 ...