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

相关推荐
张元清3 分钟前
React useResizeObserver Hook:追踪元素尺寸变化(2026)
javascript·react.js
@Mike@16 分钟前
02-数据库学习笔记(SQL引擎)
数据库·笔记·学习
赵庆明老师32 分钟前
Vben精讲:16-熟悉Vite前端工具链
前端
六点_dn1 小时前
RabbitMQ学习笔记-定义与作用
笔记·学习·rabbitmq
我的xiaodoujiao1 小时前
快速学习Python基础知识详细图文教程9--函数进阶
开发语言·python·学习·测试工具
瑞瑞小同学3 小时前
处理echarts x轴内容过多,重叠问题
前端·javascript·echarts
世人万千丶3 小时前
鸿蒙Flutter Flexible与Expanded的区别
学习·flutter·harmonyos·鸿蒙
HexCIer3 小时前
面向未来的原子化 CSS:UnoCSS 核心架构分析与 Tailwind CSS 现状
前端·css·vite
程序员黑豆3 小时前
鸿蒙应用开发中的单位详解:px、vp、fp、lpx
前端·harmonyos
YM52e3 小时前
鸿蒙Flutter Center居中组件:Align对齐详解
android·学习·flutter·华为·harmonyos·鸿蒙