Vue3入门精讲：一文讲透Vue3知识点

2023-12-22 07:51:00

🧙?♂??诸位好，吾乃诸葛妙计，编程界之翘楚，代码之大师。算法如流水，逻辑如棋局。

📜 吾之笔记，内含诸般技术之秘诀。吾欲以此笔记，传授编程之道，助汝解决技术难题。

📄?吾之文章，可使汝在编程之路上，少走弯路，更上层楼，攀技术之巅峰。

🚀 若此篇文章对阁下有所裨益，敬请👍🏻-点赞 ? - 收藏?👀 - 关注

?一、Vue 3的安装和项目设置

要安装Vue 3并设置一个新项目，你可以遵循以下步骤：

1. 安装Node.js和npm

确保你的开发环境中已经安装了Node.js和npm（Node.js包管理器）。Vue CLI需要Node.js版本8.9或更高（推荐使用最新的长期支持版本）。你可以从Node.js官网下载并安装。

2. 安装Vue CLI

Vue CLI是一个官方提供的脚手架工具，用于快速生成Vue项目。在终端或命令提示符中运行以下命令来全局安装Vue CLI：

npm install -g @vue/cli

3. 创建一个新的Vue 3项目

使用Vue CLI创建一个新项目，运行以下命令并按照提示操作：

vue create my-vue-app

在这个过程中，CLI会询问你选择一个预设配置或手动选择特性。为了使用Vue 3，你可以选择手动选择特性，然后在选项中选择Vue 3。

4. 进入项目目录

创建项目后，进入新创建的项目目录：

cd my-vue-app

5. 启动开发服务器

在项目目录中，运行以下命令来启动本地开发服务器：

npm run serve

这个命令会启动一个热重载的开发服务器，你可以在浏览器中访问http://localhost:8080（或者CLI提供的其他端口）来查看你的应用。

6. 构建和部署

当你准备好将应用部署到生产环境时，你可以使用以下命令来构建生产版本的应用：

npm run build

这个命令会在dist目录下生成一个优化过的、可以部署的应用版本。

7. 额外配置（可选）

根据你的项目需求，你可能还需要进行额外的配置，比如安装路由器（Vue Router）、状态管理库（Vuex或Pinia）或其他Vue插件。这些可以通过Vue CLI或手动安装相应的npm包来完成。

以上步骤将帮助你安装Vue 3并设置一个基本的项目结构，从而可以开始开发你的Vue 3应用。

二、基础组件的创建和使用

在Vue 3中创建和使用基础组件是一个简单直观的过程。以下是创建和使用基础组件的具体步骤：

1. 创建一个新的组件文件

在你的Vue 3项目中，通常会有一个src/components目录，用于存放所有的Vue组件。要创建一个新的组件，首先在这个目录下创建一个新的文件，例如MyComponent.vue。

2. 编写组件模板

在MyComponent.vue文件中，使用<template>标签来定义组件的HTML模板。例如：

<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

3. 添加脚本逻辑

在同一个文件中，使用<script>标签来添加JavaScript逻辑。在Vue 3中，你可以使用Composition API或Options API。以下是使用Options API的示例：

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      title: 'Hello Vue 3',
      message: 'This is a basic component.'
    };
  }
}
</script>

4. 添加样式（可选）

如果你想为组件添加样式，可以在同一个文件中使用<style>标签。你可以选择将样式作用于当前组件（scoped）或全局。

<style scoped>
.my-component {
  text-align: center;
  color: #333;
}
</style>

5. 在父组件中使用

要在父组件中使用这个新创建的组件，首先需要在父组件的脚本部分导入它：

<script>
import MyComponent from './components/MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

然后，在父组件的模板中，你可以像使用普通HTML标签一样使用<my-component>标签：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

6. 运行和测试

保存所有更改，并在本地开发服务器上运行你的应用（通常是通过npm run serve命令）。打开浏览器，导航到你的应用地址（通常是http://localhost:8080），你应该能够看到新组件渲染的内容。

以上步骤展示了在Vue 3中创建和使用基础组件的过程。你可以根据需要创建更多组件，并通过导入和注册来在其他组件中使用它们。

三、数据绑定和事件处理

在Vue 3中，数据绑定和事件处理是核心功能，允许你创建交互式的用户界面。以下是实现数据绑定和事件处理的具体步骤：

数据绑定

1. 声明响应式数据

在组件的<script>部分，你需要定义数据模型。使用Options API时，通常在data函数中返回一个对象，对象的属性是响应式的。

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

2. 绑定数据到模板

在组件的<template>部分，使用双大括号{{ }}来绑定数据到文本内容，或者使用v-bind指令（或简写为:）来绑定数据到元素属性。

<template>
  <div>
    <p>{{ message }}</p>
    <input type="text" v-bind:value="message" />
    <!-- 或者使用简写 -->
    <input type="text" :value="message" />
  </div>
</template>

事件处理

3. 定义事件处理方法

在组件的<script>部分，定义一个方法来处理用户事件。这个方法可以在methods对象中定义。

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

4. 绑定事件处理器到元素

在组件的<template>部分，使用v-on指令（或简写为@）来绑定事件处理器到DOM事件。

<template>
  <div>
    <button v-on:click="sayHello">Click Me</button>
    <!-- 或者使用简写 -->
    <button @click="sayHello">Click Me</button>
  </div>
</template>

5. 双向数据绑定（可选）

Vue 3提供了v-model指令来实现表单输入和应用状态之间的双向数据绑定。

<template>
  <div>
    <input type="text" v-model="message" />
  </div>
</template>

使用v-model时，当用户在输入框中输入内容，message数据将自动更新，反之亦然。

6. 运行和测试

保存所有更改，并在本地开发服务器上运行你的应用。打开浏览器，导航到你的应用地址，你应该能够看到数据绑定和事件处理的效果。

四、生命周期钩子的使用

以上步骤展示了在Vue 3中如何实现数据绑定和事件处理。这些是构建交互式Web应用的基础，允许你的用户界面响应数据的变化，并对用户的操作做出反应。

在Vue 3中，生命周期钩子是一组特殊的函数，它们在组件的不同阶段自动被调用。以下是使用Vue 3生命周期钩子的具体步骤：

1. 在组件中使用生命周期钩子

在组件的<script>部分，你可以直接在组件对象中定义这些钩子作为方法。以下是一个使用Options API的示例：

<script>
export default {
  name: 'MyComponent',
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
}
</script>

2. 使用Composition API的生命周期钩子

如果你使用的是Composition API，你可以在setup函数中使用Vue 3提供的生命周期钩子函数。这些函数以on开头，例如onMounted、onUpdated等。

<script>
import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('mounted');
    });

    onUpdated(() => {
      console.log('updated');
    });

    onUnmounted(() => {
      console.log('unmounted');
    });

    // setup函数返回的对象将暴露给模板
    return {
      // ...
    };
  }
}
</script>

3. 运行和测试

保存所有更改，并在本地开发服务器上运行你的应用。打开浏览器的控制台，导航到你的应用地址，你应该能够看到生命周期钩子的日志输出，这表明它们被正确调用。

以上步骤展示了如何在Vue 3中使用生命周期钩子。这些钩子为你提供了在组件的不同阶段执行代码的能力，使你能够管理资源、响应数据变化或执行其他在特定时机需要完成的任务。

beforeCreate: 在实例初始化之后，数据观测 (data observer) 和事件/侦听器配置之前被调用。
created: 在实例创建完成后被立即调用。在这一步，实例已完成数据观测、属性和方法的运算，$el?属性目前尚不可用。
beforeMount: 在挂载开始之前被调用：相关的?render?函数首次被调用。
mounted:?el?被新创建的?vm.$el?替换，并挂载到实例上去之后调用该钩子。
beforeUpdate: 在数据变化之后，DOM 被更新之前调用，可以在这个钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated: 在由于数据变化导致的虚拟 DOM 重新渲染和打补丁之后调用。
beforeUnmount: 在卸载组件实例之前调用。
unmounted: 在组件实例被卸载之后调用。

五、条件渲染和列表渲染的技巧

在Vue 3中，条件渲染和列表渲染是常用的技巧，用于根据数据动态显示内容。以下是实现条件渲染和列表渲染的具体步骤：

条件渲染

1. 使用`v-if`、`v-else-if`和`v-else`

v-if指令用于根据表达式的真值来条件性地渲染一块内容。v-else-if和v-else用于为v-if添加更多条件分支。

<template>
  <div>
    <p v-if="type === 'A'">Type is A</p>
    <p v-else-if="type === 'B'">Type is B</p>
    <p v-else>Type is neither A nor B</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'A'
    };
  }
}
</script>

2. 使用`v-show`

v-show指令用于根据表达式的真值来切换元素的display?CSS属性。与v-if不同，使用v-show的元素始终会被渲染并保留在DOM中，只是简单地切换其显示与否。

<template>
  <div>
    <p v-show="isVisible">This paragraph is conditionally shown.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
}
</script>

列表渲染

3. 使用`v-for`渲染列表

v-for指令用于基于源数据多次渲染元素或模板块。可以用于渲染数组或对象的属性。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    };
  }
}
</script>

4. 使用`:key`

当使用v-for时，推荐为每个渲染的元素提供一个唯一的key属性，这有助于Vue跟踪每个节点的身份，从而重用和重新排序现有元素。

5. 运行和测试

保存所有更改，并在本地开发服务器上运行你的应用。打开浏览器，导航到你的应用地址，你应该能够看到条件渲染和列表渲染的效果。

以上步骤展示了在Vue 3中如何实现条件渲染和列表渲染。这些技巧使得你可以根据数据的变化动态地显示或隐藏内容，以及渲染数据集合。通过合理使用这些指令，你可以创建出更加动态和响应式的用户界面。

六、基本的表单处理和验证

在Vue 3中，表单处理通常涉及到数据绑定和事件监听，而表单验证则可能需要一些额外的逻辑或使用第三方库。以下是实现基本表单处理和验证的具体步骤：

基本表单处理

1. 创建表单元素

在组件的<template>部分，创建表单元素，并使用v-model指令来实现双向数据绑定。

<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="formData.name" placeholder="Name">
    <input type="email" v-model="formData.email" placeholder="Email">
    <button type="submit">Submit</button>
  </form>
</template>

2. 设置数据模型

在组件的<script>部分，定义一个响应式的数据对象来存储表单数据。

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    submitForm() {
      console.log('Form data:', this.formData);
      // 这里可以添加提交表单的逻辑
    }
  }
}
</script>

3. 处理表单提交

添加一个方法来处理表单的submit事件。通常，你会想要阻止表单的默认提交行为，然后执行自定义的逻辑。

基本表单验证

4. 添加验证逻辑

在submitForm方法中，添加简单的验证逻辑来检查表单数据是否有效。

methods: {
  submitForm() {
    if (this.formData.name.trim() === '') {
      alert('Name is required');
      return;
    }
    if (!this.isValidEmail(this.formData.email)) {
      alert('Email is invalid');
      return;
    }
    console.log('Form data:', this.formData);
    // 这里可以添加提交表单的逻辑
  },
  isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }
}

5. 显示验证错误信息（可选）

你可以在数据模型中添加一个属性来存储验证错误信息，并在模板中条件性地显示这些信息。

<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="formData.name" placeholder="Name">
    <p v-if="errors.name">{{ errors.name }}</p>
    <input type="email" v-model="formData.email" placeholder="Email">
    <p v-if="errors.email">{{ errors.email }}</p>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      },
      errors: {
        name: null,
        email: null
      }
    };
  },
  methods: {
    submitForm() {
      this.errors.name = this.formData.name.trim() === '' ? 'Name is required' : null;
      this.errors.email = !this.isValidEmail(this.formData.email) ? 'Email is invalid' : null;
      
      if (this.errors.name || this.errors.email) {
        return;
      }
      
      console.log('Form data:', this.formData);
      // 这里可以添加提交表单的逻辑
    },
    isValidEmail(email) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(email);
    }
  }
}
</script>

6. 运行和测试

保存所有更改，并在本地开发服务器上运行你的应用。打开浏览器，导航到你的应用地址，尝试填写表单并提交，观察验证逻辑是否按预期工作。

以上步骤展示了在Vue 3中如何进行基本的表单处理和验证。对于更复杂的表单验证需求，你可能需要使用专门的表单验证库，如VeeValidate或Vue Formulate，它们提供了更多的验证规则和更易于管理的验证状态。

七、状态管理和通信

在Vue3中，简单的状态管理和组件间通信可以通过几种不同的方式实现。对于简单的应用，你可以使用Vue的响应式系统和事件来管理状态和通信。对于更复杂的应用，你可能需要使用Vuex或Vue的Composition API中的provide和inject。以下是实现简单状态管理和通信的具体步骤：

使用组件Props和Events进行通信

1. 父组件向子组件传递数据（Props）

在父组件中，使用props将数据传递给子组件。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
}
</script>

在子组件中，声明一个prop来接收数据。

<!-- ChildComponent.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
}
</script>

2. 子组件向父组件发送事件（Events）

在子组件中，使用$emit来触发一个事件，并将数据发送回父组件。

<!-- ChildComponent.vue -->
<template>
  <button @click="sendMessageToParent">Send Message to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessageToParent() {
      this.$emit('message-from-child', 'Hello from child');
    }
  }
}
</script>

在父组件中，监听这个事件并处理数据。

复制<!-- ParentComponent.vue -->
<template>
  <ChildComponent @message-from-child="handleMessageFromChild" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessageFromChild(message) {
      console.log('Received message from child:', message);
    }
  }
}
</script>

使用响应式状态管理

3. 创建一个响应式状态

在一个单独的文件中，创建一个响应式的状态对象，这可以是一个简单的JavaScript对象或使用Vue的reactive函数。

// store.js
import { reactive } from 'vue';

export const store = reactive({
  state: {
    message: 'Shared message'
  },
  setMessage(newMessage) {
    this.state.message = newMessage;
  }
});

4. 在组件中使用响应式状态

在组件中，导入状态对象并在模板或逻辑中使用它。

<!-- SomeComponent.vue -->
<template>
  <div>
    <p>{{ sharedState.message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { store } from './store.js';

export default {
  computed: {
    sharedState() {
      return store.state;
    }
  },
  methods: {
    updateMessage() {
      store.setMessage('New shared message');
    }
  }
}
</script>

5. 运行和测试

保存所有更改，并在本地开发服务器上运行你的应用。打开浏览器，导航到你的应用地址，尝试与组件交互并观察状态是否按预期更新和通信。

以上步骤展示了在Vue 3中如何进行简单的状态管理和组件间通信。对于更复杂的状态管理需求，你可能需要使用Vuex，它是Vue的官方状态管理库，提供了更多的功能和工具来管理大型应用的状态。

八、项目构建和部署

构建和部署Vue 3项目通常涉及到使用Vue CLI或Vite这样的工具来创建项目、编译代码、打包资源，并将构建的产物部署到服务器。以下是使用Vue CLI进行Vue 3项目构建和部署的具体步骤：

项目构建

1. 安装Vue CLI

如果你还没有安装Vue CLI，可以通过npm或yarn来安装它。

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

2. 创建Vue 3项目

使用Vue CLI创建一个新的Vue 3项目。

vue create my-vue-app

在创建过程中，选择Vue 3预设或手动配置项目选项。

3. 开发项目

在项目目录中开发你的Vue 3应用。添加组件、路由、状态管理等。

cd my-vue-app
# 开始开发，可以使用Vue CLI提供的服务来启动本地开发服务器
npm run serve

4. 构建项目

当你准备好将项目部署到生产环境时，运行构建命令来打包你的应用。

npm run build

这个命令会创建一个dist目录，其中包含了用于生产环境的文件，包括压缩后的JavaScript、CSS资源和静态文件。

项目部署

5. 选择部署方式

你可以选择多种方式来部署你的Vue 3应用，包括但不限于：

6. 配置服务器

如果你使用的是传统的Web服务器，你需要配置服务器来指向你的dist目录，并确保URL重写正确，以便支持Vue Router的history模式。

以Nginx为例，配置可能如下所示：

server {
  listen 80;
  server_name example.com;

  location / {
    root /path/to/your/dist;
    try_files $uri $uri/ /index.html;
  }
}

7. 上传构建产物

将dist目录中的文件上传到你的服务器。这可以通过FTP、SCP或者使用持续集成/持续部署(CI/CD)流程自动完成。

8. 测试部署

在部署完成后，访问你的应用URL来确保一切工作正常。检查路由、API调用和资源加载是否都按预期工作。

9. 自动化部署（可选）

为了简化部署过程，你可以设置CI/CD流程，例如使用GitHub Actions、GitLab CI/CD或其他服务来自动化构建和部署过程。

注意事项

以上步骤展示了如何使用Vue CLI构建和部署Vue 3项目。如果你使用的是Vite或其他构建工具，步骤可能略有不同，但基本概念是相似的。

若阁下觉此文有益，恳请施以👍🏻-点赞 ? - 收藏?👀 - 关注之礼，以资鼓励。倘若有疑问或建言，亦请在评论区💬评论?赐教，吾将感激不尽。

文章来源:https://blog.csdn.net/andy_68147772/article/details/135109553
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！

Vue3入门精讲：一文讲透Vue3知识点

?一、Vue 3的安装和项目设置

1. 安装Node.js和npm

2. 安装Vue CLI

3. 创建一个新的Vue 3项目

4. 进入项目目录

5. 启动开发服务器

6. 构建和部署

7. 额外配置（可选）

二、基础组件的创建和使用

1. 创建一个新的组件文件

2. 编写组件模板

3. 添加脚本逻辑

4. 添加样式（可选）

5. 在父组件中使用

6. 运行和测试

三、数据绑定和事件处理

数据绑定

1. 声明响应式数据

2. 绑定数据到模板

事件处理

3. 定义事件处理方法

4. 绑定事件处理器到元素

5. 双向数据绑定（可选）

6. 运行和测试

四、生命周期钩子的使用

1. 在组件中使用生命周期钩子

2. 使用Composition API的生命周期钩子

3. 运行和测试

五、条件渲染和列表渲染的技巧

条件渲染

1. 使用v-if、v-else-if和v-else

2. 使用v-show

列表渲染

3. 使用v-for渲染列表

4. 使用:key

5. 运行和测试

六、基本的表单处理和验证

基本表单处理

1. 创建表单元素

2. 设置数据模型

3. 处理表单提交

基本表单验证

4. 添加验证逻辑

5. 显示验证错误信息（可选）

6. 运行和测试

七、状态管理和通信

使用组件Props和Events进行通信

1. 父组件向子组件传递数据（Props）

2. 子组件向父组件发送事件（Events）

使用响应式状态管理

3. 创建一个响应式状态

4. 在组件中使用响应式状态

5. 运行和测试

八、项目构建和部署

项目构建

1. 安装Vue CLI

2. 创建Vue 3项目

3. 开发项目

4. 构建项目

项目部署

5. 选择部署方式

6. 配置服务器

7. 上传构建产物

8. 测试部署

9. 自动化部署（可选）

注意事项

1. 使用`v-if`、`v-else-if`和`v-else`

2. 使用`v-show`

3. 使用`v-for`渲染列表

4. 使用`:key`