在页面中基本的渲染页面

这里的p标签会显示

<div id="app">
<p>33333</p>
<login></login>
</div>
var login = {
template: '<h1>这是登录组件</h1>'
} // 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
login
}
});

这里的p标签不会显示

<div id="app">
<p>444444</p>
</div>
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 指定的那个 容器
}
});

vue-render渲染的更多相关文章

  1. vue render 渲染函数

    vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...

  2. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  3. Vue.js 2.x render 渲染函数 & JSX

    Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...

  4. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

  5. vue.js 渲染完成回调

    vue.js渲染完成后,想触发一些事情,写在哪里呢? 答案是mounted 例子: new Vue({ el:'#demo', data:{ text:'Hello' }, mounted:funct ...

  6. vue render & array of components & vue for & vue-jsx

    vue render & array of components & vue for & vue-jsx https://www.cnblogs.com/xgqfrms/p/1 ...

  7. Render渲染函数和JSX

    1.Render函数:render是用来替换temlate的,需要更灵活的模板的写法的时候,用render. 官网API地址:https://cn.vuejs.org/v2/guide/render- ...

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

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

  9. vue render

    Vue 的 render 渲染 API vue2 的 vnode tag: 当前节点的标签名 data: 当前节点是数据对象 children: 子节点,数组也是vnode 类型 text: 当前节点 ...

  10. vue服务器端渲染指南研究

    什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HT ...

随机推荐

  1. bootstrap-select使用过程中的一些问题

    这里总结一下上次使用bootstrap-select的过程中遇到的一些问题.至于bootstrap-select的具体使用方法这里就不介绍了,网上有很多例子. 地址: 官方插件地址:https://d ...

  2. 2019年全国高校计算机能力挑战赛初赛C++语言解答

    1; 题目一 16.电商促销某种商品时,希望通过打折鼓励消费者组团消费.已知,团队消费金额=该团的人数和*商品单价.打折规则如下:当组团消费者数量不满50人时,商品消费金额没有折扣:消费者数量大于等于 ...

  3. PHP目前常见的五大运行模式

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/xujingzhong0077/artic ...

  4. ASP.NET页面缓冲

    整页缓存<% OutPutCache Duration=5 VaryByParam="none" %>Duration是缓冲时间 参数可以有多个 在varyByPara ...

  5. Redis实战(一)Redis简介及环境安装(Windows)

    提到Redis,大家肯定都听过,并且应该都在项目中或多或少的使用过,也许你觉得Redis用起来挺简单的呀,但如果有人问你下面的几个问题(比如同事或者面试官),你能回答的上来吗? 什么是Redis? R ...

  6. Elasticsearch 6.x版本全文检索学习之集群调优建议

    1.系统设置要到位,遵照官方建议设置所有的系统参数. https://www.elastic.co/guide/en/elasticsearch/reference/6.7/setup.html 部署 ...

  7. Emoji 映射编码

    Emoji官网:https://emojipedia.org/ Name   Unified DoCoMo KDDI Softbank Google Wechat   black sun with r ...

  8. jmeter测试并发

    由于生产出现个并发问题,本地没法重现.后来网上有人说使用jmeter可以测试并发,也有人说postman可以测试.但本着试试新鲜的东西,就用jmeter. 到apache上面下载. 下载加压,然后运行 ...

  9. 033.[转] Java 工程师成神之路 | 2019正式版

    Java 工程师成神之路 | 2019正式版 原创: Hollis Hollis 2月18日 https://mp.weixin.qq.com/s/hlAn6NPR1w-MAwqghX1FPg htt ...

  10. 使用 TSPITR 恢复删除的表空间的步骤 (Doc ID 1277795.1)

    Steps To Recover A Dropped Tablespace Using TSPITR (Doc ID 1277795.1) APPLIES TO: Oracle Database - ...