web前端工程化之数据绑定

       这篇博客我放了好久都没有来补充了,是因为那时候做前端,有很多东西很迷糊,这些名词都是新的,经过这么长时间 的沉淀,这些名词就不再是不熟悉的,而是每个页面都在使用的。

      先来了解一下前端基本结构包括:page.html、page.scss、page.ts

web前端工程化之数据绑定_第1张图片

我们的页面就是写在html中,页面样式写在scss中,函数方法写在ts中。这个和js很像,其实ts就是封装的js

数据绑定--插值法

在angular中,使用 {{}} 插值语法实现数据绑定。

绑定普通文本

page.ts

import { Component } from '@angular/core'; 

export class AppComponent  {
  name = 'Angular'; 
}

page.html







    
Hello,{{name}}

绑定对象属性

 page.ts

import { Component } from '@angular/core'; 

export class AppComponent {
  name = 'xlb';
  address = {
    province: '北京',
    city: '廊坊' }
}

page.html







    

大家好,我是{{name}}

我来自{{address.province}}省, {{address.city}}

 

属性绑定

使用[属性]=“值”进行属性绑定(属性如果不加[],那么就直接是传统的赋值,加上[]就是angular中属性绑定)

page.html

2.属性绑定:

3.属性绑定:

page.ts

src:string = "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png";

 或者

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'a-comp',
  template: `
      
      
  `
})
export class AComponent {
  AText = 'some';
}

事件绑定

web前端工程化之数据绑定_第2张图片

 事件绑定基础语法:

(click)="onSelect(hero)"

双向绑定

这个是事件和属性绑定结合,在标签上使用:[(ngModel)]='teacher.content'

 

循环和判断

循环

*ngFor="let itemTicket of ticketItems"

判断

*ngIf="borrowStatus=='1'"

总结

前端初接触是angular,现在接触的是ionic,会用angular,再使用ionic会比较容易,因为两者有前后,ionic的基础是源于angular,除了路由这个地方简化了很多,写法会特别相似。

你可能感兴趣的:(Web前端)