相同点
1,基本核心文件都是index.html+main.js+组件(react中是app.js,vue中是app.vue)
2,新建一个项目的流程都是:安装cli(npm install ),新建一个工程(vue/creat-react-app init project),打开本地端口访问网页 localhost:3000(8080)
3,都是模块化,组件堆积式网页,都需要import和export组件
4, react和vue都使用mvvm模式 。mvc和mvvm的区别
5,react和vue都是状态机,状态改变则组件自动刷新
//react
this.state={
deep1:false,
deep2:false
}
change(){
//因为参数是字符串,不可以使用setState了
this.state[deep] = !this.state[deep];
this.setState({fresh:!this.state.fresh}); //为了刷新状态而写
}
render(){
<button onClick={this.change("deep1")} className={this.state.deep1?"blue":"red"}</button>
}
不同点
1,react中可变数据放置在state状态管理中,使用this.state.name来调用;vue放置在data中,使用v-bind调用。
2,react将html和js混合,以jsx的形式书写组件,而vue在组件内,以html与js分离的方式,将html放置在<template>标签中,js放置在<script>标签中,css放置在<style>标签中。
react组件:
import a from './a';
export class b extends c{
constructor(){
super();
}
this.state={}
render(){
return(
<div> {this.state.name} </div>
)
}
}
vue组件
<template>
<div>
<a on:click="hello">{{message}}</a>
</div>
</template>
<script>
export default{
name: 'helloworld‘,
methods:{
hello: function(){}
},
data:{
message:"hello zej ",
},
}
</script>
3, vue中组件循环
<template>
<div>
<div v-for="(item,index) in data" :key="index">
{{item.name}}
</div>
</div>
</template>
react中组件循环