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 学习四 组件装饰器的更多相关文章

  1. TypeScript学习笔记(四)装饰器

    目录 一.装饰器的作用 二.类装饰器 1. 普通装饰器 为类扩展属性和方法 使用装饰器修改属性和重写方法 2. 装饰器工厂 三.属性装饰器 四.方法装饰器 使用方法装饰器对方法进行扩展 五.方法参数装 ...

  2. python学习笔记之装饰器、递归、算法(第四天)

    参考老师的博客: 金角:http://www.cnblogs.com/alex3714/articles/5161349.html 银角:http://www.cnblogs.com/wupeiqi/ ...

  3. stenciljs 学习六 组件开发样式指南

    组件不是动作,最好使用名词而不是动词, 文件结构 每个文件一个组件. 每个目录一个组件.虽然将类似的组件分组到同一目录中可能是有意义的,但我们发现当每个组件都有自己的目录时,更容易记录组件. 实现(. ...

  4. Python小白学习之函数装饰器

    装饰器 2018-10-25 13:49:37 装饰器从字面意思就是用来装饰的,在函数可以理解为:在函数中,我们不想影响原来的函数功能,又想给函数添加新的功能,这时候我们就用到了装饰器. 一般函数操作 ...

  5. Python学习笔记012——装饰器

    1 装饰器 1.1装饰器定义 在代码运行期间动态增加功能的方式,称之为“装饰器”(Decorator). 1.2 装饰器分类 装饰器:函数装饰器,类装饰器,函数的装饰器,类的装饰器 装饰器:函数装饰函 ...

  6. python学习笔记(五):装饰器、生成器、内置函数、json

    一.装饰器 装饰器,这个器就是函数的意思,连起来,就是装饰函数,装饰器本身也是一个函数,它的作用是用来给其他函数添加新功能,比如说,我以前写了很多代码,系统已经上线了,但是性能比较不好,现在想把程序里 ...

  7. Python学习笔记:装饰器

    Python 装饰器的基本概念和应用 代码编写要遵循开放封闭原则,虽然在这个原则是用的面向对象开发,但是也适用于函数式编程,简单来说,它规定已经实现的功能代码不允许被修改,但可以被扩展,即: 封闭:已 ...

  8. python学习之类的装饰器进阶版

    装饰器可以修饰函数,同样,也可以修饰类 装饰器 def deco(func):    print('======>被修饰的')return func 装饰器装饰函数的方式,语法糖 @decode ...

  9. Python(四)装饰器、迭代器&生成器、re正则表达式、字符串格式化

    本章内容: 装饰器 迭代器 & 生成器 re 正则表达式 字符串格式化 装饰器 装饰器是一个很著名的设计模式,经常被用于有切面需求的场景,较为经典的有插入日志.性能测试.事务处理等.装饰器是解 ...

随机推荐

  1. 【异常】redis.clients.jedis.exceptions.JedisDataException: ERR unknown command 'PSETEX'

    在spring中 针对 RedisTemplate类: private RedisTemplate<String, String> template; 当调用下面方法 template.o ...

  2. 20170711xlVBA自定义分类汇总一例

    Public Sub CustomSubTotal() AppSettings On Error GoTo ErrHandler Dim StartTime, UsedTime As Variant ...

  3. 3-22 Ruby 编码规则(个人整理)

    编码规则 https://github.com/thoughtbot/guides/tree/master/style/ruby *Use a trailing comma after each it ...

  4. 『PyTorch』第四弹_通过LeNet初识pytorch神经网络_下

    『PyTorch』第四弹_通过LeNet初识pytorch神经网络_上 # Author : Hellcat # Time : 2018/2/11 import torch as t import t ...

  5. nyoj737区间dp(石子合并)

    石子合并(一) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述     有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程只能每次将相邻的 ...

  6. eclipse编译zookeeper源码

    使用版本zookeeper-3.4.6.jar 从官网下载zookeeper-3.4.6.tar.gz,解压缩到 D:\tools 文件夹,目录结构如下图. 1. Eclipse新建java工程: 2 ...

  7. MySQL|RESTRICT|NO ACTION|CASCADE| SET NULL四种外键约束

    外键约束比较多得两种情况: 1.父表更新时子表也更新,父表删除时如果子表有匹配的项,删除失败: ON UPDATE CASCADE ON DELETE RESTRICT 1 2.父表更新时子表也更新, ...

  8. hadoop mongodb install(3)

    reference:http://dblab.xmu.edu.cn/blog/868-2/ root@iZuf68496ttdogcxs22w6sZ:~# mv mongodb-linux-x86_6 ...

  9. codeforce 853A Planning

    题目地址:http://codeforces.com/problemset/problem/853/A 题目大意: 本来安排了 n 架飞机,每架飞机有 ci 的重要度, 第 i 架飞机的起飞时间为 i ...

  10. Oracle 11g新特性 Interval Partition

    分区(Partition)一直是Oracle数据库引以为傲的一项技术,正是分区的存在让Oracle高效的处理海量数据成为可能,在Oracle 11g中,分区技术在易用性和可扩展性上再次得到了增强.在1 ...