Vue3案例详解(一)

此篇文章编写于2023年7月4日.如果查阅时间太久请注意版本的迭代.

本篇文章主要针对于初学VUE的新手,对vue网站上的案例进行了详细解释.

在此之前你可以先学习:

Vue互动教程

Vue示例

快速上手 | Vue.js

我比较喜欢用详细的注释来进行学习,所以话不多,代码和注释管够. 好了,我们现在开始

1.使用VSCode创建好项目,在src/compenonts下创建demo1.vue

<!-- 在script标签加入setup,会将里面的代码被编译成组件setup()函数的内容 -->
<!-- 在<script setup>中声明的变量,函数,在模板中可以直接使用 -->
<script setup>
//从vue导入ref,watchEffect
//watchEffect:加载时执行一次,当依赖数据更新时重新执行一次.
import {ref,watchEffect,watch} from 'vue'
//定义一个常量保存url的前面一截
const API_URL = `https://api.github.com/repos/vuejs/core/commits?per_page=3&sha=`
//定义一个常量数组,保存url的后缀
const branches =  ['main',