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 ...
随机推荐
- 项目的发布（nginx、uwsgi、django、virtualenv、supervisor）
导论 WSGI是Web服务器网关接口.它是一个规范,描述了Web服务器如何与Web应用程序通信,以及Web应用程序如何链接在一起以处理一个请求,(接收请求,处理请求,响应请求) 基于wsgi运行的框架 ...
- vue 登录前做校验this.$router.push(location)
有很多按钮在执行跳转之前,还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转 例如:登录按钮,点击时需要先判断验证码等是否正确,此时
- [codeforces_597B] Restaurant(贪心)
题目链接 http://codeforces.com/problemset/problem/597/B 题意 输入:区间数目n.及n个区间的起止(左闭右闭). 输出:最多不重叠的区间有多少个. 思路 ...
- 使用pyqt写了一个检查大数据环境的gui
通过pyqt做了一个大数据最佳实践检查的gui界面 1.首先是需要用到的模块 from PyQt5.QtWidgets import QApplication from PyQt5.QtWidgets ...
- zookeeper 单机版配置
zookeeper :中间件,为分布式系统进行协调服务 作用于分布式系统,可以为大数据服务 支持java 和 C 客户端的api zookeeper 特性:一致性,数据会按照顺序分批入库: 原子性:数 ...
- 编程，计算data段中的第一组数据的3次方，结果保存在后面一组dword单元中
assume cs:code data segment dw ,,,,,,, dd ,,,,,,, data ends code segment start: mov ax,data mov ds,a ...
- CentOS 6、7 安装 Golang
方法一:使用二进制文件安装 (推荐) 1.下载二进制文件: wget https://storage.googleapis.com/golang/go1.7.3.linux-amd64.tar.gz ...
- 运行SVO
安装与运行的所有文档:https://github.com/uzh-rpg/rpg_svo/wiki 有两种安装方式: 有ros:https://github.com/uzh-rpg/rpg_svo/ ...
- Django日志系统
在Django中使用的日志系统是基于Python中的loggin模块. 首先简单介绍下logging. 一 Loggin模块简介 loggin模块主要包含以下四个部分: Loggers ...
- Struts框架之结果页面的跳转
1. 结果页面存在两种方式 * 全局结果页面(有很多时候我们会跳转到同一页面,所以我们可以配置一个全局结果页面,不管什么情况都会跳转到这个页面) > 条件:如果<package>包中 ...