riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法
基本要求
一个riot标签,就是展现和逻辑的组合(也就是html和JS)
以下是编写riot标签最基本的规则:
先撰写HTML,再撰写JS,JS代码可以写在<script>标签内部,但这并不是必须的;
当riot标签定义在document body之内时,其内部不能使用script标签;
当riot标签定义在单独的文件中时,其内部才可以使用script标签;
如果JS代码没有写在<script>标签内部,
那我们就认为最后一个HTML标签结尾之后就是JS代码;
riot标签可以是空的,或者只有HTML,或者只有JS;
引号是可选的,<foo bar={baz}>等价于<foo bar="{baz}">;
相似的ES6编码风格:
methodName(){ }等价于this.methodName=function(){ }.bind(this)
这里的this总是指向当前的标签实例;
<div class={selected:flag}></div>当flag变量是true的时候,该DIV的class属性是selected;
<input checked={ undefined }> 等价于 <input>
所有的属性名称必须是小写(浏览器规范要求);
riot标签可以支持自闭合标签<div />等价于<div></div>;<br> <img> <hr>等标签编译之后并不会自闭合;
riot标签必须闭合(或者自闭合)
标准HTML标签,例如label,table等也可以被重写,但不建议这么干
riot标签也可以拥有自己的属性;
在document body中自定义riot标签,必须注意缩进格式;
tab键的缩进与空格缩进是不同的,这要注意;
不用写<script>标签
<todo> <!-- layout --> <h3>{ opts.title }</h3> // logic comes here this.items = [1, 2, 3] </todo> |
this.items = [1,2,3]就是JS代码,可以正确执行
riotjs标签内部最后一个html标签结束后,就可以直接写JS代码,不用把JS代码写在<script>标签内部;
声明预处理器
你可以通过type属性指定一个JS的预处理器
<my-tag> <script type="coffee"> # your coffeescript logic goes here </script> </my-tag> |
目前支持coffee,typescript,es6和none;
你也可以写成这样:type = 'text/coffee';
标签样式
你可以在riot标签内部插入<style>标签,并在内部编写样式;
Riotjs会自动把<style>标签内部的东西,插入到html的head节中;
这个调整过程,只会发生一次,不管这个riot标签在页面内实例化多少次;
如果你想控制这个调整过程,你可以在head标签内加入一个这样的标签:
<style type='riot';></style>
这样的话标签内的样式就都会转义到该区块内了;
<todo> <!-- layout --> <h3>{ opts.title }</h3> <style> /** other tag specific styles **/ h3 { font-size: 120% } /** other tag specific styles **/ </style> </todo> |
Riotjs支持scoped伪类;但目前还不支持shadow dom;
我不建议你使用scoped伪类;因为这玩意儿已经被W3C废除了;
Riotjs将在4.x版本支持shadow dom;
关于shadow dom的内容,请参考:
https://www.toobug.net/article/what_is_shadow_dom.html
关于riotjs 4.x升级的内容,请参考:
https://github.com/riot/riot/issues/2283
关于scoped伪类,请参考:
https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
装配方法
你可以通过如下方式装配组件
<body> <!-- place the custom tag anywhere inside the body --> <todo></todo> <!-- include riot.js --> <script src="riot.min.js"></script> <!-- include the tag --> <script src="todo.js"></script> <!-- mount the tag --> <script>riot.mount('todo')</script> </body> |
在body区域内的自定义标签,必须通过这种方式闭合:<todo></todo>
这种闭合方式是错误的:<todo />
下面是其他集中装配组件的方式
// 自动装配当前页面上所有的自定义组件 riot.mount('*') // 通过指定的ID装配组件 riot.mount('#my-element') // 装配选中的组件 riot.mount('todo, forum, comments') |
一个页面可装配的组件的数量是不受限制的
上一篇文章的地址:http://www.cnblogs.com/liulun/p/7672876.html
20171113:对本文部分文字和修辞方式做了修改
riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法相关推荐
- riot.js教程【四】Mixins、HTML内嵌表达式
前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...
- js循环解析html标签,riot.js教程【六】循环、HTML元素标签
循环 可以通过each属性来达到标签循环,如下: { title } this.items = [ { title: 'First item', done: true }, { title: 'Sec ...
- Unittest自动化测试框架教程(二)——Python中Fixture测试夹具的使用和setUp方法相关参数传递
"此文基于系列作品 Unittest自动化测试框架教程(一)--测试用例基本框架介绍 基础上编写,初学者访问此文建议快速浏览链接文章熟悉测试用例基本框架,高手可直接上手阅读 ~ " ...
- Less/Sass预处理器
Less,Sass预处理器教程 1.0 CSS预处理器的介绍 CSS预处理器 基于CSS的另一种语言 通过工具编译成CSS 添加了很多CSS不具备的特性 能提升CSS文件的组织方式 CSS预处理器到底 ...
- fatal error C1021: 无效的预处理器命令“warning”
这个没有预训练:https://github.com/jacke121/CenterNetPerson 这个是源码研读:https://github.com/takooctopus/CenterNet ...
- 基于 next.js + mdx 搭建组件库文档项目(二) -- mdx 控件封装实现组件的演示与 Props 列表
说明 经过上阶段的配置虽然可以在项目中使用 mdx 语法 来创建页面了,但是我们的组件库有一些定制化的需求:交互式的组件演示.组件 Props 列表展示.这些功能如果可以通过封装来实现,会大大提升开发 ...
- Vue.js教程-组件化开发
Vue.js教程-组件化开发 前言 Vue组件化 什么是组件化 Vue单页面开发的解释 组件化思想 组件的使用 原理 实际开发中的使用-父子组件 父子组件传递数据 父传子-props用法 子传父-th ...
- three.js教程创建消防场景示例二
先看下最终效果吧 开始 创建多个仓库自定义长宽高 可参考上一节three.js教程创建仓库场景示例一 addHouse(){const house1 = new House(150,80,20,t ...
- 令人愉快的 Nuxt3 教程 (二): 快速轻松地搭建博客
令人愉快的 Nuxt3 教程 (二): 快速轻松地搭建博客 继 令人愉快的 Nuxt3 教程 (一): 应用的创建与配置 后,我们已经成功的创建了一个 Nuxt3 应用,同时已经添加了大量的开发配置. ...
最新文章
- html页面内容改变,但是网页内容不变
- 【CSAPP】三、程序的机器级表示
- Anolis 安装图解
- mysqld已删除但仍占用空间的_Windows 10删除备份文件方法
- java 批量提交_【INSERT】逐行提交、批量提交及极限提速方法
- 架构设计 | 基于Seata中间件,微服务模式下事务管理
- 劲爆ORACLE优化,你不必是专家
- 缓存MEMCACHE 使用原子性操作add,实现并发锁
- python将图片转化成字符图片_python如何将图片转换为字符图片
- openai-gpt_为什么GPT-3感觉像是编程
- iOS中分段控制器与UIScrollView结合使用
- 广数980tc3从u盘复制到系统_广州数控GSK980TC3系列 编程及操作手册.pdf
- java集中常见的算法讲解
- ffmpeg java 使用教程_Java使用ffmpeg
- python 经纬度画北京地图_python basemap 画出经纬度并标定的实例
- 常用的三种非对称加密算法
- 使用CubeMX配置STM32L476RG,Timer触发ADC采集通过DMA搬运
- 有一部电影用计算机回到未来,《复联4》调侃《回到未来》,1985年的这部穿越片,到底讲了什么...
- 2021年的4个开源对象存储平台
- PC天翼云盘v6.3.4精简版