博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
anjular2以及微信小程序的一点比较
阅读量:5039 次
发布时间:2019-06-12

本文共 2044 字,大约阅读时间需要 6 分钟。

1条件渲染:

小程序:用 wx:if="{

{condition}}" 来判断是否需要渲染该代码块。

<view wx:if="{

{condition}}">
    True
</view>

ng2:  用 *ngIf="condition"来判断是否需要渲染该代码块。
<p  *ngIf="condition">
    condition is true and ngIf is true.
</p>

对于ng2, 当=号里面的值为真时才渲染标签内的元素,为假时将元素移除。注意:这里是将元素从DOM树里面完全移除,而不是隐藏。 对于需要频繁切换可见性的元素来说,改变元素的display无疑要比频繁的移除和重新渲染高效的多。 不过,angulra2开发者认为,在大多数 UI中,当我们“关闭”一个组件时,在相当长时间内都不大可能想再见到它——可能永远也不见。 而且,当我们隐藏掉一个元素时,组件的行为还在继续——它仍然附加在它所属的 DOM 元素上, 它也仍在监听事件。 Angular 会继续检查哪些能影响数据绑定的变更。 组件原本要做的那些事情仍在继续。 虽然不可见,组件及其各级子组件仍然占用着资源。  虽然每种方法都有各自的优点和缺点,但使用 ngIf 来移除不需要的组件通常都会比隐藏它们更好一些。

微信小程序文档较少,不过根据文档中这段话:

一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好

可以推测wx:if和*ngIf实质是一样的,虽然在写法上有些区别,wx是将条件包裹在{

{ condition }}里面。

 

2 循环列表渲染

小程序:

列表渲染:默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item

<view wx:for="{
{items}}">
  {
{index}}: {
{item}}
</view>

如某个数组为[a,b,c,d],则对应的下标index为0,1,2,3,对应的变量名item为a,b,c,d

使用wx:for-item可以指定数组当前元素的变量名;

使用wx:for-index可以指定数组当前下标的变量名;

如: <view wx:for="{

{array}}" wx:for-index="idx" wx:for-item="itemName">
      {
{idx}}: {
{itemName.message}}
      </view>

则此时下标idx为0,1,2,3, 变量名itemName为a,b,c,d

ng2:

<div *ngFor="let hero of heroes; let i=index">

    {

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

</div>

ng2里指定变量名用的是let hero of heroes,即设置变量名为hero,对应微信的 wx:for-item="itemName;
指定下标let  i=index,对应微信的wx:for-index="idx";

上面这种写法实际上已经经过语法糖包装后的写法,原来的写法太啰嗦,形似类似:

 

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">

    <li>...</li>
</template>

 

3数据绑定

微信:

数据绑定使用 Mustache 语法(双大括号)将变量包起来
    <view> {
{ message }} </view>
并在js文件里面设置对应的变量值
Page({
  data: {
    message: 'Hello MINA!'
  }
})

微信小程序没有双向数据绑定,要改变变量值时,需要通过setdata改变,监听事件如

eventname: function(e) {
  this.setData({
    data: "im_new"
  })
}
注意不能这样this.data="im_new",否则会出错

 

ng2:

ng2:

主要看一下双向数据绑定:

<input [(ngModel)]="currentHero.firstName">

(123)表示绑定事件,[12345]表示绑定数据

通过[( )]即可实现双向数据绑定

这是种简写的形式,背后是这样写的

<input
    [ngModel]="currentHero.firstName"
    (ngModelChange)="currentHero.firstName=$event">

 

 

 

转载于:https://www.cnblogs.com/zhengrunlin/p/5918310.html

你可能感兴趣的文章
java.util.List类学习
查看>>
1.jstl c 标签实现判断功能
查看>>
Linux 常用命令——cat, tac, nl, more, less, head, tail, od
查看>>
超详细的Guava RateLimiter限流原理解析
查看>>
VueJS ElementUI el-table 的 formatter 和 scope template 不能同时存在
查看>>
Halcon一日一练:图像拼接技术
查看>>
Swift - RotateView
查看>>
iOS设计模式 - 中介者
查看>>
centos jdk 下载
查看>>
HDU 1028 Ignatius and the Princess III(母函数)
查看>>
关于多路复用器的综合结果
查看>>
(转)面向对象最核心的机制——动态绑定(多态)
查看>>
token简单的使用流程。
查看>>
django创建项目流程
查看>>
UIActionSheet 修改字体颜色
查看>>
Vue 框架-01- 入门篇 图文教程
查看>>
Spring注解之@Lazy注解,源码分析和总结
查看>>
spoj 345
查看>>
ios 设置屏幕方向的两种方法
查看>>
Java编程思想小笔记2
查看>>