博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
riot.js教程【五】标签嵌套、命名元素、事件、标签条件
阅读量:6030 次
发布时间:2019-06-20

本文共 1702 字,大约阅读时间需要 5 分钟。

前文回顾

标签嵌套

让我们定义一个父标签account,一个子标签subscription

{ opts.plan.name }

// Get JS handle to options var plan = opts.plan, show_details = opts.show_details // access to the parent tag var parent = this.parent

注意:show_details的命名方式,这里不能写成驼峰式的名字,因为浏览器解析标签的时候会把大写转成小写

接下来我们把account标签添加到页面的body中

  

父标签的参数是通过riot.mount方法传递的,子标签的参数是通过标签属性传递过去的

注意:嵌套的标签总是在父标签内部声明,定义;

标签内嵌入HTML

我们先定义一个my-tag标签

Hello

this.text = 'world'

注意:这里有一个yield占位符,我们稍后再讲它

现在我们在页面上使用这个标签

{ text }

那么他渲染出来之后,是如下这个样子的:

Hello world

你看到了吗?yield占位符输出的,其实是text变量

这就是在标签内嵌入HTML代码

命名元素

当元素具备ref属性的时候,

这个元素会被链接到this.refs上,

这样你就可以很方便的用JS访问到它

注意,这个指向的操作,是在mount事件被触发前完成的,所以你可以在mount事件中访问到this.refs

事件

DOM事件可以直接和riotjs标签内的方法绑定,示例如下:

// this method is called when above form is submitted submit(e) { }

只要事件名以on开头的,比如:onclick, onsubmit, oninput,都可以直接绑定方法

这类事件也可以直接绑定一句表达式,如下:

在事件方法内,this指代本标签实例,方法执行完之后,会马上执行this.update()事件,

如果你在方法内部,使用了event.preventUpdate,那么方法执行完之后,就不会执行this.update()事件;

方法的第一个参数就是标准的event对象

  • e.currentTarget 指代触发事件的DOM元素
  • e.target 也指代触发事件的DOM元素
  • e.which 指代按键代码 (keypress, keyup, 等).

标签条件

你可以使用标签条件来决定是否需要显示一个标签,如下:

This is for premium users only

注意,标签条件的值可以是一个变量,也可以是一个表达式

除了if之外,还可以使用show和hide来决定是否显示一个标签

show – 当值是true的时候,相当于 style="display: ''"

hide – 当值是true的时候,相当于 style="display: none"

if – 当值是true的时候,会把该标签加入到DOM元素中,是false的时候,不会把标签加入到dom元素中

转载地址:http://xnzhx.baihongyu.com/

你可能感兴趣的文章
SERVLET容器简介与JSP的关系
查看>>
《服务器SSH Public Key认证指南》-补充
查看>>
我的友情链接
查看>>
Java break continue return 的区别
查看>>
算法(Algorithms)第4版 练习 1.3.4
查看>>
jquery easyUI checkbox复选项获取并传后台
查看>>
c#处理json格式类型的字符串
查看>>
浅析NopCommerce的多语言方案
查看>>
设计模式之简单工厂模式
查看>>
二、saltstack使用
查看>>
C++中变量的持续性、链接性和作用域详解
查看>>
2017 4月5日上午
查看>>
Python中str()与__str__、repr()与__repr__、eval()、__unicode__的关系与区别
查看>>
[NOIP2011] 观光公交
查看>>
[洛谷P3203][HNOI2010]弹飞绵羊
查看>>
Google Chrome开发者工具
查看>>
第一阶段冲刺报告(一)
查看>>
使用crontab调度任务
查看>>
ctr预估论文梳理和个人理解
查看>>
【转载】SQL经验小记
查看>>