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
的当前值。