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>