[JavaScript知识库]1.介绍vue

介绍vue

什么是Vue

Vue是用于构建用户界面的 JavaScript 框架。它基于标准HTML、CSS和JavaScript构建。并提供了一套声明式的、组件化的编程模型，高效地开发用户界面。

Vue的两个核心功能

• 声明式渲染：Vue基于标准HTML拓展了一套模板语法，使我们可以声明式地描述最终输出的HTML和JavaScript状态之间的关系。

• 响应式：Vue会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新DOM.

渐进式框架

不同开发者在Web上构建的东西可能在形式和规模上会有很大的不同。可以根据实际场景来选择使用Vue的最佳方式，在各种场景下都可以保持同样的开发效率，这就是Vue的“渐进式框架”。

不同方式使用Vue

• 无需构建步骤，渐进式增强静态的HTML

• 在任何页面作为 Web Components 嵌入

• 单页应用（SPA）

• 全栈/服务端渲染（SSR）

• Jamstack/静态站点生成（SSG）

• 开发桌面端、移动端、WebGL，甚至是命令行终端中的页面

单文件组件

单文件组件又被称为*.vue文件，英文Single-File Components,缩写为SFC.

Vue的单文件组件会将一个组件的逻辑（JavaScript）,模板（HTML）和样式（CSS）封装在同一个文件里。

API风格：选项式API和组合式API

选项式API

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

?<script>
?export default {
?  // data() 返回的属性将会成为响应式的状态
?  // 并且暴露在 `this` 上
?  data() {
? ?  return {
? ? ?  count: 0
? ?  }
?  },
??
?  // methods 是一些用来更改状态与触发更新的函数
?  // 它们可以在模板中作为事件监听器绑定
?  methods: {
? ?  increment() {
? ? ?  this.count++
? ?  }
?  },
??
?  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
?  // 例如这个函数就会在组件挂载完成后被调用
?  mounted() {
? ?  console.log(`The initial count is ${this.count}.`)
?  }
?}
?</script>
??
?<template>
?  <button @click="increment">Count is: {{ count }}</button>
?</template>
??

组合式API

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与<script setup>搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

?<script setup>
?import { ref, onMounted } from 'vue'
??
?// 响应式状态
?const count = ref(0)
??
?// 用来修改状态、触发更新的函数
?function increment() {
?  count.value++
?}
??
?// 生命周期钩子
?onMounted(() => {
?  console.log(`The initial count is ${count.value}.`)
?})
?</script>
??
?<template>
?  <button @click="increment">Count is: {{ count }}</button>
?</template>