在页面中基本的渲染页面

这里的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. java之可变个数的形参

    //采用数组形参来定义方法 public static void test (int a, String[] books); //采用可变个数形参来定义方法 public static void te ...

  2. Cisco学习记录(二):路由及网络设备配置

    本篇我们利用cisco packet tracer搭建一个简单的网络.我们在左下方的设备中尝试选择创建两个4321路由器和一个3560-24PS Multilayer交换机,然后在左下方的电缆线中选择 ...

  3. UNIX系统编程知识点总结——思维导图

    根据考纲整理了一下本学期系统编程课的知识点,并且做成了思维导图便于理解和记忆 主要都是一些比较入门的知识点,UNIX博大精深,每一个知识点其实都能深挖 因为博客园不可能直接出思维导图,本文的主要内容都 ...

  4. Vue 从入门到进阶之路(十三)

    之前的文章我们介绍了一下 vue 中的作用域插槽,本章我们来看一下动态组件与 v-once 指令. <!DOCTYPE html> <html lang="en" ...

  5. 前端之JavaScript基础及使用方法

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

  6. Java生鲜电商平台-商城优惠券设计要点复盘与总结

    Java生鲜电商平台-商城优惠券设计要点复盘与总结 Java生鲜电商平台本文将从优惠券设计用户端,需求端,业务流程全方案解析优惠券设计方案 为什么要设计优惠券 设计优惠券的核心:拉新和促活 新产品上线 ...

  7. vscode自动修复eslint规范的插件及配置

    在开发大型项目中,经常都是需要多人合作的.相信大家一定都非常头疼于修改别人的代码的吧,而合理的使用eslint规范可以让我们在代码review时变得轻松,也可以让我们在修改小伙伴们的代码的时候会更加清 ...

  8. flex下省略号的问题解决

    最近在搞微信小程序,发现flex下使用省略号是没有效果的,而且还会打乱预期的结构,查询statckoverflow知道需要在父级设置min-width:0; 但是在我的尝试下,依然不行,原来在上层父级 ...

  9. 用两种以上的 方式实现一个方法或者对象,调用时打印"你好xx",已定义的代码不能做修改,自己编译的不能出现"你好"? (Javasctript)

    先上代码 const obj = { say(){ Array.from(arguments).forEach(item=>{ console.log(`${this.str} ${item}` ...

  10. 查询物料单位PAC成本

    select cpp.period_name 期间名称, ccga.organization_id 组织ID, ood.ORGANIZATION_CODE 组织代码, OOD.ORGANIZATION ...