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. redis-Jedis连接集群

    关闭防火墙或把端口加入防火墙 一.通过代码 @Test public void testJedisCluster() throws Exception { //创建一连接,JedisCluster对象 ...

  2. NGINX一览无余

    Nginx 是如何实现高并发的? 异步,非阻塞,使用了epoll 和大量的底层代码优化. 如果一个server采用一个进程负责一个request的方式,那么进程数就是并发数.正常情况下,会有很多进程一 ...

  3. Prometheus学习笔记（5）Grafana可视化展示

    目录 一.Grafana安装和启动 二.配置数据源 三.配置dashboard 四.配置grafana告警 一.Grafana安装和启动 Grafana支持查询Prometheus.从Grafana ...

  4. python 导入导出依赖包命令

    程序中必须包含一个 requirements.txt 文件,用于记录所有依赖包及其精确的版本号.如果 要在另一台电脑上重新生成虚拟环境,这个文件的重要性就体现出来了,例如部署程序时 使用的电脑.pip ...

  5. 捕获Ctrl + C中断 优雅的退出程序 golang

    捕获Ctrl + C中断 优雅的退出程序 Gracefully terminate a program in Go os/signal 来捕获系统中断等信号 // Notify方法将signal发送到 ...

  6. 详解CentOS6.7部署Tomcat及主配置文件

    Java程序实现部署及应用 POSIX :可移植操作系统,编程操作系统接口规范,实现跨平台编译运行. API:应用程序编程接口 ABI:应用程序二进制接口 描述了应用程序和操作系统之间,一个应用和它的 ...

  7. C语言结构体变量字节对齐问题总结

    结构体字节对齐 在用sizeof运算符求算某结构体所占空间时,并不是简单地将结构体中所有元素各自占的空间相加,这里涉及到内存字节对齐的问题.从理论上讲,对于任何 变量的访问都可以从任何地址开始访问,但 ...

  8. python测试开发django-66.图片403forbidden

    前言 用 django 开发 web 页面,在 HTML 页面上添加图片时,发现本地图片可以正常显示,但是添加一个互联网的图片,却不能正常显示. 本地 static 图片 先在本地 static 放一 ...

  9. MyBatis框架之入门(三)

    使用原始dao层进行开发 UserMapper层接口 public interface UserMapper { /** * 通过id查询用户 * @param id * @return */ Use ...

  10. 使用 Express Generator快速创建Express应用

    全局安装express-generator npm install express-generator -g 根据需求生成自己需要的模板 生成ejs模板:express demo --view=ejs ...