VUE学习

  • import { ref } from 'vue'; 引入了 Vue 的 ref 函数,用于创建响应式数据。
  • const message = ref('Hello Vue3'); 创建了一个响应式变量 message 并初始化为字符串 'Hello Vue3'
  • <h1>{``{ message }}</h1> 使用了 Vue 的插值表达式 {``{ message }} 来显示 message 变量的值。
  • 样式部分目前为空,您可以在这里添加 CSS 来美化组件。
  1. data 函数 :返回一个对象,其中包含一个名为 count 的属性,初始值为 0。这个属性是响应式的,当它变化时,视图也会相应更新。

  2. methods 对象 :包含一个名为 increment 的方法,当调用这个方法时,count 的值会增加 1。

  3. mounted 钩子:在组件被挂载到 DOM 后执行,这里它在控制台输出了一条消息 'Vue mounted...'。

  4. 模板部分 :包含一个按钮,当点击这个按钮时,会触发 increment 方法。按钮上显示的文本是 count: {``{ count }},其中 {``{ count }} 是一个插值表达式,用于显示 count 的当前值。

相关推荐
IT_陈寒13 小时前
React的useEffect把我坑惨了,这些闭包陷阱真要命
前端·人工智能·后端
Flandern111113 小时前
# 学习AI Agent中了解到的几个概念
人工智能·学习
计算机安禾13 小时前
【Linux从入门到精通】第50篇:专栏总结与Linux学习之路的未来展望
linux·运维·学习
nashane13 小时前
HarmonyOS 6学习:应用推广引擎评论管理与长截图自动拼接实战
学习·华为·harmonyos·harmonyos 5
前端之虎陈随易13 小时前
有生之年系列,Nodejs进程管理pm2 v7.0发布
前端·typescript·npm·node.js
科技林总13 小时前
【系统分析师】14.2 编码与程序设计语言
学习
ayqy贾杰13 小时前
Cursor SDK发布!开发者可直接搬走其内核
前端·vue.js·面试
changshuaihua00113 小时前
扣子开发指南
javascript·人工智能
椰猫子14 小时前
SpringMVC(SpringMVC简介、请求与响应(请求映射路径、请求参数、日期类型参数传递、响应json数据))
java·前端·数据库
love530love14 小时前
如何在 Google Chrome 中强制开启 Gemini AI 侧边栏(完整图文教程)
前端·人工智能·chrome·windows