您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息
免费发信息
三六零分类信息网 > 防城港分类信息网,免费分类信息发布

riot.js学习【七】脚本创建标签

2024/4/4 18:05:00发布13次查看
创建标签
在riot中,我们通过html代码,创建自定义标签,但实际上,最终可运行的自定义标签,会被编译成脚本。
实际上,一段这样的自定义标签代码:
<script type="riot/tag"> <todo> <h1>{ title }</h1> this.title = opts.title || "da宗熊"; </todo></script>
通过编译后,会成为一段真正可执行的脚本,像这样子:
riot.tag('todo', '<h1>{ title }</h1>', function(opts) { this.title = opts.title || "da宗熊"; });
riot.tag必填的参数有3个:
riot.tag('标签名', '模版内容', 初始化函数);
可选参数有两个,分别是样式和属性:
riot.tag('标签名', '模版内容', '样式', fn); 或:riot.tag('标签名', '模版内容', '属性', fn); 或:riot.tag('标签名', '模版内容', '样式', '属性', fn);
样式:
样式的内容,会被放在head里的一个style标签内。
所以,样式的正确编写如下:
riot.tag('todo', '<p class="title">{opts.title}</p>', '.title{color:#ff0;}', function(opts){ // todo something});
样式需要编写完成的选择器,关联样式。
属性:
属性的内容,最终会体现在context.opts里,属性的正确编写方式如下:
riot.tag('todo', '<p>{ opts.title }</p>', 'title="da宗熊" age="26"', function(opts){ // todo something});
新手遇坑
官网说,属性表达式必须带引号,如:value=”{ val }” 代替 value={ val }【but,2.1版亲身测试,没啥区别,有大牛解析么?】
boolean属性:__checked=”{ istrue }” 代替 checked={ istrue }【这个绝对要!】
img标签的src,最好写为 riot-src,避免错误的请求
使用riot-style代替style,为了兼容ie
以上就是riot.js学习【七】脚本创建标签的内容。
防城港分类信息网,免费分类信息发布

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录