Vue 3 之 基础入门（一）

1. Vue 3入门教程：搭建第一个Vue 3项目

1.1 步骤1：安装Node.js和npm

在开始使用Vue 3之前，你需要确保你的开发环境中已安装Node.js和npm（Node的包管理器）。Node.js是一个运行在服务器端的JavaScript运行环境，而npm是一个强大的包管理工具，可以帮助我们安装和管理项目依赖。

1. 访问 Node.js官网 下载适合你操作系统的Node.js安装包。
2. 安装Node.js，这将自动安装npm。
3. 打开命令行工具，输入以下命令检查安装是否成功：

   node -v
   npm -v
   

   确保命令行输出了Node.js和npm的版本号，这表明你已经成功安装。

1.2 步骤2：使用Vue CLI创建Vue 3项目

Vue CLI是一个官方提供的脚手架工具，可以帮助你快速启动一个新的Vue项目。它提供了多种配置选项，支持各种现代Web开发工具和技术。

1. 安装Vue CLI：

   npm install -g @vue/cli
   

   使用 -g 参数将Vue CLI安装为全局可用，这样你就可以在任何地方通过命令行启动它。

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

   vue create my-first-vue3-project
   

   执行这个命令后，Vue CLI会询问你一系列问题，例如选择预设配置或手动选择特性。为了简单起见，你可以选择“默认（Vue 3）”预设。

3. 进入项目目录并启动开发服务器：

   cd my-first-vue3-project
   npm run serve
   

   这个命令会启动一个热重载的本地开发服务器。打开浏览器访问 http://localhost:8080，你应该能看到Vue 3项目的欢迎界面。

2. Vue 3基础：模板语法和数据绑定

在Vue 3中，模板语法和数据绑定是创建交互式Web界面的基础。这一部分将详细介绍如何在Vue 3项目中使用模板语法进行有效的数据绑定。

2.1 模板语法

Vue.js 使用基于 HTML 的模板语法，允许你声明式地将渲染的 DOM 绑定至底层组件的实例数据。Vue 3的模板语法非常直观，支持数据绑定、JavaScript 表达式以及一系列指令来实现复杂的功能。

1. 插值:

   • 文本插值：使用双大括号 {{ }} 可以将数据绑定到文本节点。

     <div>{{ message }}</div>
     

   • 原始 HTML：使用 v-html 指令绑定原始HTML。

     <div v-html="rawHtml"></div>
     

2. 属性绑定:

   • 使用 v-bind 或简写为 :，将数据绑定到 DOM 属性。

     <div :id="dynamicId"></div>
     

2.2 数据绑定

数据绑定是Vue 3的核心功能之一，允许开发者将数据从JavaScript逻辑层绑定到视图层，从而实现数据的实时响应和更新。

1. 单向数据绑定:

   • 从数据源（通常是组件的data选项）到视图，可以使用 v-bind 实现。
   • 适用于大多数属性和文本内容的更新。

2. 双向数据绑定:

   • 使用 v-model 实现在表单输入和应用状态之间的双向数据绑定。

     <input v-model="message">
     

   • 这对于处理表单输入非常有用，因为它简化了用户输入与数据状态之间的同步过程。

2.3 计算属性和侦听器

Vue 3提供了计算属性和侦听器，这两种功能非常适合处理复杂逻辑。

1. 计算属性 (computed):

   • 依赖于其它数据属性，并且只在依赖的数据发生改变时重新计算。
   • 用于复杂的逻辑运算，可以提高性能。

     computed: {
       fullName() {
         return `${this.firstName} ${this.lastName}`;
       }
     }
     

2. 侦听器 (watch):

   • 观察和响应Vue实例上数据的变动。
   • 当需要在数据变化时执行异步或开销较大的操作时，使用侦听器。

     watch: {
       firstName(newVal, oldVal) {
         console.log(`Name changed from ${oldVal} to ${newVal}`);
       }
     }
     

2.4 事件处理

在Vue 3中，处理用户输入和实现交互式功能的机制是通过事件监听器实现的。

1. 监听事件:

   • 使用 v-on 指令或简写为 @ 来监听DOM事件。
   • 可以调用方法或执行一段JavaScript表达式。

     <button @click="increment">Add 1</button>
     

2. 事件修饰符:

   • Vue提供了事件修饰符来处理常见的DOM事件行为，如 .prevent 阻止默认行为，.stop 停止事件冒泡。

     <form @submit.prevent="onSubmit">...</form>
     

通过以上的基础知识，你可以有效地开始使用Vue 3来构建动态和响应式的Web应用。每个部分都可以进一步扩展和深化，随着你对Vue 3的理解加深，你将能够更加灵

活和高效地使用这些功能。

3. 组件基础

在Vue 3中，组件是构建大型应用的基石。组件化开发允许你将界面拆分成独立的、可复用的部分，每个部分负责应用的一小块功能。

3.1 创建和使用组件

1. 定义组件:

   • 组件在Vue中通常以单文件组件（.vue）的形式存在，这包含了模板、脚本和样式。
   • 组件的脚本部分用于定义数据、方法和其他逻辑。

     <!-- MyComponent.vue -->
     <template>
       <div>{{ message }}</div>
     </template>
     
     <script>
     export default {
       data() {
         return {
           message: 'Hello, Vue 3!'
         };
       }
     }
     </script>
     

2. 注册组件:

   • 组件可以在其他组件内部局部注册或者在全局注册。
   • 局部注册通常在另一个组件的components选项中进行。

     <script>
     import MyComponent from './MyComponent.vue';
     
     export default {
       components: {
         MyComponent
       }
     }
     </script>
     

3.2 组件通信：props 和 events

组件间的通信是Vue应用中的关键部分。props和events是两种基本的组件间通信方式。

1. Props:

   • 用于父组件向子组件传递数据。
   • 子组件通过props选项声明它期望接收的数据。

     <!-- ChildComponent.vue -->
     <script>
     export default {
       props: ['message']
     }
     </script>
     

2. Events:

   • 子组件可以发射事件来通知父组件发生了某些事情。
   • 父组件监听这些事件并作出相应。

     <!-- ChildComponent.vue -->
     <template>
       <button @click="$emit('custom-event', 'data')">Click Me</button>
     </template>
     

3.3 插槽（Slots）

插槽是Vue中一种强大的内容分发机制，允许你将内容组合在不同的视图中，同时保持每个组件的独立性和复用性。

1. 默认插槽:

   • 父组件可以向子组件的插槽内传递内容，如果子组件内定义了插槽。

     <!-- ChildComponent.vue -->
     <template>
       <div>
         <slot></slot> <!-- 默认插槽 -->
       </div>
     </template>
     

2. 具名插槽:

   • 允许定义多个插槽，每个插槽可以通过名字区分。
   • 父组件可以针对不同的插槽传递不同的内容。

     <!-- ChildComponent.vue -->
     <template>
       <div>
         <slot name="header"></slot>
         <slot name="footer"></slot>
       </div>
     </template>