React:
脚手架初始化项目
npx create-react-app todolist
import React, { Component } from 'react';
import './Todolist.css';
// 若上面不引用 { Component }则需要写成 React.Component
class Todolist extends Component {
constructor(props){
super(props);
// 类似于Vue的data中 变量声明
this.state={
inputValue:'', // 输入框中的值
list:[] // todolist数组
}
}
// 点击增加条目
handleAdd(){
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
// 动态监听输入变化inputValue值
handleInput(e) {
let inputValue = e.target.value; // 获取input值
this.setState({
inputValue // 键值对相同时 可简写
});
}
// 点击删除条目
handleRemove(idx) {
let list = this.state.list; // 尽量不直接操作state中数组 备份一份出来性能高
list.splice(idx,1); // 删掉list中下标为idx的项
this.setState({
list
});
}
render() {
return (
<div className="todolist">
<div>
{/* value = {foo} 与 onChange = {} 加起来等价于Vue的 v-model = "foo" */}
<input type="text" value={this.state.inputValue} onChange={this.handleInput.bind(this)}/>
<button onClick={this.handleAdd.bind(this)}>Add</button>
</div>
<ul>
{
this.state.list.map((item,index)=>{
return <li key={index}>{item}
{/* index可以通过bind传给handleRemove */}
<button onClick={this.handleRemove.bind(this,index)}>-</button>
</li>
})
}
</ul>
</div>
);
}
}
export default Todolist;
Vue:
脚手架初始化项目
vue init webpack my-project
<template>
<div class="todolist">
<div>
<input type="text" v-model="inputValue">
<button @click="handleAdd()">Add</button>
</div>
<ul>
<li v-for="(item,index) in list" :key="index">
{{item}}
<button @click="handleRemove(index)">-</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Todolist',
// 类似于React的state中 变量声明
data () {
return {
inputValue:'', // 输入框中的值
list:[] // todolist数组
}
},
methods:{
// 点击增加条目
handleAdd(){
this.list=[...this.list,this.inputValue],
this.inputValue='';
},
// 点击删除条目
handleRemove(idx) {
let list = this.list; // 尽量不直接操作state中数组 备份一份出来性能高
list.splice(idx,1); // 删掉list中下标为idx的项
this.list = list;
}
}
}
</script>
<style scoped>
.todolist{
background:linear-gradient(left,rgba(255,255,255,.8),rgba(0,0,0,.2));
}
ul {
list-style-type:disc;
}
li {
display: list-item;
margin: 0 10px;
}
</style>
简单の对比总结:
1.事件绑定:
Vue:
@click @change
React:
onClick onChange2.表达式&运算
Vue:
{{userInfo.userName}}
React:
{this.state.userInfo.userName}
3.类名の动态切换(《,》改为<,>)
Vue:
《div class=”todolist” :class={ showMsg ? ‘red’ : ‘green’ }》
React:
《div className=”todolist” className={ this.state.showMsg ? ‘red’ : ‘green’ }》
4.其他区别及对应关系
Vue data(){ } 对应 React this.state={ }
Vue表达式中不需要this,React中需要指定this,this.state及 调用方法的this绑定:bind(this)
Vue 各个方法及钩子需要逗号’,’隔开,而React是构造器语法,并不需要逗号
Vue v-model=”{foo}”可实现双向绑定,React需要 value={foo} onChange={this.updateFoo.bind(this)}来实现视图与数据的双向绑定
CSS一个是写在本文件.vue内部,另一个是引入.css文件