VUE学习

最新推荐文章于 2025-02-13 08:00:00 发布

m0_74931752

最新推荐文章于 2025-02-13 08:00:00 发布

阅读量303

点赞数 4

文章标签： vue.js 学习 javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_74931752/article/details/145019676

版权

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