【VUE】快速上手
一、快速上手
- 创建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的语法编写代码…...
在 Docker 中部署无头 Chrome:在 Browserless 中运行
什么是 Browserless? Browserless 是一款基于云的浏览器解决方案,旨在实现高效的浏览器自动化、网页抓取和测试。 它利用 Nstbrowser 的指纹库,实现随机指纹切换,确保流畅的数据收集和自动化。得益于其强大的云基础设施…...
Meta-Learning数学原理
文章目录 什么是元学习元学习的目标元学习的类型数学推导1. 传统机器学习的数学表述2. 元学习的基本思想3. MAML 算法推导3.1 元任务设置3.2 内层优化:任务级别学习3.3 外层优化:元级别学习3.4 元梯度计算3.5 最终更新规则 4. 算法合并5. 理解 MAML 的优…...
【图像匹配】基于SURF算法的图像匹配,matlab实现
博主简介:matlab图像代码项目合作(扣扣:3249726188) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 本次案例是基于基于SURF算法的图像匹配,用matlab实现。 一、案例背景和算法介绍 前…...
RocketMQ实战与集群架构详解
目录 一、MQ简介 MQ的作用主要有以下三个方面 二、RocketMQ产品特点 1、RocketMQ介绍 2、RocketMQ特点 三、RocketMQ实战 1、快速搭建RocketMQ服务 2、快速实现消息收发 1. 命令行快速实现消息收发 2. 搭建Maven客户端项目 3、搭建RocketMQ可视化管理服务 4、升级分…...
docker容器中的内存占用高的问题分析
文章目录 问题描述原因分析分析1分析2验证猜想 结论和经验 问题描述 运维新增对某服务的监控后发现:内存不断上涨的现象。进一步确认,是因为有多个导出日志操作导致的内存上涨问题。 进一步的测试得出的结果是:容器刚启动是占用内存约为50M…...
纯血鸿蒙NEXT常用的几个官方网站
一、官方文档 https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/Readme-CN.md刚入门查看最多的就是UI开发模块,首先要熟悉组件使用 二、官方API参考 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/development-i…...
A股上市公司企业创新能力、质量、效率-原始数据+dofile+结果(2006-2023年)
上市公司的创新能力体现在其不断研发新技术、新产品和服务的能力上,这是企业保持竞争优势的关键;质量则是指公司所提供的产品或服务达到高标准的程度,高质量是赢得客户信任和市场份额的基础;效率则涵盖了生产运营中的资源利用程度…...
Selenium:开源自动化测试框架的Java实战解析
背景 在软件开发领域,随着Web应用程序的日益复杂和快速迭代的需求,传统的手动测试方法已经无法满足高效、全面的测试需求。自动化测试作为一种高效、稳定的测试手段,逐渐成为软件开发流程中不可或缺的一环。Selenium,作为一款开源…...
搜索功能技术方案
1. 背景与需求分析 门户平台需要实现对服务信息的高效查询,包括通过关键字搜索服务以及基于地理位置进行服务搜索。面对未来可能的数据增长和性能需求,选择使用 Elasticsearch 来替代 MySQL 的全文检索功能。这一选择的背景与需求可以总结为以下几点&am…...
硬件体系架构的学习
硬件体系架构的学习 RISC全称Reduced Instruction Set Compute,精简指令集计算机; CISC全称Complex Instruction Set Computers,复杂指令集计算机。 SOC片上系统概念 System on Chip,简称Soc,也即片上系统。从狭义…...
【与C++的邂逅】--- C++的IO流
Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏: 与C的邂逅 本篇博客我们来了解C中io流的相关知识。 🏠 C语言输入输出 C语言中我们用到的最频繁的输入输出方式就是scanf ()与printf()。 sc…...
【C++ Primer Plus习题】16.8
大家好,这里是国中之林! ❥前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。有兴趣的可以点点进去看看← 问题: 解答: main.cpp #include <iostream> #include <set> #includ…...
基于stm32的四旋翼无人机控制系统设计系统设计与实现
文章目录 前言资料获取设计介绍功能介绍设计程序 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业…...
【原理图PCB专题】案例:原理图设计检查为什么要检查全局网络?
本案例发生在新人的PCB设计文件中,当然就算硬件老人们,其实只要不注意也很容易出现这种全局网络乱用的问题。 如下所示是给新人的接口参考图纸,要求使用嘉立创绘制16个相同的接口做一个工装板。同时还要增加单片机实现切换控制功能。可以看到座子的24个管脚中使用到了3.3V、…...
Java 之 IO流
一、IO流概述 在计算机编程中,IO流(Input/Output Stream)是处理设备间数据传输的关键技术。简单来说,IO流就是以流的方式进行输入输出,数据被当作无结构的字节序或字符序列来处理。在Java等编程语言中,IO流…...
计算机毕业设计 健身房管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…...
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件 日历期间、年期间、月期间及时分期间组件在不同的应用场景中发挥着重要的作用。这些组件通常用于表单、应用程序或网站中,以方便用户输入和选择特定的日期和时间范围。以下是这些组件的主要作用&a…...
GAMES101(10~11节,几何)
Geometry implicit隐式几何表示: 函数f(x,y,z): 根据函数fn描述几何,遍历所有空间内 的点,如果带入xyz到函数f(x,y,z)结果0那就绘制这个点 如果xyz求值结果>0表示在几何外,0在表面,<0在几何内 构造几何csg(…...
家电制造的隐形守护者:矫平机确保材料完美无瑕
在家电制造业中,产品的美观和耐用性是消费者选择的关键因素。然而,在生产过程中,材料的翘曲问题往往成为影响产品质量的隐形杀手。幸运的是,矫平机的出现,为家电制造商提供了一个有效的解决方案,确保每一件…...
T型翼/尾板导向的穿浪双体船姿态控制【附代码】
✨ 长期致力于穿浪双体船、T型翼、尾板、多自由度姿态控制、舒适性评估研究工作,擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流,点击《获取方式》 (1)动态水翼升力模型与耦合运动方…...
Taurus多执行器对比实战:JMeter/Gatling/Locust统一压测方案
1. 为什么选Taurus做多执行器对比——不是为了炫技,而是为了少踩坑在性能测试领域,我见过太多团队卡在“选型”这一步:刚招来一个会写JMeter脚本的工程师,项目突然要压测WebSocket接口,发现JMeter原生支持弱、插件维护…...
Godot中型项目工程化实践:目录规范、资源引用与状态管理
1. 这不是续集,而是项目落地的分水岭“Godot 游戏引擎项目(二)”——看到这个标题,很多人第一反应是:“哦,上一篇讲了环境搭建和Hello World,这篇该讲节点树和信号了?”但我在带三个…...
基于Arduino的模块化DIY智能时钟:从RTC到RGB LED的完整实现
1. 项目概述:打造一台高度可定制的DIY RGB LED时钟如果你和我一样,对市面上千篇一律的电子钟感到审美疲劳,同时又对Arduino和电子DIY充满热情,那么这个项目可能就是为你准备的。我们不是在简单地组装一个套件,而是在亲…...
基于可解释机器学习的城市人口流动空间降尺度分析实践
1. 项目概述:从宏观到微观,解码城市脉搏在城市的肌理中,人口的流动如同血液的循环,承载着经济活力、社会互动与空间结构的全部信息。无论是城市规划师优化公交线路,还是商业分析师评估店铺选址,亦或是公共卫…...
Windows终极PDF处理工具:3步免费安装Poppler完整指南
Windows终极PDF处理工具:3步免费安装Poppler完整指南 【免费下载链接】poppler-windows Download Poppler binaries packaged for Windows with dependencies 项目地址: https://gitcode.com/gh_mirrors/po/poppler-windows 你是否曾经为在Windows上处理PDF文…...
AI学习 - 大模型基础入门
AI学习 - 大模型基础入门 从零开始:Ollama 安装 → 本地模型运行 → Python 代码接入 → 理解核心概念 摘要 本文记录了在 Windows 上使用 Ollama 部署本地大模型、并通过 Python 代码接入调用的完整过程。内容涵盖:Ollama 安装与模型拉取、大模型基础概…...
MeloTTS实战:多语言语音合成的高效解决方案
MeloTTS实战:多语言语音合成的高效解决方案 【免费下载链接】MeloTTS High-quality multi-lingual text-to-speech library by MyShell.ai. Support English, Spanish, French, Chinese, Japanese and Korean. 项目地址: https://gitcode.com/GitHub_Trending/me/…...
别再只用递归了!用C语言栈实现非递归快速排序,内存效率提升实战
从递归到迭代:C语言栈实现非递归快速排序的工程实践 在嵌入式开发和大规模数据处理场景中,递归实现的快速排序常常面临栈溢出风险。当排序10万个元素的数组时,递归深度可能达到log₂100000≈17层,在仅有2KB栈空间的STM32F103上极易…...
Unity塔防底层架构:ScriptableObject驱动的数据契约设计
1. 这不是“又一个塔防模板”,而是塔防开发的底层操作系统我第一次在Asset Store点开Tower Defense Toolkit 4(TDTK-4)的预览图时,下意识划走了——界面太“干净”了,没有炫酷的粒子特效演示,没有满屏飞舞的…...
