带有模板的 Vue.js 组合 API

Vue.js是一个用于开发 Web 用户界面的渐进式 JavaScript 框架。它是一个提供高速和高性能的多功能框架。我们可以创建单页应用程序以及全栈应用程序。

组合 API允许作者使用导入函数而不是声明性函数来 Vue 组件。组合 API 允许我们编写干净、合乎逻辑且高效的代码。与具有等效代码的选项 API 相比，组合 API 在构建过程中也具有更好的缩小性。由于函数及其结构的简单性，组合 API 还有益于使用的变量类型。

在带有模板的合成 API 中，我们在脚本设置标签内声明变量和函数，并在合成 API 的模板标签中访问它们。

语法：我们需要在脚本标签中声明函数和变量，稍后我们可以在模板中访问它们。

    // Functions and variables

示例：在下面的示例中，我们有一个按钮和一个段落元素。当按下按钮时，文本在段落元素内切换，值存在于数据数组变量中。

第 1 步：使用 npm node.js 包管理器创建一个新的 Vue.js 项目。

npm init vue@latest

输入项目名称并预设项目如下：

项目结构：安装成功后，会形成如下的项目结构。

项目结构

第 2 步：在 App.vue 文件中，使用 setup 标签创建脚本元素，告诉 Vue.js 它是一个组合 API。这里我们将提到数据数组和一个当前变量。此外，声明将更新当前值的toggleText函数。

App.vue

  import { ref } from "vue";
  const current = ref(0);
  const data = ["Data Structures",
                  "Algorithms",
                  "Web Development"];
  
  function toggleText() {
    current.value = (current.value + 1) % 3;
  }

第 3 步：现在，在模板部分中，添加一个按钮和一个段落元素。在按钮的单击函数中，调用声明的函数来切换文本并声明段落元素中的值。

完整代码：

应用程序.vue

  import { ref } from "vue";
  const current = ref(0);
  const data = ["Data Structures",
                "Algorithms",
                "Web Development"];
  
  function toggleText() {
    current.value = (current.value + 1) % 3;
  }

  

第 4 步：使用以下命令运行项目并查看输出。

npm run dev

输出：它将在 http://localhost:3000/ 上运行项目，结果如下。

参考： https ://vuejs.org/guide/introduction.html#composition-api