Vue，React创建组件的写法

定义一个组件要有：（1）组件的HTML模板 ；  （2）数据和方法

Vue 

在Vue中，一个组件分为三部分，分别是script，template，style

Vue2

<template>
  <div class="box"></div>
</template>

<script>
export default {
  name: 'CategoryPage',//组件名
  props:['title'],     //props写法一
  // props: {          //props写法二
  //  title: Object,
  // },
  data(){},
  methods:{},
  computed:{},
  watch:{},
  create(){}  //生命周期函数
};
</script>

<style scoped>
</style>

Vue3

（1）setup函数中

<script>
export default {
  //setup的执行时期比beforeCreate还早
  //setup 无this,故组合式api无this
  setup() {
    //在setup中，可以写组合式api
    let n = 2
    let change = () => {
      console.log(n)
    }
    //return后，数据和方法才能在模板中使用
    return {
      n,
      change
    }
  },
 onMounted(){
    //挂载阶段的生命周期
  }
}
</script>
<template>
  <div></div>
</template>
<style></style>

 （2）setup语法糖

<script setup>
import { onMounted } from "vue";
let n=2
const fn=()=>{
    console.log(n);
}

onMounted(()=>{
 //生命周期函数
});
//不用将数据和方法return 直接就可以在模板中使用
</script>

React

 class组件

class App extends React.Component {
  constructor(props) {
    super(props)
  }
  render (){
    return <div>class组件</div>
  }
}

函数组件

function App(){

//数据和逻辑写这

//Html模板
  return <div>我是App</div>
  
}

//css新建.css写样式