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. jemeter学习-badboy录制与代理服务器录制

    一 基本元素的介绍 1. 添加测试计划 2.添加线程组 线程数---并发数,模拟多少个用户并发 Ramp-up periods ----我们要在多少秒之内进行多少用户的并发 循环次数---可以选择一次 ...

  2. Xinetd超级守护进程

    Xinetd超级守护进程 00.什么是xinetd服务 xinetd(extended Internet services daemon), 是新一代网络守护进程服务程序, 又叫超级守护进程. 经常用 ...

  3. Sublime Text3 安装 CTags 插件出现乱码

    1.下载ctags.exe 可以直接下载我上传好的资源:http://download.csdn.net/download/zhaoxd200808501/9971251.或者网络上其他地方也可以下载 ...

  4. Odoo采购模块

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10825976.html 一:采购过程 采购业务可以分为以下几个流程: 1)建立供应商信息 企业需要与供应商建 ...

  5. golang之数据转换

    golang按位取反符号和异或符号都是^. fmt.Printf("0x%X\n", 0xFF^0x55) var a uint8 = 0x55 fmt.Printf(" ...

  6. VS创建C工程

    打开VS编辑器: 填写项目名称,控制项目位置,创建: 在源文件中添加新项: 填写文件名称,修改后缀: 编写一个简单的hello word编译看看windows环境支持如何:

  7. git使用过程中的若干问题笔记

    1.关于本地分支创建之后,如何在远程创建同名分支并完成本地分支到远程分支的push 首先创建本地库分支以dev为例 然后输入命令git push --set-upstream origin dev / ...

  8. dfs --path sum 问题 本质上就是组合问题（有去重）

    135. 数字组合 中文 English 给定一个候选数字的集合 candidates 和一个目标值 target. 找到 candidates 中所有的和为 target 的组合. 在同一个组合中, ...

  9. query_posts函数使用方法小结|wordpress技巧

    query_posts是wordpress非常好用的调用文章函数,可以调用某个分类.标签.日期及作者等不同范围的文章列表.下面随ytkah一起来看看query_posts函数使用方法小结 首先是que ...

  10. php的快速排序

    <?php     function quicksort($str){         if(count($str)<=1) return $str;//如果个数不大于一,直接返回     ...