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

【VUE】快速上手

news 2025/9/18 0:56:14

一、快速上手

  • 创建HTML文件+引入vue.js
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
  • 按照vue.js的语法编写代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
</head>
<body>
<div id="app"><h1>欢迎光临红浪漫，尊贵的VIP：{{ name }}, 余额{{ balance }}</h1><button @click="doCharge">点击充值</button><button @dbclick="doCharge2">双击充值</button>
</div><script>var app = Vue.createApp({data: function () {return {name: "cqn",balance: 199}},methods:{doCharge: function () {this.name = 'zkf'this.balance = 299},doCharge2: function () {this.balance = this.balance + 1000}}});app.mount("#app")
</script>
</body>
</html>

vue语法操作和传统方式页面的操作的区别：

  • 传统方式页面功能：DOM中寻找标签+操作
  • vue.js的页面功能：js变量 <-> DOM中标签进行双向绑定，修改js中的变量，页面内容会实时发生变化
<div id="city"><h1>中国北京</h1>
</div><script>v1 = document.getElementById("city")v1.innerText="广东深圳"
</script>

二、组合式和选项式

Vue3支持的两种开发模式API：组合式和选项式

  • 选项式：简单，容易上手，需要使用this获取data-return中返回的值
	Vue.createApp({data:...methods:...})
  • 组合式：修改变量时同步至页面，变量设置时，需要加Vue.ref(“”)，变量读取时，需要加.value，修改时，也要加.value
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
</head>
<body>
<div id="bob"><h1>欢迎光临红浪漫，尊贵的VIP：{{ name }}, 余额{{ balance }}</h1><button @click="doCharge">点击充值</button><button @dbclick="doCharge2">双击充值</button>
</div><script>var bob = Vue.createApp({setup: function () {var name = "cqn"var balance = Vue.ref(1000)var doCharge = function () {balance.value = 9999console.log(name, balance.value)}var doCharge2 = function () {console.log(name, balance.value)}return {name, balance, doCharge, doCharge2}}});bob.mount("#bob")
</script>
</body>
</html>
  • 解包
    var Vue = {name: "cqn", age: 19, email: "xxx"}var {name, age} = Vueconsole.log(name, age)const {createApp, ref} = Vue
  • 导包
import {createApp, ref} from 'ttt.js'
  • 常量和变量
    • 变量：var name = “cqn” // 可以被修改 name = ‘zkf’
    • 常量：const age = 19 // 不可以被修改 age = 18 -> 不支持
    • 常量：const info = { v1:19, v2:30 } // info = {} ->不支持，但是info.v1=18支持

相关文章：

【VUE】快速上手

一、快速上手 创建HTML文件引入vue.js <script src"https://unpkg.com/vue3/dist/vue.global.js"></script> <script src"https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>按照vue.js的语法编写代码…...

编程日记 2024/9/19 4:30:09

在 Docker 中部署无头 Chrome：在 Browserless 中运行

什么是 Browserless&#xff1f; Browserless 是一款基于云的浏览器解决方案&#xff0c;旨在实现高效的浏览器自动化、网页抓取和测试。 它利用 Nstbrowser 的指纹库&#xff0c;实现随机指纹切换&#xff0c;确保流畅的数据收集和自动化。得益于其强大的云基础设施&#xf…...

编程日记 2024/9/19 4:28:59

Meta-Learning数学原理

文章目录 什么是元学习元学习的目标元学习的类型数学推导1. 传统机器学习的数学表述2. 元学习的基本思想3. MAML 算法推导3.1 元任务设置3.2 内层优化&#xff1a;任务级别学习3.3 外层优化&#xff1a;元级别学习3.4 元梯度计算3.5 最终更新规则 4. 算法合并5. 理解 MAML 的优…...

编程日记 2024/9/19 4:27:39

【图像匹配】基于SURF算法的图像匹配，matlab实现

博主简介&#xff1a;matlab图像代码项目合作&#xff08;扣扣&#xff1a;3249726188&#xff09; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 本次案例是基于基于SURF算法的图像匹配&#xff0c;用matlab实现。 一、案例背景和算法介绍 前…...

编程日记 2024/9/19 4:26:29

RocketMQ实战与集群架构详解

目录 一、MQ简介 MQ的作用主要有以下三个方面 二、RocketMQ产品特点 1、RocketMQ介绍 2、RocketMQ特点 三、RocketMQ实战 1、快速搭建RocketMQ服务 2、快速实现消息收发 1. 命令行快速实现消息收发 2. 搭建Maven客户端项目 3、搭建RocketMQ可视化管理服务 4、升级分…...

编程日记 2024/9/19 4:25:28

docker容器中的内存占用高的问题分析

文章目录 问题描述原因分析分析1分析2验证猜想 结论和经验 问题描述 运维新增对某服务的监控后发现&#xff1a;内存不断上涨的现象。进一步确认&#xff0c;是因为有多个导出日志操作导致的内存上涨问题。 进一步的测试得出的结果是&#xff1a;容器刚启动是占用内存约为50M…...

编程日记 2024/9/19 4:24:27

纯血鸿蒙NEXT常用的几个官方网站

一、官方文档 https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/Readme-CN.md刚入门查看最多的就是UI开发模块&#xff0c;首先要熟悉组件使用 二、官方API参考 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/development-i…...

编程日记 2024/9/19 4:23:26

A股上市公司企业创新能力、质量、效率-原始数据+dofile+结果（2006-2023年）

上市公司的创新能力体现在其不断研发新技术、新产品和服务的能力上&#xff0c;这是企业保持竞争优势的关键&#xff1b;质量则是指公司所提供的产品或服务达到高标准的程度&#xff0c;高质量是赢得客户信任和市场份额的基础&#xff1b;效率则涵盖了生产运营中的资源利用程度…...

编程日记 2024/9/19 4:21:22

Selenium：开源自动化测试框架的Java实战解析

背景 在软件开发领域&#xff0c;随着Web应用程序的日益复杂和快速迭代的需求&#xff0c;传统的手动测试方法已经无法满足高效、全面的测试需求。自动化测试作为一种高效、稳定的测试手段&#xff0c;逐渐成为软件开发流程中不可或缺的一环。Selenium&#xff0c;作为一款开源…...

编程日记 2024/9/19 4:19:19

搜索功能技术方案

1. 背景与需求分析 门户平台需要实现对服务信息的高效查询&#xff0c;包括通过关键字搜索服务以及基于地理位置进行服务搜索。面对未来可能的数据增长和性能需求&#xff0c;选择使用 Elasticsearch 来替代 MySQL 的全文检索功能。这一选择的背景与需求可以总结为以下几点&am…...

编程日记 2024/9/19 4:17:16

硬件体系架构的学习

硬件体系架构的学习 RISC全称Reduced Instruction Set Compute&#xff0c;精简指令集计算机&#xff1b; CISC全称Complex Instruction Set Computers&#xff0c;复杂指令集计算机。 SOC片上系统概念 System on Chip&#xff0c;简称Soc&#xff0c;也即片上系统。从狭义…...

编程日记 2024/9/19 4:15:13

【与C++的邂逅】--- C++的IO流

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; 与C的邂逅 本篇博客我们来了解C中io流的相关知识。 &#x1f3e0; C语言输入输出 C语言中我们用到的最频繁的输入输出方式就是scanf ()与printf()。 sc…...

编程日记 2024/9/19 4:12:09

【C++ Primer Plus习题】16.8

大家好,这里是国中之林! ❥前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。有兴趣的可以点点进去看看← 问题: 解答: main.cpp #include <iostream> #include <set> #includ…...

编程日记 2024/9/19 4:10:05

基于stm32的四旋翼无人机控制系统设计系统设计与实现

文章目录 前言资料获取设计介绍功能介绍设计程序 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师&#xff0c;一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业…...

编程日记 2024/9/19 4:07:01

【原理图PCB专题】案例：原理图设计检查为什么要检查全局网络？

本案例发生在新人的PCB设计文件中，当然就算硬件老人们，其实只要不注意也很容易出现这种全局网络乱用的问题。 如下所示是给新人的接口参考图纸，要求使用嘉立创绘制16个相同的接口做一个工装板。同时还要增加单片机实现切换控制功能。可以看到座子的24个管脚中使用到了3.3V、…...

编程日记 2024/9/19 4:06:00

Java 之 IO流

一、IO流概述 在计算机编程中&#xff0c;IO流&#xff08;Input/Output Stream&#xff09;是处理设备间数据传输的关键技术。简单来说&#xff0c;IO流就是以流的方式进行输入输出&#xff0c;数据被当作无结构的字节序或字符序列来处理。在Java等编程语言中&#xff0c;IO流…...

编程日记 2024/9/19 4:03:58

计算机毕业设计 健身房管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…...

编程日记 2024/9/19 4:02:57

uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件

uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件 日历期间、年期间、月期间及时分期间组件在不同的应用场景中发挥着重要的作用。这些组件通常用于表单、应用程序或网站中&#xff0c;以方便用户输入和选择特定的日期和时间范围。以下是这些组件的主要作用&a…...

编程日记 2024/9/19 4:01:55

GAMES101（10~11节，几何）

Geometry implicit隐式几何表示&#xff1a; 函数f(x,y,z)&#xff1a; 根据函数fn描述几何&#xff0c;遍历所有空间内 的点&#xff0c;如果带入xyz到函数f(x,y,z)结果0那就绘制这个点 如果xyz求值结果>0表示在几何外&#xff0c;0在表面,<0在几何内 构造几何csg(…...

编程日记 2024/9/19 4:00:54

家电制造的隐形守护者：矫平机确保材料完美无瑕

在家电制造业中&#xff0c;产品的美观和耐用性是消费者选择的关键因素。然而&#xff0c;在生产过程中&#xff0c;材料的翘曲问题往往成为影响产品质量的隐形杀手。幸运的是&#xff0c;矫平机的出现&#xff0c;为家电制造商提供了一个有效的解决方案&#xff0c;确保每一件…...

编程日记 2024/9/19 3:55:43

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/9/13 17:47:21

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/7/21 15:40:47

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/9/11 12:55:02

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/9/9 10:10:31

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/9/15 20:06:02

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/7/6 12:42:16

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2025/9/2 17:53:12

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/9/9 1:20:43

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2025/9/2 5:09:11