什么是 vue
vue 是一款用于构建用户界面的 javascript 框架，它基于标准 html、css、javascript 构建，并提供了一套声明式的、组件化的编程模型，帮助你搞笑的开发用户界面。无论是简单还是复杂的界面 ，vue 都可以胜任。
下面是一个简单的示例：
main.js
import App from "./App.vue";
import { createApp } from "vue";
createApp(App).mount("#app");
App.vue
<template>
<div id="app">
<button @click="increment">Count is: </button>
<button @click="resetbtn">重置</button>
</div>
</template>
<script lang="ts">
import { ref } from "vue";
/* 重要步骤
1.使用ref()创建响应式变量
2.使用setup()函数组织逻辑，return返回需要暴露给模板的变量和方法
3.事件处理：
-使用@click绑定点击事件 -方法需要定义在setup()中并返回
4.模板语法 -
双大括号用于插值 - 指令以v-开头（这里使用了@的简写） */
export default {
setup() {
const numCount = ref(0);
const increment = () => {
numCount.value++; //通过.value访问/修改值（在模板中自动解包）
};
const resetbtn = () => {
numCount.value = 0;
};
return { numCount, increment, resetbtn }; //注意return 要用{}包含
},
};
</script>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
渐进式框架
根据需求场景，可以用不同的方式使用 vue：
- 无需构建步骤，渐进式增强静态的 html
- 在任何一名中作为 web components 嵌入
- 单页应用 (spa)
- 全栈/服务端渲染(ssr)
- jamstack/静态站点生成（ssg）
- 开发桌面端、移动端、webGL,甚至是命令行终端的界面
单文件组件
vue 的单文件组件会讲一个组件的逻辑(javascript)、模版(html)和样式(css)封装在同一个文件里。
下面用单文件组件的格式重写计数器：
<script setup>
import { ref } from "vue";
const count = ref(0);
</script>
<template>
<button @click="count++">Count is: 8</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>
单文件组件是 Vue 的标志性功能。如果你的用例需要进行构建，我们推荐用它来编写 Vue 组件。
