应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

anjular2和微信小程序的对比

发布时间:2024-01-17 15:19 浏览次数:41


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">

TAG标签:
阅读推荐