stenciljs 学习四 组件装饰器
stenciljs 可以方便的构建交互式组件
支持以下装饰器
- component
- prop
- watch
- state
- method
- element
component 说明
component 包含tag styleUrl 参数
tag 定义组件的名称,注意需要使用-连接, styleUrl 指定组件的样式
参考格式:
import { Component } from '@stencil/core';
@Component({
tag: 'todo-list',
styleUrl: 'todo-list.css'
})
export class TodoList {
...
}
prop 说明
定义组件的自定义属性,可以方便的进行组件间数据的传递
支持的数据类型有number string boolean Object array,可以
使用this 进行数据访问,在html 设置需要使用dash-case 方式
在jsx 中使用camelCase 方式,默认prop 是不可变的,使用添加
mutable: true 进行修改,同时我们可以设置默认值
参考:
import { Prop } from '@stencil/core';
...
export class TodoList {
@Prop() color: string;
@Prop() favoriteNumber: number;
@Prop() isSelected: boolean;
@Prop() myHttpService: MyHttpService;
}
this 调用
logColor() {
console.log(this.color)
}
html 设置属性
<todo-list color="blue" favorite-number="24" is-selected="true"></todo-list>
jsx 设置属性
<todo-list color="blue" favoriteNumber="24" isSelected="true"></todo-list>
设置默认值
@Prop({ mutable: true }) name: string = 'Stencil';
watch 说明
我们可以使用watch 进行prop 值验证处理,包含新、旧数据
参考:
import { Prop, Watch } from '@stencil/core';
...
export class LoadingIndicator {
@Prop() activated: boolean;
@Watch('activated')
watchHandler(newValue: boolean, oldValue: boolean) {
console.log('The new value of activated is: ', newValue);
}
}
state 说明
state 可以进行组件内部状态的管理,state 的更新会造成render 再次调用组件
函数
import { State } from '@stencil/core';
...
export class TodoList {
@State() completedTodos: Todo[];
completeTodo(todo: Todo) {
// This will cause our render function to be called again
this.completedTodos = [...this.completedTodos, todo];
}
render() {
//
}
}
method 说明
可以方便的导出函数,方便外部调用
参考:
import { Method } from '@stencil/core';
...
export class TodoList {
@Method()
showPrompt() {
// show a prompt
}
}
调用:
const todoListElement = document.querySelector('todo-list');
todoListElement.showPrompt();
Element 说明
可以在class中访问当前组件,返回一个HTMLElement,可以使用DOM方式以及
事件
import { Element } from '@stencil/core';
...
export class TodoList {
@Element() todoListEl: HTMLElement;
addClass(){
this.todoListEl.classList.add('active');
}
}
嵌入&&嵌套组件
参考:
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-embedded-component'
})
export class MyEmbeddedComponent {
@Prop() color: string = 'blue';
render() {
return (
<div>My favorite color is {this.color}</div>
);
}
}
import { Component } from '@stencil/core';
@Component({
tag: 'my-parent-component'
})
export class MyParentComponent {
render() {
return (
<div>
<my-embedded-component color="red"></my-embedded-component>
</div>
);
}
}
参考资料
https://stenciljs.com/docs/decorators
stenciljs 学习四 组件装饰器的更多相关文章
- TypeScript学习笔记(四)装饰器
目录 一.装饰器的作用 二.类装饰器 1. 普通装饰器 为类扩展属性和方法 使用装饰器修改属性和重写方法 2. 装饰器工厂 三.属性装饰器 四.方法装饰器 使用方法装饰器对方法进行扩展 五.方法参数装 ...
- python学习笔记之装饰器、递归、算法(第四天)
参考老师的博客: 金角:http://www.cnblogs.com/alex3714/articles/5161349.html 银角:http://www.cnblogs.com/wupeiqi/ ...
- stenciljs 学习六 组件开发样式指南
组件不是动作,最好使用名词而不是动词, 文件结构 每个文件一个组件. 每个目录一个组件.虽然将类似的组件分组到同一目录中可能是有意义的,但我们发现当每个组件都有自己的目录时,更容易记录组件. 实现(. ...
- Python小白学习之函数装饰器
装饰器 2018-10-25 13:49:37 装饰器从字面意思就是用来装饰的,在函数可以理解为:在函数中,我们不想影响原来的函数功能,又想给函数添加新的功能,这时候我们就用到了装饰器. 一般函数操作 ...
- Python学习笔记012——装饰器
1 装饰器 1.1装饰器定义 在代码运行期间动态增加功能的方式,称之为“装饰器”(Decorator). 1.2 装饰器分类 装饰器:函数装饰器,类装饰器,函数的装饰器,类的装饰器 装饰器:函数装饰函 ...
- python学习笔记(五):装饰器、生成器、内置函数、json
一.装饰器 装饰器,这个器就是函数的意思,连起来,就是装饰函数,装饰器本身也是一个函数,它的作用是用来给其他函数添加新功能,比如说,我以前写了很多代码,系统已经上线了,但是性能比较不好,现在想把程序里 ...
- Python学习笔记:装饰器
Python 装饰器的基本概念和应用 代码编写要遵循开放封闭原则,虽然在这个原则是用的面向对象开发,但是也适用于函数式编程,简单来说,它规定已经实现的功能代码不允许被修改,但可以被扩展,即: 封闭:已 ...
- python学习之类的装饰器进阶版
装饰器可以修饰函数,同样,也可以修饰类 装饰器 def deco(func): print('======>被修饰的')return func 装饰器装饰函数的方式,语法糖 @decode ...
- Python(四)装饰器、迭代器&生成器、re正则表达式、字符串格式化
本章内容: 装饰器 迭代器 & 生成器 re 正则表达式 字符串格式化 装饰器 装饰器是一个很著名的设计模式,经常被用于有切面需求的场景,较为经典的有插入日志.性能测试.事务处理等.装饰器是解 ...
随机推荐
- 【异常】redis.clients.jedis.exceptions.JedisDataException: ERR unknown command 'PSETEX'
在spring中 针对 RedisTemplate类: private RedisTemplate<String, String> template; 当调用下面方法 template.o ...
- 20170711xlVBA自定义分类汇总一例
Public Sub CustomSubTotal() AppSettings On Error GoTo ErrHandler Dim StartTime, UsedTime As Variant ...
- 3-22 Ruby 编码规则(个人整理)
编码规则 https://github.com/thoughtbot/guides/tree/master/style/ruby *Use a trailing comma after each it ...
- 『PyTorch』第四弹_通过LeNet初识pytorch神经网络_下
『PyTorch』第四弹_通过LeNet初识pytorch神经网络_上 # Author : Hellcat # Time : 2018/2/11 import torch as t import t ...
- nyoj737区间dp(石子合并)
石子合并(一) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程只能每次将相邻的 ...
- eclipse编译zookeeper源码
使用版本zookeeper-3.4.6.jar 从官网下载zookeeper-3.4.6.tar.gz,解压缩到 D:\tools 文件夹,目录结构如下图. 1. Eclipse新建java工程: 2 ...
- MySQL|RESTRICT|NO ACTION|CASCADE| SET NULL四种外键约束
外键约束比较多得两种情况: 1.父表更新时子表也更新,父表删除时如果子表有匹配的项,删除失败: ON UPDATE CASCADE ON DELETE RESTRICT 1 2.父表更新时子表也更新, ...
- hadoop mongodb install(3)
reference:http://dblab.xmu.edu.cn/blog/868-2/ root@iZuf68496ttdogcxs22w6sZ:~# mv mongodb-linux-x86_6 ...
- codeforce 853A Planning
题目地址:http://codeforces.com/problemset/problem/853/A 题目大意: 本来安排了 n 架飞机,每架飞机有 ci 的重要度, 第 i 架飞机的起飞时间为 i ...
- Oracle 11g新特性 Interval Partition
分区(Partition)一直是Oracle数据库引以为傲的一项技术,正是分区的存在让Oracle高效的处理海量数据成为可能,在Oracle 11g中,分区技术在易用性和可扩展性上再次得到了增强.在1 ...