React和Vue.js

前端框架和库详细教程及代码示例：React 和 Vue.js

我将按照顺序来一步步讲解，继续深化拓展你的前端开发技能！

**React **和 **Vue.js **是两个非常流行的 **JavaScript **库和框架，分别用于构建用户界面，本文章将由我带你从基础到进阶，详细介绍这两个工具的使用方法和核心概念，并提供与众不同的示例代码，希望对你有所帮助！

React 教程

React 是由 Facebook 开发的一个用于构建用户界面的 JavaScript 库
它基于组件的思想，允许开发者构建可重用的 UI 组件

1. React 基础

创建 React 应用

首先，使用 create-react-app 快速创建一个 React 应用

npx create-react-app my-react-app
cd my-react-app
npm start

React 组件

React 组件可以是函数组件或类组件，以下是一个简单的函数组件示例

// App.js
import React from 'react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to React</h1>
      </header>
    </div>
  );
}

export default App;

2. 状态和生命周期

使用状态（State）

状态是组件中用于保存数据的对象，函数组件使用 useState 钩子

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

类组件与生命周期方法

类组件使用 this.state 和生命周期方法管理状态

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

3. 事件处理与条件渲染

事件处理

React 中的事件处理函数以 on 开头，例如 onClick

function Button() {
  function handleClick() {
    alert('Button clicked');
  }

  return <button onClick={handleClick}>Click me</button>;
}

export default Button;

条件渲染

可以使用 JavaScript 表达式在 JSX 中进行条件渲染

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up</h1>}
    </div>
  );
}

export default Greeting;

Vue.js 教程

Vue.js 是一个渐进式 JavaScript 框架，旨在通过简单易用的 API 构建用户界面

1. Vue.js 基础

创建 Vue 应用

使用 Vue CLI 创建一个 Vue 应用

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

Vue 组件

Vue 组件是构建应用的基本单位，以下是一个简单的 Vue 组件示例

<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>Welcome to Vue.js</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  text-align: center;
}
</style>

2. 数据绑定与事件处理

数据绑定

使用 data 选项定义组件的数据

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js!',
    };
  },
};
</script>

事件处理

使用 v-on 指令处理事件

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked');
    },
  },
};
</script>

3. 计算属性与条件渲染

计算属性

计算属性用于基于数据的变化自动更新视图

<template>
  <div>
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js!',
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    },
  },
};
</script>

条件渲染

使用 v-if 和 v-else 指令进行条件渲染

<template>
  <div>
    <p v-if="isLoggedIn">Welcome back!</p>
    <p v-else>Please sign up</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
    };
  },
};
</script>

总结

React 和 Vue.js 都是非常强大的工具，各有优势，通过本文章，希望你能对这两种工具有一个初步的了解，并能够开始构建自己的用户界面，探索它们的更多特性和高级功能，将进一步提升你的前端开发技能