Vue $createElement
const h=this.$createElement;
h('span', tag, '内容可以是 ')
.....
tag完整的数据对象如下:
{
// 和`v-bind:class`一样的 API
'class': {
foo: true,
bar: false
},
// 和`v-bind:style`一样的 API
style: {
color: 'red',
fontSize: '14px'
},
// 正常的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 props
props: {
myProp: 'bar'
},
// DOM 属性
domProps: {
innerHTML: 'baz'
},
// 事件监听器基于 "on"
// 所以不再支持如 v-on:keyup.enter 修饰器
// 需要手动匹配 keyCode。
on: {
click: this.clickHandler
},
// 仅对于组件,用于监听原生事件,而不是组件使用 vm.$emit 触发的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定义指令. 注意事项:不能对绑定的旧值设值
// Vue 会为您持续追踨
directives: [{
name: 'my-custom-directive',
value: '2'
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}],
// 如果子组件有定义 slot 的名称
slot: 'name-of-slot'
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef'
}
Vue $createElement的更多相关文章
- createElement与createDocumentFragment的点点区别
在DOM操作里,createElement是创建一个新的节点,createDocumentFragment是创建一个文档片段. 网上可以搜到的大部分都是说使用createDocumentFragmen ...
- 添加删除表格append或 createElement
方法一: js代码:增加一行五列的表格 function AddList(){ $len= document.getElementsByName('goods_name[]').length; obj ...
- HTML DOM对象之createElement()方法
今天在学习DOM节点操作时,发现了创建DOM节点的createElement()方法的一个有意思的现象. 代码如下: var box=document.getElementById("box ...
- document.createElement()方法
document.createElement()是在对象中创建一个对象,主要和appendChild() 方法或者insertBefore() 方法联合使用. appendChild() 方法在节点的 ...
- js document.createElement()的用法 (转)
document.createElement()的用法 分析代码时,发现自己的盲点--document.createElement(),冲浪一番,总结了点经验. document.createElem ...
- 【前端积累】createElement createTextNode
<!DOCTYPE html> <html><!--树根--> <head> <meta charset="utf-8"> ...
- createElement() 创建元素 appendChild()添加元素
Javascript window 对象的document.createElement() 方法.语法及其使用. 1.方法 创建一个新的html元素对象,并可返回一个Element 对象,新创建的El ...
- js 随机星星 document.createElement(); setAttribute()
js 随机星星 document.createElement(); setAttribute() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- createElement,createTextNode,appendChild
<html> <head> <meta charset="UTF-8"> <title></title> <scr ...
- 创建删除元素appendChild,removeChild,createElement,insertBefore
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- sql server 小技巧(6) Cannot resolve the collation conflict between "Latin1_General_CI_AI" and "Chinese_PRC_CI_AS" in the equal to operation
今天查询二个db,出现这个错误,二种方法,一种是把db里的collation改成一样的:如果不方便可以直接在sql语句后面转一下: select * from table where crm_mscr ...
- 输入一个十进制的数到dx_ax,然后十六进制转十进制输出
;HtoD data segment n dw ? data ends stack segment db dup(?) stack ends code segment assume cs:code,s ...
- 深入理解JS this,作用域
深入理解JS this 阮一峰博客链接http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html this ...
- indeed招聘
https://cn.indeed.com/%E5%B7%A5%E4%BD%9C-%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E5%85%AC%E5%8F%B8-%E5% ...
- win7下PLSQL Developer提示“ORA-12154: TNS:无法解析指定的连接标识符”
解决方法:卸载掉重新安装,注意安装的目录的文件夹不要有特殊的符号,例如64位系统的的安装目录会到Program Files (x86),这时候就会出现"ORA-12154: TNS:无法解析 ...
- mybatis入门基础----高级映射(一对一,一对多,多对多)
阅读目录 一:订单商品数据模型 二.一对一查询 三.一对多查询 四.多对多查询 回到顶部 一:订单商品数据模型 1.数据库执行脚本 创建数据库表代码: CREATE TABLE items ( id ...
- prefab内容分析
写在前面: 当前使用的unity版本:5.3.7p4. 如果打开prefab文件是乱码: 把editer的asset Srialization改为Force Text即可. 一.什么是Prefab P ...
- FFprobe使用指南
http://blog.csdn.net/stone_wzf/article/details/45378759 http://blog.chinaunix.net/uid-26000296-id-42 ...
- Webx示例-PetStore分析1
1. 下载源码 2. 启动容器,加载组件--WebxContextLoaderListener WebxContextLoaderListener继承自org.springframework.web. ...
- [QuickRoR]Ruby on Rails开发环境安装
1.Setup Ruby on Rails2.Test Web App3.Create the First Web App 1.Setup Ruby on Rails1) Download rubyi ...