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 ...
随机推荐
- flash as3.0 截图保存图片
import flash.display.MovieClip; import flash.events.MouseEvent; import flash.filesystem.*; ///////// ...
- hdoj1004(查找众多字符串中个数最多的字符串)
Let the Balloon Rise. 最近开始刷hdoj,想通过写博客做做笔记,记录写过代码. Problem Description Contest time again! How excit ...
- Mysql 密码相关
MySQL5.6.6版本之后增加了密码强度验证插件validate_password,相关参数设置的较为严格 一.密码复杂度 1.密码复杂度配置文件:/etc/my.cnf (CentOS 7下) ...
- Trigger,Cursor
USE [Demo]GO /****** Object: StoredProcedure [dbo].[p_couser_Student] Script Date: 02/24/2014 20:43: ...
- typedef void(*Func)(void)的简单用途
typedef void(*Func)(void)的用途 用法的好处: 定义一个函数指针类型. 例子: 有三个类型相似或功能相似的函数: void TASK1(void) { printf(" ...
- Hdu1805-Expression(表达式树模版题+层序遍历树+栈的基本应用)
2018-11-23-02:27:37 原题链接 题目描述: 题目一目了然. 本题思路: 本题很容易能想到是构建表达式树然后按照层序逆序输出即可. AC代码: #include <cstdio& ...
- 定义一个servlet用于处理所有外部接口类 架构思路
架构思路”: 所有外部URL访问请求(对外提供的接口)全部交给intServiceServlet处理, 然后servlet调用BPO通过URL中的命名去寻找相应的javaBean.接口BO,然后接口B ...
- webpack(三）使用 babel-loader 转换 ES6代码
查询各个 loader的使用,可以在官网上查询. https://www.npmjs.com (一)安装 babel-loader,babel-core. 使用命令 npm install --s ...
- idea自动生成文档注释
这方面主要分为两块内容,一是利用idea本身具有的生成模板工具进行生成:二是利用第三方插件生成,比如jindent 后期会进行整理更新,待续 下面的网址目前只是关于这方面的介绍,先留存一份而已 htt ...
- 微信小程序 页面跳转navigator与传递参数
页面之间跳转使用 navigator标签,wx.navigateTo ,wx.redirectTo 1.URL就是跳转的页面路径.上面代码中就是navigator目录下的navigator页面,tit ...