学习vue：vue.js简介-DEV365 开发者社区

vue.js是用于构建前端应用程序的JavaScript框架。实际上，如果您已经知道HTML，CSS和JavaScript，那么很容易学习，那么您将学习Vue的一半，这是因为，Vue.js在标准的HTML，CSS和JavaScript之上构建，这使得构建前端应用程序的vue Easy。

vue.js的功能

vue.js是最受欢迎的前端框架之一，让我们看一些使Vue与众不同的功能。

声明渲染：VUE模板语法使我们可以将逻辑直接绑定到模板。
反应性：使用反应性，我们可以跟踪JavaScript的状态，并在我们的代码中随时自动更新DOM。
综合：使用vue.js composable，我们能够抽象一块在我们组件中共享的代码，从而减少代码冗余。
选项API和组成API：使用vue.js，您可以自由在选项API和组成API之间进行选择，并使用一个更好地满足您需求的选择。

这些只是VUE的一些功能，当您开始使用Vue学习和构建时，您会发现更多令人惊叹的功能以及为什么Vue在其他前端框架中脱颖而出。

先决条件

要充分利用本指南，重要的是要有以下内容：

了解HTML, CSS, and JavaScript的基础知识。
Node.js安装在您的机器上。
Visual Studio Code或任何其他文本编辑器都安装在您的计算机上。

如果您喜欢我，那么您将不想在回来阅读指南之前要经历安装新软件应用程序的所有压力。如果是这样，那么Vue Playground是一个很好的选择。 Vue Playground使我们能够编写和执行任何有效的vue.js代码。因此，如果您目前不想安装任何软件，那么Vue Playground是您的理想之选。

设置

我将在本指南中使用vue.js游乐场，但是如果您喜欢使用本地开发环境，请运行以下命令来踩下带有vite的新Vue项目：

> npm init vue@latest

上面的命令安装并执行create vue（VUE的官方构建工具）。您会提示您回答一系列问题。使用down或up箭头键在yes和no之间进行选择，请选择否，如果您不确定选项，则可以随时安装它们。

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

cd通过运行命令cd <your-project-name>，运行npm install来安装所有软件包，最后运行npm run dev来启动服务器。

基本VUE文件

vue.js用于构建单页应用程序（SPA），SPA表示该应用程序包含在具有不同部分的单个HTML文件中。

作为初学者，了解VUE文件的结构很重要。在本节中，我们将通过一个基本的VUE文件，看看它是如何结构的。

vue文件具有模板部分，一个脚本部分和带有.vue扩展程序的样式部分。这与其他前端框架（例如Angular）不同，该框架是一个单独的文件，样式和脚本也是单独的文件。 vue.js将模板，脚本和样式组合到一个称为组件的单个文件中，这使得与Vue Simple开发Spa。您可以在单文件中轻松执行任何样式，模板和脚本更改。

<script setup>
Import { ref } from 'vue'
const myName = ref("Agu Wisdom aka KingstonCodes ")
</script>

<template>
    <h1> {{myName}} </h1>
</template>

<style>
    h1 {
         font-size: 24px;
    }
</style>

<script></script>包含应用程序的逻辑，<template></template>包含应用程序的视图，而<style></style>（如名称所建议）包含了应用程序的样式。

vue.js文件单独称为组件，我们可以在VUE应用程序中拥有尽可能多的组件。

注意：即使我们可以自由地创建尽可能多的组件，但在需要时，我们也必须在需要时创建它们。

数据绑定

数据绑定是vue.js的最重要功能之一，它只是组件视图（模板）与组件逻辑（脚本）之间的通信。

vue中最简单的数据绑定形式是字符串插值。

我们在vue.js中具有三种类型的数据绑定；字符串插值，指示和修饰符。

字符串插值

字符串插值是VUE中数据绑定的最简单形式，它是我们显示脚本中定义的文本，字符串或任何表达式的方式。我们通过将要在模板中的两个卷发支架之间插入的变量或表达式来执行vue.js的字符串插值。让我看到这一点：

<script setup>
Import {ref} from 'vue'
const myName = ref("Agu Wisdom")
 </script>

<template>
    <h1> {{myName}} </h1>
</template>

在模板内，我们使用双卷曲括号{{ ... }}来插值myName变量的值。这意味着myName的值将载于<h1>元素，对myName的任何更改都会反映在浏览器中。

我们还可以在字符串插值的帮助下在模板中执行任何有效的JavaScript表达式。以下是一个基本示例：

<template>
  <h1>
     {{ 5 + 5 }}
  </h1>
<!-- will output 10 --> 
</template>

指令

指令是VUE中的特殊属性，它们用于操纵DOM并控制我们应用程序的行为。让我们看看用v-if指令的指令示例：

<script setup>  
import  { ref } from ‘vue’
const isName = ref(true)
</script> 

<templat>
<h1 v-if=”isName”> My name is Wisdom </h1>
</template>

V-IF指令就像传统的JavaScript if语句。在上面的示例中，我们使用v-if告诉VUE仅显示我的名字是智慧仅在isName为true时才浏览器。

正如我们在JavaScript中拥有if，else if和else一样，我们在VUE中也有v-if，v-else-if和v-else。我们可以使用它们来控制VUE应用程序的流程。

指令是vue.js的核心特征的一部分，因为它们有助于控制和塑造我们的应用程序的流程。
Read more on Vue directives

API样式

在vue.js中，我们有两种方式可以编写组件；我们可以使用选项API或组成API。我知道您可能想知道什么是API的选项？什么是构图API？不用担心，我们会解释并看到一些差异。

选项API

选项API是旧的和传统的编写vue.js的方式，主要用于VUE 2，它允许我们使用一组选项（例如数据，方法和计算）编写组件的逻辑属性。

这是选项API的示例：

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event handlers in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

如果您注意到，此语法与我们以前的示例中所看到的不同，这是因为我们一直在使用构图API。

组成API

构图API是在vue.js（vue 3）版本中引入的，它允许我们使用一组导入的函数来编写组件的逻辑，而不是像选项API中那样声明选项。

使用构图API，我们只能撰写更少的代码，因为我们只导入并使用所需的功能。这是上面与组合API的相同示例：

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

与我们的选项API示例相比，此示例具有较少的代码和不同的语法；那是因为我们只是从vue.js中导入所需的功能。

我应该学到哪个API？

这是我听过许多初学者问的一个问题，但是重要的是要知道，选项API和组成API都具有相同的目的，它们都由同一系统驱动，并且它们都致力于实现相同的目标。

我对你的建议是；探索这两个API，从选项API开始，因为它更容易学习和理解，然后当您对vue.js的工作方式有很好的了解时，您可以逐渐转到构图API。但是您也可以决定先学习组成API。

免费资源学习VUE

现在您对vue.js是什么是基本的理解。是时候加强您的知识了。这是2个免费的在线资源来学习VUE：

Vue official documentation：如果您真的想拥有Vue的深入了解，那么我认为您应该尝试一下Vue文档。
Codevolution’s Vue 3 tutorial for beginners：这可能是vue.js Online的最佳入门课程之一。本课程涵盖了选项API和组成API，它始于初学者的级别概念，并以其更高级的概念为基础。

我还建议您进行自己的研究并查看您可以找到的东西，因为那里有很多良好的资源可以学习Vue。

包起来

在初学者的vue.js简介中，我们介绍了vue.js的一些关键概念，我们涉及了数据绑定，VUE API样式以及Vue的一些惊人功能，我们也看到了一些例子。既然您已经了解了vue.js是什么，以及您可以用它做什么，请考虑探索其他资源，无论是免费的还是付费的，这样您就可以充分享受vue.js的善良。