Angular组件介绍&使用,数据绑定的介绍&使用

朱雀 2023-02-14 10:10 1阅读 0赞

## 1.组件介绍: ##

### 1.1整体介绍: ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70]

### 1.2app下其他的组件介绍:(我用的是less样式,选什么用什么) ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 1]

### 1.3引入&导出组件: ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20200602084734729.png]

## 2.数据绑定(在test组件中演示databind组件样式): ##

# [所需模块配置信息(这里需要配置Form表单模块)][Form] #

![在这里插入图片描述][20200602085857920.png]

### 2.1插值表达式 ###

#### 语法:\{ \{data\}\} ####

### 2.2属性绑定 ###

#### 语法:\[property\]=“data” ####

### 2.3事件绑定 ###

#### 语法:(event)=“expression” ####

### 2.4双向数据绑定 ###

#### 语法:\[(ngModel)\]=“data” ####

![在这里插入图片描述][20200602085238828.png]  
![在这里插入图片描述][20200602085948571.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200602082854410.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200602083456480.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200602084835924.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s=,size_16,color_FFFFFF,t_70
[20200602084734729.png]: https://img-blog.csdnimg.cn/20200602084734729.png
[Form]: https://blog.csdn.net/Ryan_black/article/details/106489876
[20200602085857920.png]: https://img-blog.csdnimg.cn/20200602085857920.png
[20200602085238828.png]: https://img-blog.csdnimg.cn/20200602085238828.png
[20200602085948571.png]: https://img-blog.csdnimg.cn/20200602085948571.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200602090035641.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s=,size_16,color_FFFFFF,t_70