项目实训#1 学习Vue框架下的前端开发

以前还没有接触过vue框架下的前端开发，目前vue框架主流使用既有vue2 组件式API 和vue3 响应式API  这篇周报简单记录一下学习的vue2 组件式api的学习记录 

什么是组件式 API？

组件是 Vue 应用程序的基本构建块。每个组件都封装了自己的模板、脚本和样式，具有独立的功能和状态。Vue 2 的组件式 API 提供了一种灵活、模块化的方式来构建和组织应用程序，使得代码易于维护和扩展。

组件结构

一个典型的 Vue 2 组件由三部分组成：模板（template）、脚本（script）和样式（style）

(其实仍然是前端三件套：html + css + js）

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">增加计数</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    message() {
      return `当前计数：${this.count}`;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style scoped>
/* 添加组件特定的样式 */
</style>

template 下的是html前端网页，script下的是使用的js脚本，style下的是css样式表

在这个示例中，我们导入并注册了 Counter 组件，然后在模板中使用了它。这样就可以在应用程序中显示计数器组件了。

export default通常用于导出当前组件对象，使其可以在其他文件中被导入和使用

• data(): 这个函数返回组件的初始数据对象。在这个示例中，我们定义了一个名为 count 的变量，并将其初始值设为 0。这个变量在组件的整个生命周期内都可以访问，并且当它的值发生改变时，相关的视图会自动更新。

• computed: 这个属性是一个对象，包含了计算属性的定义。计算属性是根据其他数据动态计算出来的值，它们的值会根据依赖的数据变化而自动更新。在这个示例中，我们定义了一个名为 message 的计算属性，用于返回一个包含当前计数值的字符串。当 count 的值发生变化时，message 的值也会相应地更新。

• methods: 这个属性也是一个对象，包含了组件中的方法。在这个示例中，我们只定义了一个方法 increment()，用于增加计数器的值。当按钮被点击时，increment() 方法会被调用，从而更新 count 的值

生命周期钩子函数:

这些函数能在组件的不同生命周期阶段执行特定的代码。通过在 export default 对象中添加相应的函数来实现特定的行为，例如 created、mounted、updated 和 destroyed。

通过 export default 导出一个包含这些属性和方法的对象，我们将这个对象暴露给其他组件或应用程序使用。其他组件可以导入并注册这个组件，然后在其模板中使用它。这种模块化的组件化开发方式使得 Vue 应用程序的代码更易于组织、维护和扩展。

这次学习vue3下的响应式API

（不知道为什么，个人感觉组件式api看着反倒更为顺眼一点）

在实例的代码中展开学习

响应式 API

Vue 3 的响应式 API 提供了一种方便的方式来创建响应式数据，并在数据变化时自动更新相关的视图。它是 Vue 应用程序的核心特性之一，使得构建动态、交互式的用户界面变得更加容易和高效。

响应式数据

在 Vue 3 中，通过 ref 和 reactive 函数可以创建响应式数据。ref 用于创建单个值的响应式引用，而 reactive 则用于创建包含多个属性的响应式对象。、

ref

import { ref } from 'vue';

const count = ref(0);

在这个示例中，我们使用 ref 函数创建了一个名为 count 的响应式引用，初始值为 0。

reactive

import { reactive } from 'vue';

const user = reactive({
  name: 'John',
  age: 30
});

在这个示例中，我们使用 reactive 函数创建了一个包含多个属性的响应式对象 user。

使用 setup

Vue 3 中引入了 setup 函数，用于替代 Vue 2 中的 data、computed 和 methods 等选项。setup 函数接收两个参数：props 和 context，并返回一个包含响应式数据和方法的对象。

import { ref, reactive } from 'vue';

export default {
  props: {
    initialValue: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const count = ref(props.initialValue);
    const user = reactive({
      name: 'John',
      age: 30
    });

    function increment() {
      count.value++;
    }

    return {
      count,
      user,
      increment
    };
  }
};