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

相关推荐
恋恋风尘hhh几秒前
滑动验证码前端安全研究:以顶象(dingxiang-inc)为例
前端·安全
夜瞬6 小时前
NLP学习笔记01:文本预处理详解——从清洗、分词到词性标注
笔记·学习·自然语言处理
萑澈6 小时前
Windows 7 运行 Electron 安装包报“不是有效的 Win32 应用程序”怎么办
javascript·windows·electron
W.A委员会7 小时前
JS原型链详解
开发语言·javascript·原型模式
懂懂tty7 小时前
React状态更新流程
前端·react.js
-Springer-7 小时前
STM32 学习 —— 个人学习笔记11-1(SPI 通信协议及 W25Q64 简介 & 软件 SPI 读写 W25Q64)
笔记·stm32·学习
LN花开富贵7 小时前
【ROS】鱼香ROS2学习笔记一
linux·笔记·python·学习·嵌入式·ros·agv
小码哥_常7 小时前
告别繁琐!手把手教你封装超实用Android原生Adapter基类
前端
她说彩礼65万7 小时前
C# 实现简单的日志打印
开发语言·javascript·c#
skywalk81638 小时前
pytest测试的时候这是什么意思?Migrating <class ‘kotti.resources.File‘>
前端·python