
import { ref } from 'vue';引入了 Vue 的ref函数,用于创建响应式数据。const message = ref('Hello Vue3');创建了一个响应式变量message并初始化为字符串'Hello Vue3'。<h1>{``{ message }}</h1>使用了 Vue 的插值表达式{``{ message }}来显示message变量的值。- 样式部分目前为空,您可以在这里添加 CSS 来美化组件。

-
data 函数 :返回一个对象,其中包含一个名为
count的属性,初始值为 0。这个属性是响应式的,当它变化时,视图也会相应更新。 -
methods 对象 :包含一个名为
increment的方法,当调用这个方法时,count的值会增加 1。 -
mounted 钩子:在组件被挂载到 DOM 后执行,这里它在控制台输出了一条消息 'Vue mounted...'。
-
模板部分 :包含一个按钮,当点击这个按钮时,会触发
increment方法。按钮上显示的文本是count: {``{ count }},其中{``{ count }}是一个插值表达式,用于显示count的当前值。