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 ...
随机推荐
- [剑指Offer]35-复杂链表的复制
链接 https://www.nowcoder.com/practice/f836b2c43afc4b35ad6adc41ec941dba?tpId=13&tqId=11178&tPa ...
- Springboot学习01- 配置文件加载优先顺序和本地配置加载
Springboot学习01-配置文件加载优先顺序和本地配置加载 1-项目内部配置文件加载优先顺序 spring boot 启动会扫描以下位置的application.properties或者appl ...
- ATM取款机系统代码及此次作业感受
本次乃我们软件工程专业开学第一个小测试,本来以为是和之前2016级相同的或者类似得软件,所以之前学了好久的那个程序完全失去了它的作用,当然了老师也从来没有按套路出过牌,所以这个下马威我觉得作用起到了. ...
- linux命令学习之：sort
sort命令是在Linux里非常有用,它将文件进行排序,并将排序结果标准输出.sort命令既可以从特定的文件,也可以从stdin中获取输入. 语法 sort (选项) (参数) 选项 sort将文 ...
- Couchbase学习和使用
Couchbase介绍 couchbase的关键有两点:延后写入和松散存储.延后写入,顾名思义,couchbase在对数据进行增删时会先体现在内存中,而不会立刻体现在硬盘上,从内存的修改到硬盘的修改这 ...
- mysql8 公用表表达式CTE的使用
公用表表达式CTE就是命名的临时结果集,作用范围是当前语句. 说白点你可以理解成一个可以复用的子查询,当然跟子查询还是有点区别的,CTE可以引用其他CTE,但子查询不能引用其他子查询. 一.cte的语 ...
- Jfinal适用于条件查询的动态SQL语句生成工具
条件查询是可能有为空字段,拼接SQL语句时候要屏蔽掉这些字段. package cn.pangpython.utils; import java.util.Iterator; import java. ...
- mysql 单表查询
一 单表查询的语法 SELECT 字段1,字段2... FROM 表名 WHERE 条件 GROUP BY field HAVING 筛选 ORDER BY field LIMIT 限制条数 二 ...
- admin 的流程 Xadmin
提交根评论 显示根评论 --- render显示 --- ajax显示 提交子评论 显示子评论 ---- render显示 ---- Ajax显示(扩展) 评论树 博客:富文本编辑器 beautful ...
- Linux locales
一.简介 二.语法 三.实例 aptitude install locales dpkg-reconfigure locales ; vi /etc/default/locale more / ...