React对比Vue(01 数据的定义,使用,组件的写法,目录结构等)
1.脚手架对比
两个都需要安装node
node自带npm
然后安装cnpm yarn(有时候 npm会丢包,所以)
npm install -g cnpm --registry=https://registry.npm.taobao.org 或者npm install -g yarn
2
cnpm install -g create-react-app
好了之后在创建项目
create-react-app reactdemo
cd reactdemo
npm start yarn start运行项目 (vue是npm run dev)
npm run build yarn build 生成项目(打包vue 一样)
3.项目目录对比(这篇文章写得同属异动,https://blog.csdn.net/xingyu_qie/article/details/69222923
狗屎一样的React(第二节,让目录结构变得更易懂)
)
对比VUe public里面的index.html就是入口页面; src:里面包含了一些我们自己使用的js文件,css文件,img文件等等,但你打开src文件夹你会发现很混乱,不要管什么app.js,你就看到index.js即可,系统默认将index.html对准了index.js,index.js也就是我们的入口js
就相当于vue中的main.js入口js,
react src下面的目录比较乱,你要自己建立文件夹,
改变之后的对比,assets放静态文件(img,css跟vue差不多),components放组建跟vue差不多,如上的Nba.js他就是一个组件,开头要大写
他这里的render(){
里面必须有且只有一个父元素,跟vue一样
}
----->>>>>固定写法>>>>>>
vue 双向绑定数据页面上是 {{}} 直接写定义在data中的变量名,react是{} 是this.state.xx 就相当于this.state类似vue的data(){} 里面定义数据,react中如果只有一个标签 则可以直接return<p></p> 但是一般还是建议写一个根节点,然后里面再写,免得误会
super关键字:
参考:http://www.phonegap100.com/thread-4911-1-1.html
Es6中的super可以用在类的继承中,super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。所以一定要卸载this之前
class Person {
constructor (name) {
this.name = name;
}
}
class Student extends Person {
constructor (name, age) {
super(); // 用在构造函数中,必须在使用this之前调用
this.age = age;
}
}
React对比Vue(01 数据的定义,使用,组件的写法,目录结构等)的更多相关文章
- React对比Vue(02 绑定属性,图片引入,数组循环等对比)
import React, { Component } from 'react'; import girl from '../assets/images/1.jpg' //这个是全局的不要this.s ...
- React对比Vue(05 生命周期的对比)
先来vue的吧,先上图,生命周期就好比一个人重出生到青少年再到青年再到中年在到老年到死亡的一个过程,不同的过程做不同的事情. 好了,上代码 beforeCreate :数据还没有挂载呢,只是一个空壳 ...
- React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- React对比Vue(04 父子组件的通信 )
跟vue差不多 都是props,但是react里面不仅可以给子组件传值,还可以传方法,MD尽然还可以把自己传给子组件,(卧槽vue可没有这个啊 ) vue的传递值差不多,传方法就不用了,子组件可以掉 ...
- React对比Vue(06 路由的对比)
其实差不多, 都需要先安装路由 React 先安装 cnpm install react-router-dom --save 在再根组件引入 import { BrowserRouter as Ro ...
- React对比Vue(一些小细节的差异)
@1===>发现一个神奇的地方在对数组进行增加删除的时候 react中一个输入框点击enter键,然后数组push,然后渲染 <input ref='valInput' onKeyUp={ ...
- Vue和React对比
Vue和React对比 Vue也已经升级到2.0版本了,到现在为止(2016/11/19)比较流行的MVVM框架有AngularJS(也有人认为其为MVC).ReactJS和VueJS,这三个框架中, ...
- vue.2.0-自定义全局组件
App.vue <template> <div id="app"> <h3>welcome vue-loading</h3> < ...
- vue学习-day03(动画,组件)
目录: 1.品牌列表-从数据库获取列表 2.品牌列表-完成添加功能 3.品牌列表-完成删除功能 4.品牌列表-全局配置数据接口的根域名 5.品牌列表-全局配置emulateJS ...
随机推荐
- 网龙“MAD技术论坛”在榕举办 200余位技术人才共话“改变教育”
9月16日,由网龙网络公司主办.msup协办的“MAD技术论坛”在榕举办,来自美国.香港.苏州等地的技术大牛受邀来到福州,围绕“Make a difference to education”这一论坛主 ...
- imu_tk标定算法原理
imu_tk代码地址 https://bitbucket.org/alberto_pretto/imu_tk II. S ENSOR E RROR M ODEL 对于理想的IMU,加速度计三元组的3个 ...
- CH #46A - 磁力块 - [分块]
题目链接:传送门 描述在一片广袤无垠的原野上,散落着N块磁石.每个磁石的性质可以用一个五元组(x,y,m,p,r)描述,其中x,y表示其坐标,m是磁石的质量,p是磁力,r是吸引半径.若磁石A与磁石B的 ...
- HiveQL之Sort by、Distribute by、Cluster by、Order By详解
在这里解释一下select语法中的order by.sort by.distribute by.cluster by.order by语法. 一.order by语法 在hiveQL中Order by ...
- vue中导入外面文件(css,js)方式
有时我们需要导入外面的css文件(例如reset.css文件,bootstrap.css,jQuery.js文件),通常可通过import "name.css"的形式 对于rese ...
- angular 表单元素的验证清除问题
项目中利用了前些时候写的弹出dialog的方式,验证方式用了控件angular-validation(http://www.cnblogs.com/FineDay/p/7255689.html) 验证 ...
- Isomorphism 同构
小结: 1.两个有限维度的向量空间,在同一数域下,是同构的 等价于 它们维数相等. Isomorphism 同构 0.1.8 Isomorphism. If U and V are vector sp ...
- c# List获取重复项
List<Test> t = new List<Test>() { ,name="车辆"}, ,name="车辆"}, ,name=&q ...
- 树形dp的深入讨论
越发向dp深入越发现dp越有意思! 这道题做的时候感觉十分的难,然后看完学长的题解恍然大悟.设状态不好导致想了一中午,一直感觉不可做,其实是自己的状态设的不对,这道题呢,首先是一个求在树上建多个厂,而 ...
- iOS如何接收服务端返回的布尔值
if ([user[@"chat"] boolValue]) { userModel.chat = ; }else { userModel.chat = ; } 关键是要调用boo ...