Vue和React差异

一、环境搭建

    我一般都是在github上新建一个项目， 然后进行get clone到桌面上 然后在进行对环境搭建

1、vue使用的是 vue init webpack 

2、React使用的 create-react-app my-react-app

二、项目目录

  vue 入口文件为main.js                                 React入口文件为index.js

 vue中组件化是一个个的vue文件                 React组件化是一个个以大写字母开头的JS文件

 vue组件的框架为                                      

<template>

</template>

<script>

export default {

}

</script>

<style scoped>

</style>

也可以从上面看出vue组件文件的HTML+CSS+JS代码都是写在同一个vue页面中

import React, { Component } from 'react';

class Todo extends Component{

    constructor (props) {

           super(props);

           }

     render () { }

      //方法写在这

}

export default Todo;

可以从上面看出来一个个JS组件是HTML+JS代码 实现了HTML与CSS的分离

CSS的引入也是使用import引入 可以看出React是将所有的文件都当做一个js文件 进行引入

就总结到这！！！

三、数据的绑定

vue直接是使用v-bind一般也就是使用： 很简单的绑定

React是使用

value={this.state.inputValue}

这种传递方式

数据的声明vue是在data中 感觉浅显易懂一点

React是在constructor中（而且constructor中必须要带有参数props并且要写入super（props））

React声明数据必须要使用this.state = {inputValue: ''}

点击事件不同

Vue @click="handleClick"

React onClick="this.handleClick.bind(this)"     //this的指向必须要绑定 不然在函数中使用数据就会出现undefined！！！

四、数据的传递（以父传子、子传父为例）

Vue数据是双向绑定  父传子

在父组件引入的child子组件中进行传值

<child :mesage="mesage"></child>

子组件接收数据

props: {

mesage:  String

}

子传父 子组件通过事件的方式给父组件传递参数

  <div @change='change'></div>

methods: {change(){this.inputValue   = inputValue }}

父组件接收数据

<div @clcik="getChange"></div>

data () {return {inputValue : ''}}

methods: { getChange () {this.$emit('change', this.inputValue )}}

React传递数据是单向数据流  数据之间可以传递但不能进行修改 数据是单向的

父传子

list = {this.list}

子组件通过 {this.props.list}接收数据

子传父 通过方法进行传递

onClick={this.handleClick}

handleClick () {
    delClick()
}

通过这种方法子组件就可以调用父组件的方法 对父组件进行操作