当前位置: 首页 > news >正文

Vue3-响应式基础:单文件和组合式文件

 单文件:html

<!DOCTYPE html>
<html>
<head><title>响应式基础</title>
</head>
<body><div id="app" ><!-- dynamic parameter:同样在指令参数上也可以使用一个 JavaScript 表达式,需要包含在一对方括号内: --></div><!-- 引入Vue.js --><script type="module">import { createApp,ref } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js"const count = ref(0)console.log(count)   // { value: 0 }console.log(count.value)  // 0createApp({data(){return {}}}).mount('#app')</script></body>
</html>

组合文件

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><script type="module">import {createApp, ref} from "https://unpkg.com/vue@3/dist/vue.esm-browser.js"import count from './reactive.js'createApp(count).mount('#app')</script>
</body>
</html>

reactive.js

import { ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'export default {// `setup` 是一个特殊的钩子,专门用于组合式 API。setup() {const count = ref(0)// 将 ref 暴露给模板return {count}}
}

​​​​​​​

相关文章:

Vue3-响应式基础:单文件和组合式文件

单文件&#xff1a;html <!DOCTYPE html> <html> <head><title>响应式基础</title> </head> <body><div id"app" ><!-- dynamic parameter:同样在指令参数上也可以使用一个 JavaScript 表达式&#xff0c;需要包…...

DVWA-File Upload文件上传

什么是文件上传漏洞&#xff1f; 黑客利用文件上传后服务器解析处理文件的漏洞上传一个可执行的脚本文件&#xff0c;并通过此脚本文件获得了执行服务器端命令的能力。 造成文件上传漏洞的原因: 1.服务器配置不当 2.开源编辑器上传漏洞 3.本地文件上传限制被绕过 4.过滤不严格被…...

python之word操作

#pip install python-docx import docx import os pathos.path.abspath(__file__) file_pathos.path.join(path,"大题.docx") print(path) print(file_path) objdocx.Document("大题.docx") #第一个段落 p1obj.paragraphs[2] # print(p1.text) #所有段落 #…...

Linux下新增有root权限的用户

步骤&#xff1a; 1.以 root 用户身份登录到 CentOS 服务器。 2.使用以下命令创建新用户&#xff08;将 newuser 替换为您想要创建的用户名&#xff09;&#xff1a; sudo adduser username 3.为新用户设置密码&#xff1a; sudo passwd username 按照提示输入新增用户密码 …...

RPC通信原理(一)

RPC通信原理 RPC的概念 如果现在我有一个电商项目&#xff0c;用户要查询订单&#xff0c;自然而然是通过Service接口来调用订单的实现类。 我们把用户模块和订单模块都放在一起&#xff0c;打包成一个war包&#xff0c;然后再tomcat上运行&#xff0c;tomcat占有一个进程&am…...

修改/etc/resolve.conf重启NetworkManager之后自动还原

我ping 百度报错&#xff1a; [rootk8snode1 ~]# ping baidu.com ping: baidu.com: Name or service not known很明显&#xff0c;这是DNS解析问题。 于是我修改 /etc/resolv.conf 文件后&#xff0c;执行完sudo systemctl restart NetworkManager&#xff0c;/etc/resolv.con…...

Web前端依赖版本管理最佳实践

本文需要读者懂一点点前端的构建知识&#xff1a; 1. package.json文件的作用之一是管理外部依赖&#xff1b;2. .npmrc是npm命令默认配置&#xff0c;放在工程根目录。 Web前端构建一直都是一个不难&#xff0c;但是非常烦人的问题&#xff0c;在DevOps、CI/CD领域。 烦人的是…...

多线程进阶

一.常见的锁策略 这里所讲的锁&#xff0c;不是一把具体的锁&#xff0c;而是锁的特性 1.乐观锁和悲观锁 悲观乐观是对锁冲突大小的预测 若预测锁冲突概率不大&#xff0c;就可能会少一些工作&#xff0c;那就是乐观锁&#xff1b;反之就是悲观锁 总是假设最坏的情况&…...

总结linux常用命令

Linux常用命令总结如下&#xff1a; 文件与目录操作&#xff1a; ls&#xff1a;列出目录内容cd&#xff1a;改变当前目录pwd&#xff1a;显示当前工作目录mkdir&#xff1a;创建新目录cp&#xff1a;复制文件或目录rm&#xff1a;删除文件或目录mv&#xff1a;移动或重命名文件…...

C++ 枚举

C 枚举 5.4.1普通枚举 枚举的定义&#xff1a;&#xff0c;枚举类型是通过enum关键字定义的&#xff0c;比如定义颜色类型 enum Color {RED, // 默认值为0GREEN, // 默认值为1BLUE // 默认值为2 }; Color myColor RED;注意&#xff1a; &#xff08;1&#xff09;括…...

Vue2在一个页面内动态切换菜单显示对应的路由组件

项目的需求是在一个页面内动态获取导航菜单&#xff0c;导航菜单切换的时候显示对应的路由页面&#xff0c;类似于tab切换的形式&#xff0c;切换的导航菜单和页面左侧导航菜单是同一个路由组件&#xff0c;只是放到了一个页面上&#xff0c;显示的个数不同&#xff0c;所有是动…...

执行任务赚积分C卷(JavaPythonC++Node.jsC语言)

现有N个任务需要处理,同一时间只能处理一个任务,处理每个任务所需要的时间固定为1。 每个任务都有最晚处理时间限制和积分值,在最晚处理时间点之前处理完成任务才可获得对应的积分奖励。 可用于处理任务的时间有限,请问在有限的时间内,可获得的最多积分。 输入描述 第一…...

接口测试之文件下载

在工作中对于下载接口&#xff0c;经常会有这样的疑问&#xff1a;这类接口一般功能比较稳定&#xff0c;但是又比较重要&#xff0c;需要占用回归测试时间&#xff0c;有没有可替代的方式&#xff1f; 答案肯定是有的&#xff0c;可以从接口测试/UI自动化测试介入&#xff0c…...

算法思想总结:双指针算法

一、移动零 . - 力扣&#xff08;LeetCode&#xff09; 移动零 该题重要信息&#xff1a;1、保持非0元素的相对位置。2、原地对数组进行操作 思路&#xff1a;双指针算法 class Solution { public:void moveZeroes(vector<int>& nums){int nnums.size();for(int cur…...

python中的zip函数

1.zip&#xff08;&#xff09;同时迭代多个列表、字典等 使用zip()可以同时迭代多个可迭代对象&#xff0c;如列表、字典。 注意&#xff1a;当若干个可迭代对象的长度不相等时&#xff0c;zip()函数会停止在最短的可迭代对象。 例子&#xff1a; # 定义可迭代对象 numbers …...

Element 选择季度组件

<template><el-dialogtitle"选择季度":show-close"false":close-on-click-modal"false":close-on-press-escape"false":visible"visiable"class"dialog list"append-to-body><div><div>&…...

4.MongoDB中16个常用CURD

基本的CURD 作为一个非专业的DBA&#xff0c;我们只需要会一些基本的curd就行&#xff0c;专业的内容还是需要专业的人去干的。CRUD 也就是增删改查&#xff0c;这是数据库最基本的功能&#xff0c;查询还支持全文检索&#xff0c;GEO 地理位置查询等。 01创建库 无需单独创…...

Tomcat数据源笔记

Tomcat数据源笔记 连接池的概念 连接池是一种由容器提供的机制&#xff0c;用于管理数据库连接对象的集合。连接池的主要作用是在应用程序需要与数据库进行交互时&#xff0c;提供可复用的连接对象&#xff0c;从而减少每次建立数据库连接的开销。 连接池的工作原理 连接池的…...

Spring-Kafka笔记整理

引入依赖<dependency><groupId>org.springframework.kafka</groupId><artifactId>spring-kafka</artifactId> </dependency>配置application.propertiesspring.kafka.bootstrap-servers192.168.99.51:9092编写kafka的配置类Configuration …...

已解决org.apache.hadoop.hdfs.protocol.QuotaExceededException异常的正确解决方法,亲测有效!!!

已解决org.apache.hadoop.hdfs.protocol.QuotaExceededException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 报错原因 解决思路 解决方法 总结 博主v&#xff1a;XiaoMing_Java 问题分析 在使用Hadoop分布式文件系统&a…...

Spring IoC 与 DI 核心详解 —— 基于 XML 配置:Bean 创建、依赖注入与生命周期全解析(Spring系列1)

在 Java 企业级开发中&#xff0c;Spring 框架凭借其强大的 IoC&#xff08;控制反转&#xff09; 与 DI&#xff08;依赖注入&#xff09; 能力&#xff0c;成为了事实上的标准。本文将带你从最原始的 XML 配置开始&#xff0c;逐步过渡到纯注解开发&#xff0c;并深入剖析 Io…...

GESP2025年3月认证C++三级( 第一部分选择题(1-8))

&#x1f3af; 第1题&#xff1a;Base64魔法箱&#x1f4dc; 题目核心&#xff1a; &#x1f449; 每 3个字节 → 变成4个字节1、&#x1f9e0; 故事理解有一个魔法机器&#xff1a;&#x1f449; 每放进去 3个苹果 &#x1f34e;&#x1f34e;&#x1f34e;&#xff08;不足3个…...

独立站建站成本全解析

独立站建站费用构成独立站的费用主要分为域名注册、主机托管、网站建设、支付接口、营销推广和日常维护等几个部分。每个部分的费用因需求不同而有较大差异。域名注册费用通常在每年10至100美元之间&#xff0c;取决于域名后缀和注册商。常见的.com域名价格在10至20美元/年&…...

Linux驱动开发中的Devres资源管理机制解析

1. Linux驱动开发中的资源管理痛点 在Linux驱动开发中&#xff0c;资源管理一直是个令人头疼的问题。想象一下这样的场景&#xff1a;你正在编写一个摄像头驱动&#xff0c;需要依次申请内存、时钟、DMA通道、中断等多种资源。如果其中任何一步失败&#xff0c;都必须小心翼翼地…...

OpenClaw自动化写作:Phi-3-vision-128k根据图文素材生成技术博客

OpenClaw自动化写作&#xff1a;Phi-3-vision-128k根据图文素材生成技术博客 1. 为什么需要自动化写作助手 作为一个技术博主&#xff0c;我经常遇到这样的困境&#xff1a;手头积累了大量的代码截图、零散笔记和实验记录&#xff0c;但要把它们整理成一篇结构完整的技术文章…...

空间多组学解决方案发展提速:未来六年CAGR锁定15.3%,行业增长预期持续向好

在生命科学领域&#xff0c;精准医学和个性化治疗的需求日益增长&#xff0c;对生物组织和细胞在空间维度上的深入理解成为关键。空间多组学解决方案作为这一需求的核心支撑技术&#xff0c;正受到全球科研和产业界的广泛关注。据恒州诚思调研统计&#xff0c;2025年全球空间多…...

告别手输!用Shell脚本自动化你的GROMACS伞形采样全流程(附赠配置文件)

告别手输&#xff01;用Shell脚本自动化你的GROMACS伞形采样全流程&#xff08;附赠配置文件&#xff09; 在计算化学领域&#xff0c;GROMACS作为分子动力学模拟的利器&#xff0c;其强大的功能背后往往伴随着繁琐的命令行操作。特别是进行伞形采样&#xff08;Umbrella Sampl…...

【游戏引擎之路】极速狂飙(一):5天打造跨平台Galgame播放器《Galplayer》——从脚本解析到电影式体验

1. 极速开发背后的技术选型 开发《Galplayer》最疯狂的地方在于&#xff0c;我只用了5天就完成了从零到可运行版本的开发。这听起来像天方夜谭&#xff0c;但合理的工具链选择让这一切成为可能。我选择了WPFPythonUnity这个"三件套"组合&#xff0c;每个工具都发挥了…...

BR DI426数字输入模块

B&R DI426 数字输入模块是一款工业自动化系统用的 I/O 模块&#xff0c;主要用于采集现场开关量信号并传输至控制系统。一、基本概述型号&#xff1a;DI426类型&#xff1a;数字输入模块用途&#xff1a;采集工业现场的开关量信号&#xff0c;为控制系统提供输入数据二、主…...

关于爬虫源影视资源设置

1.首先目前的omnibox的版本已更新到2.0.3版本,之前的配置会丢失,原本的资源都会无法使用,这里以新版本增加数据源,看完以下教程再下载脚本。 2.添加爬虫源,这里以猫眼资源为主测试: 增加脚本之后,点击保存即可! 复制以下脚本,修复改site_api即可,一般公用的资源都是正…...