写完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、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>
给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写法
绑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>
绑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、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、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、vue
<div v-show="show"></div> // show为真的时候显示
2、uniapp
同vue
3、微信小程序
<text hidden="{{upOrDown}}"><text> //upOrDown为真的时候隐藏
4、react
跟条件方法一样
其他
// 微信小程序
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'}
}
})
不全，看一眼之后能使用起来就行。react比较因为要分class写法和函数写法，不详写了，请移步 官方文档