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. mysql-luster没有data目录

    mysqld --initialize-insecure --user=mysql 直接复制上面这条命令 然后cmd进入到 mysql解压出来bin的目录中: 等待一会  就发发现data的这个目录了 ...

  2. java 8大happen-before原则

    1.单线程happen-before原则:在同一个线程中,书写在前面的操作happen-before后面的操作. 2.锁的happen-before原则:同一个锁的unlock操作happen-bef ...

  3. MySQL的JOIN连接

    MySQL的JOIN join的含义跟英文单词"join"一样,连接连接两张表.分为 内连接:inner join 外连接   (1)左外连接(左边的表不加限制):left joi ...

  4. Nginx Location指令URI匹配规则详解

    server { listen 80; server_name ss.test *.ss.test; root "D:/Project/PHP/admin-h5/dist/"; s ...

  5. 服务器安装python3环境

    服务器安装python3环境 先安装相关包 yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel re ...

  6. Linux运维技术之LVM（逻辑卷管理）

    DM :逻辑设备(模块)--->LVM 优点: 个分区) 2.1.partprobe  /dev/sdb : 使用partprobe可以不用重启系统即可配合fdisk工具创建新的分区 2.2.c ...

  7. zabbix--告警消息内容更改

    zabbix 告警消息内容更改 自带的消息内容模板发送出来的消息着实有点丑陋,再加之是英文,这就让我有点尴尬了. 如下默认的消息内容: 更改过后的效果: 操作步骤 编辑默认的Report proble ...

  8. Spring5.0.x SSM项目中Json转换器 的配置

    json作为前后端交互的重要手段,在springMVC中有自带的转换器可以免去平时那些繁琐的事情: pom文件添加:spring5.0以上用Jackson2.9以上的版本 <dependency ...

  9. git reset 的HEAD和--hard

    转载请注明来源https://www.cnblogs.com/sogeisetsu/p/11407764.html git reset 的HEAD和--hard git reset HEAD < ...

  10. python应用-综合应用题解决

    题目: A,B,C,D,E五个人捕鱼,不计其数,然后休息, 早上A第一个醒来,将鱼均分成五份,把多余的一条鱼扔掉,拿走自己的一份, B第二个醒来,也将鱼均分为五份,把多余的一条鱼扔掉,拿走自己的一份. ...