定义
Vue是一款Javascript框架，基于前端三大件，提供了具有组件化，声明式，渐进式的特点的编程模型。
核心功能
1.声明式渲染
2.响应式
组件之单文件组件
Vue最为核心的组成部分便是单文件组件，文件结尾为*.vue
宏观的逻辑是这样的：
*.vue创建组件-> .js文件中将组件实例化生成一个应用实例->挂载应用实例
要使用单文件组件，就必须使用构建工具。
单文件组件（SFC）的优势：
使用熟悉的 HTML、CSS 和 JavaScript 语法编写模块化的组件
让本来就强相关的关注点自然内聚
预编译模板，避免运行时的编译开销
组件作用域的 CSS
在使用组合式 API 时语法更简单
通过交叉分析模板和逻辑代码能进行更多编译时优化
更好的 IDE 支持，提供自动补全和对模板中表达式的类型检查
开箱即用的模块热更新 (HMR) 支持
API
1.选项式API
用包含多个选项的对象，描述具体的逻辑
选项所定义的属性会暴露在对象内部的this，this指向当前的组件实例
2.组合式API
利用导入的API来描述逻辑。
往往与<script setup>结合起来使用，这样相当于在编译的时候告诉vue要进行一些处理，使得script中定义的顶层函数/变量能够在template中直接使用
以下为相同的组件按照两种方式进行搭建
//1. 选项式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>
//2.组合式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>
构建vue3项目
-
通过vite，vue-cli等工具构建
-
通过CDN使用Vue
分为 全局构建版本 和 ES6构建版本
注：ES6为javascript的一种语法，可以进行模版化的导入等操作，要使用ES6，需要在<script>中加type="module"，但是在单文件组件中，我们不需要这个就可使用import等语句，因为Vue3会将这个组件打包成javascript包，输出时自动按照ES6语法。
组件，根组件与应用实例，实际页面
自定向下来看，一个页面有静态与动态的部分；
静态部分有html构成，而动态部分则有javascript构成，将动态嵌入到静态元素，组成实际页面；
vue3采用了组件化的方式渲染DOM，而实际是通过将由组件构成的应用实例挂载到DOM上完成的；
一个html中可以挂载多个应用实例这些应用实例可以从同一个单文件组件得来，也可以从不同单文件组件中得来；
一个应用组件至少有一个根组件，即生成它时用的那个单文件组件，随后还可以在这个实例中添加组件；
添加的组件可以是全局组件，也可以是局部组件。
一个组件基本是由script与template组成，前者定义具体业务逻辑，后者是要呈现的内容，在html中通过<组件名></组件名>即可呈现模版内容；
若是未定义template，则其会自动将html容器当作模版，也就是说，在html文件中，可以直接实现template的语法，如：文本插值 等。