vue，react，微信小程序，uniapp一些使用方式对比_vue react uniapp

写完vue项目，忘了react怎么写的，写完react项目，又忘了vue， 微信小程序，uniapp怎么写的。可能，也许是健忘了。整理一些他们之间使用上的对比，方便下次切换的时候可以顺畅一点。

绑值

1、vue
<div> {{ name }} </div>

2、uniapp
<div> {{ name }} </div>

3、微信小程序
<view> {{ name }} </view>
<input model:value="{{value}}" />

4、react
<h1>{name}</h1>  // 单括号

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};
<h1>{formatName(user)} </h1>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

绑事件

1、vue
<button v-on:click.stop="handleClick(obj)"><button>
<button @click.stop="show=false"></span>
<van-checkbox v-model="checked" @change="val => handleCheck(val, obj)">xxx</van-checkbox>

2、uniapp
同vue

3、微信小程序
<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>  // 通过data-xxx 传参数到事件里
Page({
  tapName: function(event) {
    console.log(event)  // event.target.dataset.hi 可以拿到传来的"Weixin"
  }
})

4、react
4.1 合成事件e
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>Click me</a>
  );
}

4.2 箭头函数
class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

4.3箭头函数
class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={() => this.handleClick()}>Click me </button>
      //或者 <button onClick={this.handleClick.bind(this)}>Click me </button>
    );
  }
}

4.4传值
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

给data中的数据赋值

data () {
    return {
      isLoaded: false
    }
 }
 
1、vue
this.isLoaded = true
2、uniapp
this.isLoaded = true

3、微信小程序
let i = 2
Page({
  data: {
    isLoaded: false，
    arr: [1,2,3],
    a: {
    	name: 'xm'
    }
  },
  
  Fc () {
	this.setData({isLoaded: true}),
	'arr[0]' : 9,
	['arr[1]'] : 8,
	['arr[' + i + ']'] : 7,
	['a.name']: 'xh'
	}
});

setData({ key:value }，callback)
setData函数用于将数据从逻辑层发送到试图层(异步) 同时改变对应的this.data的值(同步) 
 第一个参数是更改的data中数据 key可以是对象的属性或数组的某一项, 第二个参数是数据改变试图更新后的回调函数
4、react
函数和类写法不一样
this.setState({ count: this.state.count + 1 }，callback）// class写法

const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}> Click me </button>  //函数使用usetState hook写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

绑Class

1、vue
<span class="arrow" :class="[isDrop ? 'arrow-top' : 'arrow-bottom']"></span>
<div :class="['active', { 'bold': isBold }]">Hello World</div>
<span :class="idx==='index'?'active':''"></span>
<span :class="{'active': current==='1'}" ></span>
<div :class="`name${index}`"></div>

2、uniapp
同vue

3、微信小程序
<view class="test {{isActive ? 'active':'' }}"></view>
view class="toast {{closeToast}}"> </view>

4、react
<p className={["bgcolor","box-border"].join(" ")}></p>
<p className={true ? "textcolor " : " "}></p>
<p className={ 'box-color'：true }>hello world</p>
<p className={ true && 'box-color' }>hello world</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

绑Style

1、vue
<div :style="{'color': textColor}">Hello World</div>  // textColor: '#333'
<div  :style="styleObject">Hello World</div> // styleObject: {color: '#333',  fontSize: '16px'}
<div :style="{color: textColor, fontSize: fontSize + 'px' }"></div> //textColor: '#333', fontSize: 16

2、uniapp
同vue

3、微信小程序
<view style="color:{{color}};" /> //style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

4、react
<p style={{ textAlign: 'center', marginTop: 24 }}></p>
<p style={ true ? {display: 'inline-block'} : { display: 'none'} }></p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

循环

1、vue
<ul>
    <li v-for="(item,index) in options" :key="item.id" @click="selectMonth(item['value'])">{{index}}:{{ item.label }}</li>
</ul>

2、uniapp
<u-grid :border="false" col="4" style="margin-top: 40rpx; margin-bottom: 20rpx;">
	<u-grid-item v-for="(item,listIndex) in list" :key="listIndex" @click="gridChick(item)">
		<text class="grid-text">{{item.title}}</text>
	</u-grid-item>
</u-grid>

3、微信小程序
<view wx:for="{{array}}"> {{index}}: {{item.message}}</view>
<view wx:for="{{array}}" wx:for-index="idx" wx:key="idx" wx:for-item="it">{{it.name}}</view>
 // 使用 wx:for-item 可以指定数组当前元素的变量名，// 使用 wx:for-index 可以指定数组当前下标的变量名：
<view wx:for="{{array}}" wx:key="index" data-index="{{index}}">xxx<view>

4、react

<ul>
      {posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

条件

1、vue
<div v-if="a===1" class="box"></div>
<div v-else-if="a===2"><div>
<div v-else></div>

2、uniapp
同vue

3、微信小程序
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

4、react
有变量，有与运算符，三目运算符
render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }


render() {
  const count = 0;
  return (
    <div>
      {count && <h1>Messages: {count}</h1>}       //  返回值是 <div>0</div>
    </div>
  );
}

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

显示与隐藏

1、vue
<div v-show="show"></div> // show为真的时候显示
2、uniapp
同vue
3、微信小程序
<text hidden="{{upOrDown}}"><text> //upOrDown为真的时候隐藏
4、react
跟条件方法一样
1
2
3
4
5
6
7
8

其他

// 微信小程序
1、样式使用rpx为单位。 rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
2.模板
<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

不全，看一眼之后能使用起来就行。react比较因为要分class写法和函数写法，不详写了，请移步 官方文档