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. 关于"架构"

    杨光辉说,在构架系统的早期可能不会更多地考虑架构,主要是在做技术选型,首先是编程语言的选择.对于编程语言选择,当前主流编程语言有很多,有面向对象语言.传统式语言等.做这个选择主要根据人员知识储备,包括 ...

  2. Intent在Activity之间传值的几种方式

    发这篇博客主要讲一下Android中Intent中如何传值的几种方法: 1:基本数据类型,包含了Java八种基本数据类型和CharSequece文本2:八种数据类新对应数组和CharSequece文本 ...

  3. Shell脚本中点号+文件名的作用

    熟悉linux是程序员必须具备的技能,水滴石穿,一点点学习吧. linux中一个文件是根据其是否具有执行属性来判断他是否可以直接运行的.就像windows下的exe一样. 如果我们要执行某一个文件,可 ...

  4. bzoj3262: 陌上花开 三维偏序cdq分治

    三维偏序裸题,cdq分治时,左侧的x一定比右侧x小,然后分别按y排序,对于左侧元素按y大小把z依次插入到树状数组里,其中维护每个左侧元素对右侧元素的贡献,在bit查询即可 /************* ...

  5. hdu-6319-单调队列

    Problem A. Ascending Rating Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 524288/524288 K ...

  6. MyBatis Generator自动创建代码

    MyBatis Generator自动创建代码 1.首先在eclipse上安装mybatis插件 2.创建一个mavenWeb项目. 3.在resource中写入一个xml,一定要与我得同名 < ...

  7. Deep Belief Network简介——本质上是在做逐层无监督学习,每次学习一层网络结构再逐步加深网络

    from:http://www.cnblogs.com/kemaswill/p/3266026.html 1. 多层神经网络存在的问题 常用的神经网络模型, 一般只包含输入层, 输出层和一个隐藏层: ...

  8. ES批量索引写入时的ID自动生成算法

    对bulk request的处理流程: 1.遍历所有的request,对其做一些加工,主要包括:获取routing(如果mapping里有的话).指定的timestamp(如果没有带timestamp ...

  9. Idea安装及其简介

    Idea现有设置         Idea重新安装步骤 卸载开始     D:\devsoft\jet\env\maven\global\wonders\settings.xml           ...

  10. linux processes identifiers

    Linux, like all Unix uses user and group identifiers to check for access rights to files and images ...