1. vue文件的结构

script：控制模板的数据和行为（注意不要少了setup）

<script setup>import {ref} from "vue";
</script>

template：模板部分,由它生成HTML

<template><h1>{{msg}}</h1><br>
</template>

style：当前组件的CSS样式

<style scoped>h1 {color: red;}
</style>

2. vue的API

2.1 组合式（推荐使用）

参数介绍：

• setup：是一个标识，告诉Vue需要进行一些处理，让我们可以更简洁的使用组合式API。
• ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性 value。
• onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。

<script setup>import {ref,onMounted} from 'vue'//声明响应式数据 ref 响应式对象有一个内部的属性value//在组合式api中，一般要把数据定义为响应式数据const count = ref(0); //声明响应式变量//声明函数function increment() {count.value++;}onMounted(() => { //声明钩子函数console.log("vue挂载完毕");});
</script><template><!-- 写HTML元素 --><button @click="increment">count：{{count}}</button>
</template>

2.2 选项式

<script>export default {data(){ //声明响应式对象return {count: 0}},methods: { //声明方法，可以通过组件实例访问increment: function(){this.count++ ;}},mounted(){ //声明钩子函数console.log('Vue mounted ...');}}
</script><template><button @click="increment">count:{{ count }}</button>
</template>

 笔记参考