https://www.runoob.com/w3cnote/vue2-start-coding.html

https://www.runoob.com/vue2/vue-tutorial.html

https://cn.vuejs.org/

// 什么是 Vue？
是一款用于构建用户界面的 JavaScript 框架

// Vue 的两个核心功能：
声明式渲染
响应式

//渐进式框架
Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。

//单文件组件
Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

<script>
export default {
data() {
return {
count: 0
}
}
}
</script>

<template>
<button @click=”count++”>Count is: {{ count }}</button>
</template>

<style scoped>
button {
font-weight: bold;
}
</style>

//API 风格#
Vue 的组件可以按两种不同的风格书写：选项式 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>
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>

该选哪一个？
在学习的过程中，推荐采用更易于自己理解的风格。再强调一下，大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后，你也能够很快地理解另一种风格。