anjular2和微信小程序的对比

1条件图形：

小程序：用 wx:if="{{condition}}" 去推论与否须要图形该代码块。

True

ng2: 用 *ngIf="condition"去推论与否须要图形该代码块。

condition is true and ngIf is true.

对于ng2, 当=号里面的值真时才图形标签内的元素，为假时将元素去除。特别注意：这里就是将元素从DOM树里面全然去除，而不是暗藏。 对于须要频密转换可知性的元素来说，发生改变元素的display无疑必须比频密的去除和再次图形高效率的多。 不过，angulra2开发者指出，在大多数 UI中，当我们“停用”一个组件时，在相当长时间内都不大可能想要再看见它——可能将永远也不见踪影。 而且，当我们暗藏掉一个元素时，组件的犯罪行为还在稳步——它仍然额外在它所属的 DOM 元素上， 它也仍在监听事件。 Angular 可以稳步检查哪些能够影响数据存取的更改。 组件原本必须搞的那些事情仍在稳步。 虽然不可知，组件及其各级子组件仍然挤占着资源。 虽然每种方法都存有各自的优点和缺点，但采用 ngIf 去去除不须要的组件通常都会比暗藏它们更好一些。

微信小程序文档较太少，不过根据文档中这段话：

一般来说，wx:if 存有更高的转换消耗而 hidden 存有更高的起始图形消耗。因此，如果须要频密转换的情景下，用 hidden 更好，如果在运转时条件不大可能发生改变则 wx:if 较好

可以推断wx:if和*ngIf实质就是一样的，虽然在读法上有些区别，wx就是将条件包覆在{{ condition }}里面。

2 循环列表图形

小程序：

列表图形：预设数组的当前项的负号局部变量预设为index，数组当前项的局部变量预设为item

{{index}}: {{item}}

例如某个数组为[a,b,c,d]，则对应的负号index为0,1,2,3，对应的局部变量item为a,b,c,d

采用wx:for-item可以选定数组当前元素的局部变量；

采用wx:for-index可以选定数组当前下标的局部变量；

例如：

{{idx}}: {{itemName.message}}

则此时负号idx为0,1,2,3, 局部变量itemName为a,b,c,d

ng2:

{{i + 1}} - {{hero.fullName}}

ng2里选定局部变量用的就是let hero of heroes，即为设置变量名叫hero，对应微信的 wx:for-item="itemName；

选定负号let i=index，对应微信的wx:for-index="idx";

上面这种读法实际上已经经过语法糖外包装后的读法，原来的读法太啰嗦，形如相似：

• ...

3数据存取

微信：

数据存取采用 Mustache 语法（双大括号）将变量纸盒出来

并在js文件里面设置对应的变量值

Page({

data: {

message: 'Hello MINA!'

}

})

微信小程序没双向数据存取，必须发生改变变量值时，须要通过setdata发生改变，监听事件例如

eventname: function(e) {

this.setData({

data: "im_new"

})

}

特别注意无法这样this.data="im_new"，否则可以失效

ng2:

ng2:

主要看看一下双向数据存取：

（123）则表示存取事件，[12345]则表示存取数据

通过[( )]即可同时实现双向数据存取

这就是种缩写的形式，背后就是这样写下的

<input

[ngModel]="currentHero.firstName"

(ngModelChange)="currentHero.firstName=$event">