stenciljs 学习九 使用jsx
可以使用jsx 方便组件的开发
基本格式
主要是render 函数
class MyComponent {
render() {
return (
<div>
<h1>Hello World</h1>
<p>This is JSX!</p>
</div>
);
}
}
数据绑定
render() {
return (
<div>Hello {this.name}</div>
)
}
条件语句
render() {
if (this.name) {
return ( <div>Hello {this.name}</div> )
} else {
return ( <div>Hello, World</div> )
}
}
slots
参考
render() {
return (
<div>
<h2>A Component</h2>
<div><slot /></div>
</div>
);
}
对于多个可以指定名称
参考
render(){
return [
<slot name="item-start" />,
<h1>Here is my main content</h1>,
<slot name="item-end" />
]
}
render(){
return(
<my-component>
<p slot="item-start">I'll be placed before the h1</p>
<p slot="item-end">I'll be placed after the h1</p>
</my-component>
)
}
loops 操作
参考
render() {
return (
<div>
{this.todos.map((todo) =>
<div>
<div>{todo.taskName}</div>
<div>{todo.isCompleted}</div>
</div>
)}
</div>
)
}
处理用户输入事件
使用原生dom 事件
参考
export class MyComponent {
handleClick(event: UIEvent) {
alert('Received the button click!');
}
render() {
return (
<button onClick={ (event: UIEvent) => this.handleClick(event)}>Click Me!</button>
);
}
}
获取dom 元素的引用
使用ref 进行参数绑定
参考
@Component({
tag: 'app-home',
})
export class AppHome{
textInput: HTMLInputElement;
handleSubmit = (ev: Event) => {
ev.preventDefault();
console.log(this.textInput.value);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={(el: HTMLInputElement) => this.textInput = el} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
参考资料
https://stenciljs.com/docs/templating-jsx
stenciljs 学习九 使用jsx的更多相关文章
- stenciljs 学习五 事件
组件可以使用Event Emitter装饰器发送数据和事件. Event 定义 参考: import { Event, EventEmitter } from '@stencil/core'; ... ...
- stenciljs 学习四 组件装饰器
stenciljs 可以方便的构建交互式组件 支持以下装饰器 component prop watch state method element component 说明 component 包含ta ...
- React.js学习之理解JSX和组件
在开启JSX的学习旅程前,我们先了解一下React的基本原理.React本质上是一个"状态机",它只关心两件事:更新DOM和响应事件,React不处理Ajax.路由和数据存储,也不 ...
- 侯捷STL学习(九)--关联式容器(Rb_tree,set,map)
layout: post title: 侯捷STL学习(九) date: 2017-07-21 tag: 侯捷STL --- 第十九节 容器rb_tree Red-Black tree是自平衡二叉搜索 ...
- 【react学习笔记】-jsx
//jsx定义组件 var Divider = React.creatClass({ getIsComplete:function(){ return 'is-complete' }, handleC ...
- ExtJS4.2学习(九)属性表格控件PropertyGrid(转)
鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-15/178.html ------------- ...
- Windows核心编程学习九:利用内核对象进行线程同步
注:源码为学习<Windows核心编程>的一些尝试,非原创.若能有助于一二访客,幸甚. 1.程序框架 #include "Queue.h" #include <t ...
- Java数据持久层框架 MyBatis之API学习九(SQL语句构建器详解)
对于MyBatis的学习而言,最好去MyBatis的官方文档:http://www.mybatis.org/mybatis-3/zh/index.html 对于语言的学习而言,马上上手去编程,多多练习 ...
- JVM学习九:JVM之GC算法和种类
我们前面说到了JVM的常用的配置参数,其中就涉及了GC相关的知识,趁热打铁,我们今天就学习下GC的算法有哪些,种类又有哪些,让我们进一步的认识GC这个神奇的东西,帮助我们解决了C 一直挺头疼的内存回收 ...
随机推荐
- nyoj-833-博弈
833-取石子(七) 内存限制:64MB 时间限制:1000ms 特判: No通过数:16 提交数:30 难度:1 题目描述: Yougth和Hrdv玩一个游戏,拿出n个石子摆成一圈,Yougth和H ...
- vue2.0对不同数据类型的显示
- spring boot 学习(十)SpringBoot配置发送Email
SpringBoot配置发送Email 引入依赖 在 pom.xml 文件中引入邮件配置: <dependency> <groupId>org.springframework. ...
- Edraw安装图解
Edraw安装图解 Success
- 小程序中的bindtap和catchtap的区别(交流QQ群:604788754)
bindtap绑定的节点,如果他的父节点也有绑定事件,点击之后就会出现冒泡. catchtap绑定的节点,如果他的父节点也有绑定事件,点击之后不会出现冒泡.
- python函数def
#函数就是实现一个特定功能的程序块 #下面这个函数实现了打印helloworld的功能 def print_hello(): print('hello world!') #这是调用方法 print_h ...
- 用正则表达式输出rdf文档的三元组格式数据
占个位置 1.输出所有尖括号里的内容 package com.jena; import java.io.BufferedReader; import java.io.FileReader; impor ...
- IOS消息推送(转)
第一部分 首先第一步当然是介绍一下苹果的推送机制(APNS)咯(ps:其实每一篇教程都有),先来看一张苹果官方对其推送做出解释的概要图. Provider是给你手机应用发出推送消息的服务器,而APNS ...
- CMMI的5个级别
为了帮助软件企业对软件工程过程进行管理和改进,增强开发与改进能力,从而能按时地.不超预算地开发出高质量的软件,美国国防部与卡内基-梅隆大学和美国国防工业协会共同开发和研制了CMMI(软件能力成熟度模型 ...
- JavaScript学习(二)——深入学习js对象的原型与继承
了解对象 什么是对象? …… 这个就不说了 对象的声明的两种方式 var person = new Object(); person.name="linchen"; pers ...