跨端技术预习内容(Vue)｜青训营笔记文章第一句话为“这是我参与「第五届青训营」伴学笔记创作活动的第 6 天一、课

文章第一句话为“这是我参与「第五届青训营」伴学笔记创作活动的第 6 天
一、课前预习：

了解一门前端开发框架（React/Vue）, reactjs.org/, vuejs.org/
二、详细知识点介绍：
了解vue相关内容：是一个用于构建用户界面的JavaScript框架。它建立在标准 HTML、CSS 和 JavaScript 之上，并提供声明性和基于组件的编程模型。
Vue 可以以不同的方式使用：
- 无需构建步骤即可增强静态 HTML
- 在任何页面上作为 Web 组件嵌入
- 单页应用程序（SPA）
- 全栈/服务器端渲染（SSR）
- Jamstack / Static Site Generation （SSG）
- 针对桌面、移动、WebGL 甚至终端
Vue中
- 单文件组件：我们用一种类似于HTML的文件格式编写 Vue 组件，称为单文件组件（也称为文件，缩写为 SFC），是将组件的逻辑（JavaScript），模板（HTML）和样式（CSS）封装在一个文件中的编写方式。
- Vue 组件可以用两种不同的 API 风格编写：选项 API 和 Composition API。
  - 选项API ：我们使用选项对象（如、和）来定义组件的逻辑
  - Composition API:通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

三、实践练习例子：

API风格：

option API：

<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>

Composition API

<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>

实际上，选项式 API 是在组合式 API 的基础上实现的
五、引用参考：
推荐的Vue的文档

跨端技术预习内容(Vue)｜ 青训营笔记

API风格：

option API：

Composition API

跨端技术预习内容(Vue)｜青训营笔记