Vue简介--vue3入门

如果你是初学者，可能会觉得这些概念有些复杂。别担心！博主也是一路走过来的，随着你的不断成长，到未来有能力实现更复杂的项目时，这一路上获得的知识依然会适用。理解教程和指南的内容只需要具备基础的 HTML 和 JavaScript 知识。即使你不是这些方面的专家，也能够跟得上。这就是为什么我们将 Vue 称为“渐进式框架”：它是一个可以与你共同成长、适应你不同需求的框架。

什么是Vue？

Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助我们可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

• 无需构建步骤，渐进式增强静态的 HTML
• 在任何页面中作为 Web Components 嵌入
• 单页应用 (SPA)
• 全栈 / 服务端渲染 (SSR)
• Jamstack / 静态站点生成 (SSG)
• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

下面是一个最基本的示例：

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

  
    Count is: {{ count }}
  

结果展示

上面的示例展示了Vue的两个核心功能：

• 声明式渲染：Vue 基于标准HTML拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
• 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

单文件组件（即Vue项目内的文件）

在大多数启用了构建工具的 Vue 项目中，我们常常使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 (也被称为 *.vue 文件)。顾名思义，Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。下面博主将用单文件组件的格式重写上面的计数器示例：

如上所示：.vue文件由template、script、style三部分构成

这里注意一下，template标签内vue2只能有一个根元素，vue3则没有这个限制

template 编写html的地方

• 使用{{ }} 存放变量，并且，在里面可以做基本的逻辑，注意：不能使用map循环
  • 双花括号中存放变量 变量放在script标签内的data方法内return出去的对象中定义

script 编写逻辑的地方

• 必须要export default一个对象，vue的语法就在这个对象里面写
  • data是一个方法，(所有数据都放在data里) data 是用来存放当前组件状态的属性,是一个方法，必须有返回值，返回的值就是这个组件的状态，template里面可以直接使用，并且这些数据是响应式的数据，也就说，改变后所有引用的地方都会同步改变。改变data里面的数据直接用 this.属性名 即可
  • methods用来存放方法的，包括自己定义的方法，事件方法，这里面方法可以直接使用this访问当前组件的实例，即直接使用this获取data里面的数据，并修改它，还可以调用其它methods里面的方法

style 编写样式的地方

• style里面的样式默认作用到全局，上方代码中scoped的作用: 使当前组件的样式不会和其它组件冲突。

单文件组件是 Vue 的标志性功能。如果你的用例需要进行构建，我们推荐用它来编写 Vue 组件。你可以在后续相关章节里了解更多关于单文件组件的用法及用途，关注博主后即可第一时间收到更新文章~你暂时只需要知道 Vue 会帮忙处理所有这些构建工具的配置就好。