render函数的简单使用
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>Document</title>
</head> <body>
<div id="app">
<child :level=1>hello Vue</child>
<child :level=6>
<span slot="footer">span</span>
<p slot="header">header slot<span>span</span></p>
</child>
</div>
<script src="node_modules/vue/dist/vue.js"></script>//使用时改为自己的vue路径
<script>
Vue.component('child', {
render: function(createElement) {
return createElement('h'+ this.level, {
'class': {
foo: true,
bar: true
},
style: {
color: "red"
},
attrs: {
id: 'foo',
'data-id': 'bar'
},
domProps: {
//
},
on: {
click: this.clickit
},
},
[this.$slots.default]
)
},
template: '<div v-if="level===1"><slot></slot></div>',
props: {
level: {
type: Number,
required: true
}
},
methods: {
clickit: function() {
console.log('click')
}
}
})
new Vue({
el:"#app"
})
</script>
</body> </html>
render函数的简单使用的更多相关文章
- vue render函数 函数组件化
之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法,它只是一个接受参数的函数 在这个例子中,我们标记组件为functional,这意味它是无状态(没有data), ...
- QTableView另类打印解决方案（复用render函数去解决print问题）
Qt QTableView另类打印解决方案 上回书说道Qt的model/view,我就做了个demo用于显示数据库中的内容.没想到tableview的打印竟然成了问题.我困惑了,难道Qt不应该 ...
- 大白话Vue源码系列(03)：生成render函数
阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...
- 大白话Vue源码系列(04)：生成render函数
阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...
- Django render函数
render() 此方法的作用---结合一个给定的模板和一个给定的上下文字典,并返回一个渲染后的 HttpResponse 对象. 通俗的讲就是把context的内容, 加载进templates中定义 ...
- Vue学习笔记进阶篇——Render函数
基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template ...
- vue render函数
基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...
- render函数和redirect函数的区别+反向解析
render函数和redirect函数的区别+反向解析 1.视图函数:一定是要包含两个对象的(render源码里面有HttpResponse对象) request对象:----->所有的请求 ...
- render函数、createElement函数与vm.$slots
1.render函数.createElement函数 Vue.component('es-header', { render: function (createElement) { return cr ...
随机推荐
- l2-22（重排链表）
题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805057860517888 题意:给定链表L1->L2- ...
- hdoj1005(循环，找规律)
Problem Description A number sequence is defined as follows: f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1 ...
- open suse linux 磁盘分区
在opensuse 中我是这样对磁盘进行配置的 先添加一块磁盘任意大小 reboot 重启 ls /dev/ | grep sd 可以看到有一块sdb 的磁盘没有分区 fdisk /dev/sdb n ...
- 【转】Spring、Spring MVC、MyBatis整合文件配置详解
见:http://www.tuicool.com/articles/eyINveF web.xml的配置 web.xml应该是整个项目最重要的配置文件了,不过servlet3.0中已经支持注解配置方式 ...
- iOS指令集
公司在进行项目重构时,其中一个地方的改动就是调整了iOS的指令集.更改指令集主要可以对手机应用的安装机型做出控制,同时在研发过程中也可以控制相关的模拟器和真机.它们原则上是向下兼容的,比如iphone ...
- Qt: 记事本源代码
界面编程之实例学习,系统记事本是个极好的参考,初学Delphi及后之c#,皆以记事本为参考,今以Qt学习,亦是如此. 期间搭建开发环境,复习c++知识,寻找模块对应功能,不一而足:现刻录其模块代码,以 ...
- xadmin系列之零碎的小点
1.获取某张表的某个字段的属性 意思就是获取括号中的属性 class app1Person(models.Model): pid = models.AutoField(primary_key=True ...
- tableViewCell上的定时器拖动阻塞
if (_timer == nil) { _timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@sele ...
- Java构建指定大小文件
Java快速创建指定大小的文件,最多的解决办法就是循环向文件里面入固定大小的空字节,但是这种方式构建大文件性能比较低下,因此有这样两种方式可供参考: Java有一个类:FileChannel,查阅AP ...
- solrj 测试连接 6.6.5solr集群
我开始环境是 linux上是6.6.5 pom也是6.6.5 按照学习视频的demo,他用的是4点几的solr,我换成了6点几的,没有CloudSolrServer 只有CloudSolrClie ...