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. python+selenium+PhantomJS批量投递智联简历(不要用自己的账号进行测试,请使用小号,很烦人的,哈哈哈)

    1.环境python2.7+selenium+PhantomJS(软件安装和库的安装网上都有教程我们跳过,so easy) 2.原理 绕过首页登录需要验证码,直接进入搜索栏,输入搜索的职位+地区搜索出 ...

  2. Phpstorm的强大功能

    你是否也是重复,重复,一直重复的打着重复的代码? 你是否也一直重复重复 的 Ctrl+c .Ctrl+v? 当你看到此项操作的时候就会发现,原来复制粘贴还能这么玩儿... 演示效果(以phpExcel ...

  3. flask 基本操作 模板语言 session

    Django web:优点:大而全,ORM models ,model Form ,admin ,csrf ,session缺点:资源浪费 Flask web:优点:小而精,ORM:x , Form: ...

  4. python学习之----导航树

    findAll 函数通过标签的名称和属性来查找标签 .但是如果你需要通过标签在文档中的位 置来查找标签,该怎么办?这就是导航树(Navigating Trees)的作用.在第1 章里,我们 看过用单一 ...

  5. WPF DataGrid多表头/列头,多行头,合并单元格,一列占据多行

    先上效果图: 思路说明:这是两个DataGrid,没有嵌套,位置和高度保持一致,在加上ScrollViewer滚动条,这就像是在一个DataGrid中. 缺点: 因为最外层有透明的Border,所以没 ...

  6. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

  7. python协程的使用

    1.Python对协程的支持是通过generator(生成器 yield)实现的.协程执行过程中,在子程序内部可中断,然后转而执行别的子程序,在适当的时候再返回来接着执行. 2.调用生成器运行的过程中 ...

  8. Maven上传jar包到私服

    1.认证,在M2_HOME/conf/settings.xml配置用户名密码 <server> <id>releases</id> <username> ...

  9. openx

    1openx 插件开发——终端用 2openx _金额 3openx ————带整理 4openx url 5Openx 2.8.x 在php5.4.x下数据统计不能正常显示解决方案 6openx改造 ...

  10. JAVA项目常用异常处理情况

    Java异常处理 网络整理 这里是异常的说明: 算术异常类:ArithmeticExecption 空指针异常类:NullPointerException 类型强制转换异常:ClassCastExce ...