vue mvvm模式 vm:viewModel
M(数据)->VM->V(视图)
vue vue-cli vue脚手架 vue create 项目名
react mvc模式 c:controller
index.js文件是react的主入口文件相当于vue中的main.js
M(数据)->C->V(视图)
react create-react-app react脚手架 create-react-app 项目名
(npm i -g create-react-app先安装这个脚手架)
react暴漏配置文件 npm run eject/yarn eject 前提是git已经提交过;不可逆的命令
React用的是jsx写法
react组件名 首字母必须大写
react中 组件都是函数
jsx中的 {} 类似于 vue中的小胡子 {{}} {表达式}
{} 大括号 中不能编写对象,数组中包含对象也不行
1、react中 类名 必须写成className=‘xxx’ 不能写class=‘xxx’
2、绑定一个变量给className要用 {} (vue中用v-bind:)
3、一个行内样式中 className 只能写一个 写多个 后面的会把前面的覆盖掉(vue中可以合并) 若是想合并需要这样写 className={‘aa’ + ‘bb’} 是变量去掉引号即可
for必须写成htmlFor(行内属性)
<input type="checkbox" id="ipt"/>
<label htmlFor="ipt">666</label>
{/* 点击 label 会触发上面的 input 框 */}
react 行内样式必须写成一个对象
style={{ color: ‘red’, fontSize: ‘30px’ }} 外面是大括号 里面包了一个对象
react中的循环(编写 循环结构:只要把每一个结构都放到数组中,然后把数组放到对应的位置即可)
循环遍历数组
{
ary.map(item => {
return <li key={item}>{item}</li>
})
}
循环遍历对象
let obj = { name: "清欢", age: "21" }
{
Object.keys(obj).map(a => {
return <li key={a}>{a}:{obj[a]}</li>
})
}
react判断语序 if-else (建议用switch)
{
1 > 2 ?
<h2>111</h2> :
2 > 3 ?
<h3>222</h3> :
<h4>333</h4>
}
ReactDOM.render(<App />,document.getElementById('root'));
//==这两个类似 ReactDOM.render和下面的Vue==
//new Vue({}).$mount('#app')
import React from 'react';
import ReactDOM from 'react-dom';
function A(){
return <h1>333</h1>
}
function A2(){
return React.createElement('h1',{},'333')
}
var B = <div id=qqq>666<h1>888</h1></div>
var B2 = React.createElement('div',{id:'qqq'},'666',React.createElement('div',{},'888'))
//‘div’是标签名 {}是行内属性行内属性没有则为空 后面全是儿子
// b 和 b2 这两种写法 效果一样 只是 Babel 把 B 默认帮我们转成了 B2 的这种形式
ReactDOM.render(<A2/>,document.getElementById('root')
函数当作组件或者标签来使用(用标签) 所以要用 <A2/> 这种格式
ReactDOM.render(B2,document.getElementById('root')