有关vue ， react的使用总结

一、vue2
1.进入项目保存目录，执行vue init webpack xxx项目名
2.根据项目创建提示填写信息
3.cd 进入创建的项目目录 执行 npm install
4.使用Hbuilder打开项目，修改build目录下webpack.base.conf.js配置

5.命令行工具执行下载命令：
npm install vux --save
npm install vux-loader --save
npm install vue-style-loader --save
npm install css-loader --save
npm install less --save
npm install less-loader --save
全部下载完成，执行npm run dev

二、vue3
1.执行npm install -g @vue/cli 下载新版本vue-cli
2. 进入保存项目的文件目录，执行vue create 项目名 选择相关配置创建项目
3. .进入项目目录，执行npm install 加载项目运行环境，执行npm run serve 启动项目
4. 进入项目目录 执行 npm install vant --save

三、react
1.下载 打开命令行工具执行以下代码
npm install -g create-react-app 下载react
create-react-app 项目名 创建react项目
npm install react-router-dom --save 下载相关小工具
npm uninstall create-react-app 卸载react

2.创建页面跳转的相关导航条
进入项目目录执行 npm install react-router-dom --save 下载相关小工具
// 引入 react中的路由
import {Route, HashRouter, Link, Switch} from “react-router-dom”
在app.js中的div里进行配置
{/* HashRouter 组件是路由师徒，相当于vue中的router-view */}

<HashRouter>
<h1>这是根组件，在这里自定义tabbar</h1>
    <ul>
        <li>
            {/* Link 组件是路由链接 相当于vue中的router-link */}
            <Link to="/">首页</Link>
        </li>
        <li>
            <Link to="/my">我的</Link>
        </li>
    </ul>
{/* Switch 组件中嵌套的多个Route只能匹配到一个 */}
{/* 在Switch中可以定义具体的路由规则 */}
{/* Route 定义路由规则 react中的路由默认采用开头匹配的规则 path="/xxx",只要已/xxx
开头的地址都能匹配到如果要拍完整匹配九要使用严格模式 添加exact属性，完整匹配路由*/}
<Switch>
    <Route exact path="/" component={Home}></Route>
    <Route exact path="/my" component={my}></Route>
</Switch>
</HashRouter> 

3.// 单标签必须加/表示标签结束
componentWillUnmount 生命周期函数组件被销毁时执行，
componentDidMount()生命周期函数在组件渲染完成时候执行 用来发送请求
// class类声明组件，必须实现render函数，返回组件模板

4.发送请求 首先进入目录打开命令行工具执行 npm install axios --save 下载axios
componentDidMount()生命周期函数在组件开始渲染的时候执行，所以在它里面发请求
componentDidMount(){
console.log(this)
// vue中请求执行的then中。this指向请求对象
// react中，请求执行后的then中，this依然指向组件对象
axios.get(“http://www.moblie.site:88/banner/”)
.then(res=>{
console.log(res)
// 把数据写入state中
this.setState({
banner:res.data.data
})
})
}
5.创建一个组件 this.state = {中存放数据}
// 导出组件对象 export default 组件名
// state 组件对象state属性，表示组件的状态(数据),在构造函数中进行初始化,值是一个对象
constructor() 组件的构造函数，当组件被创建时自动调用，相当于vue中的created

// 组件的构造函数，当组件被创建时自动调用，相当于vue中的created
constructor(params){
super(params)

this.state = {
books:[
{name:"JavaScript从零开始", price:29.9},
{name:"HTML从零开始", price:25},
{name:"Python从零开始", price:28}
],
txt:"这是输入框中的内容",
show:true
}

this.state.banner.map((b,i)=>{ return 返回标签}//map 循环遍历列表中的数据
首先在js中引入 import React,{Component} from ‘react’
class 组件名 extends Component{
constructor(params){
super(params)

this.state = {
banner:[]
}
}
{/* className 代替class 因为es6中class表示声明一个类 */}
// / class类声明组件，必须实现render函数，函数中返回组件的模板

 render(){ 
		return (
<div>
{/* className 代替class 因为es6中class表示声明一个类 */}
<h1 className="MyCom-title">这是MyCom组件</h1>
{/* 可以使用当前state中的参数 */}
<p>数字：{this.state.num} 文本：{this.state.txt}</p>
<p>传递的参数：{this.props.name}</p>
<p>传递的参数：{this.props.age}</p>
{/* {this.btnClick} */}
<button onClick={this.btnClick}>点我</button>
</div>
)

}

6.// 类声明法

// 类声明法 使用ES6中的类声明方法，推荐使用这种方式，功能比较完善
// 使用类声明组件，必须继承自React.Component
class MyComTwo extends React.Component{


// constructor 初始化函数
constructor(params){
// 必须要先执行父类中的构造函数，并将参数传入
super(params)
// arguments 参数列表 第一个参数就是组件的传值
this.props = arguments[0]
console.log(this.props)
}
// 在组件类的声明中，必须实现render，返回组件模板
render(){
// 模板代码推荐使用()括号包裹
return (
<div>
<p>这是我的第二个组件</p>
<p>{this.props.k}</p>
</div>
)
}
}

7.{/* 绑定事件的传参数 需要在执行函数中手动调用指定函数，并传参数*/}
<button onClick={e=>this.buyClick(e,b)}>购买

buyClick(e,b){
console.log(b)
// 如果是点击进行传值，在事件函数中，this指向当前组件对象，因为函数是被this调用的
console.log(this)
}

{/* react 中没有直接的数据双向绑定，必须通过手动添加事件监听实现双向绑定 */}
<input type=“text” value={this.state.txt} onChange={e=>this.txtChange(e)}/>

{this.state.txt}

txt的值随着输入值的变化而变化，实现双向绑定

txtChange(e){
    this.setState({
        txt:e.target.value
    })
}

{/* 多选框选中状态，绑定一个布尔值 checked属性 */}

<input type="checkbox" checked={this.state.show} onChange={e=>{
// 在模板中绑定事件函数内，this指向组件对象
this.setState({show:e.target.checked})
}}/>
{/* react中不能直接渲染布尔类型数据 */}
<p>{this.state.show?"true":"false"}</p>
{/* 条件渲染使用三目运算符 */}
{this.state.show?(<h1>正在营业</h1>):(<h1>暂停营业</h1>)}

8.// 改变组件中函数调用时this的指向，在组件的初始化函数中，
将函数执行时的this指向当前的组件对象 this.btnClick = this.btnClick.bind(this)
// this 在react中，组件中的事件函数this默认指向undefined，如果想让this指向组件本身，可以手动绑定
// 直接通过this.state 修改值，值可以改变，但是无法同步到页面
// this.state.num = 200
// this.setState 使用这种方式修改state中的值，可以同步到页面上

this.setState({
num:this.state.num + 1
})