1、普通渲染组件  在app容器中插入login组件 <login></login>  一个app可以多个这种组件

<script>

var login = {

  template:'<div>这是登录组件</div>'

}

var vm = new Vue({

  el:"#app",

  data:{},

  methods:{},

  components:{

    login

  }

})

</script>

2、render渲染方法  把app容器替换为 渲染的login组件   一个app只能一个render

<script>

var login = {

  template:'<div>这是登录组件</div>'

}

var vm = new Vue({

  el:"#app",

  data:{},

  methods:{},

  render:function(creatElements){  //creatElements 是一个方法调用他能够将 指定的组件模板渲染为html结构  把app容器替换为 渲染的login组件

    // var html = creatElements(login)

    // return html

    return creatElements(login)

  }

})

</script>

实例的render方法渲染组件的更多相关文章

  1. 19 使用Vue实例的render方法渲染组件

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 010 vue使用render方法渲染组件

    1.普通的组件渲染方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. render方法渲染组件和在webpack中导入vue

    使用component注册的组件div容器里可以放多个,但是使用render的只能放一个 <div id="app"> <p>我可以放两个</p> ...

  4. 使用render函数渲染组件

    使用render函数渲染组件:https://www.jianshu.com/p/27ec4467a66b

  5. 用ActionController::Renderer的render方法渲染模版

    使用Cable进行pub: ActionCable.server.broadcast "call", {address: AddressesController.render(@a ...

  6. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

  7. React.js 小书 Lesson7 - 组件的 render 方法

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson7 转载请注明出处,保留原文链接和作者信息. React.js 中一切皆组件,用 React. ...

  8. 普通组件定义渲染和render渲染组件的区别(三)

    普通方式定义组件和效果: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  9. 组件的 render 方法

    React.js 中一切皆组件,用 React.js 写的其实就是 React.js 组件.我们在编写 React.js 组件的时候,一般都需要继承 React.js 的 Component(还有别的 ...

随机推荐

  1. C#常用类操作

    C#提供了许多可以直接使用的类代码. 1. Convert类 Convert类提供了很多静态方法成员,用于实现数据类型的转换. Convert类的常用方法                        ...

  2. eclipse添加缺失的包/src/main/resource

    右键>>build path>>source 添加文件夹

  3. 8.Appium的基本使用-2(安装node.js)

    node.js 下载地址:https://nodejs.org/en/download/下载 64-bit 下载包下载完成双击安装:

  4. kotlin学习(二)——类

    Kotlin中的类遵循一个简单的结构.尽管与Java有一点细微的差别.你可以使用try.kotlinlang.org在不需要一个真正的项目和不需要部署到机器的前提下来测试一些简单的代码范例. 1. 怎 ...

  5. python 求3到8位数的水仙花数Pycharm实现

    #-*- coding: utf-8-*-import timeimport math#获取3位数的水仙花数start1 = time.time()start = time.time() number ...

  6. AspxGridView服务器事件列表

    2.AutoFilterCellEditorCreate (1)语法:publicdelegate void ASPxGridViewEditorCreateEventHandler(object s ...

  7. BBS-项目流程分析-表的创建

    http://www.cnblogs.com/alice-bj/tag/Django%20-%20BBS/ https://www.cnblogs.com/venicid/p/9365019.html ...

  8. include 模板标签

    {%load staticfiles %}就能使用include标签了 {% include %}该标签允许在(模板中)包含其他的模板的内容,标签的参数是所要包含的模板名称,可以是一个变量,也可以是用 ...

  9. YCSB性能测试工具使用(转)

    在网上查In-Memory NoSQL性能测试的资料时,偶然间发现了这个性能测试工具YCSB,全称为“Yahoo! Cloud Serving Benchmark”.它内置了对常见NoSQL数据库和数 ...

  10. cin.tie与sync_with_stdio加速输入输出

    在LeetCode上练习习题的时候每次AC之后都会去看别人的代码,几乎每次都能遇到cin.tie与sync_with_stdio.类似这样: static auto x = [](){ std::io ...