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

vue2+vue3 HMCXY基础入门

vue2+vue3 HMCXY基础入门

  • 一、Vue2.x技术精讲
    • 1.Vue快速上手
      • (1)Vue概念
      • (2)创建实例
      • (3)插值表达式
      • (4)响应式特性
      • (5)开发者工具
  • 2.Vue指令
  • 二、Vue3.x技术精讲

一、Vue2.x技术精讲

1.Vue快速上手

(1)Vue概念

概念:Vue是一个用于构建用户界面的(基于数据渲染出用户看到的页面)渐进式(循序渐进)框架(一套完整的项目解决方案)
Vue的两种使用方式:

  1. Vue核心包开发
    场景:局部模块改造
  2. Vue 核心包 &Vue 插件工程化开发
    场景:整站开发

优点:大大提升开发效率(70%⬆
缺点:需要理解记忆规则→官网

(2)创建实例

创建实例

(3)插值表达式

插值表达式是一种Vue的模板语法

  1. 作用:利用表达式进行插值,渲染到页面中
    表达式:是可以被求值的代码,JS引擎会将其计算出一个结果
  2. 语法:{{ 表达式 }}
  3. 注意点
    (1)使用的数据必须存在(data)
    (2)支持的是表达式,而非语句,比如:if for …
    (3)不能再标签属性中使用{{ }}插值

(4)响应式特性

Vue核心特性:响应式
我们已经掌握了基础的模板渲染,其实除了基本的模板渲染,Vue背后还做了大量工作。
比如:数据的响应式处理 -> 响应式:数据变化,视图自动更新
如何访问or修改?data中的数据,最终会被添加到实例上
①访问数据:“实例.属性名”
②修改数据:“实例.属性名”=“值”
据变化,视图自动更新
聚焦于数据 → 数据驱动视图
使用Vue开发,关注业务的核心逻辑,根据业务修改数据即可

(5)开发者工具

安装Vue 开发者工具:装插件调试 Vue应用
(1)通过谷歌应用商店安装(国外网站)
(2)极简插件:下载→开发者模式→拖拽安装→插件详情允许访问文件
https://chrome.zzzmh.cn/index
打开Vue运行的页面,调试工具中Vue栏,即可查看修改数据,进行调试。

2.Vue指令

Vue会根据不同的==【指令】,针对标签实现不同的【功能】
指令:带有
v-前缀的特殊标签属性==
v-html
作用:设置元素的innerHTML
语法:v-html = “表达式

v-show
作用:控制元素显示隐藏
语法:V-show = "表达式"表达式值true显示false 隐藏
原理:切换display:none控制显示隐藏
场景:频繁切换显示隐藏的场景

v-if
作用:控制元素显示隐藏(条件渲染
语法: v-if = “表达式” 表达式值 true 显示false 隐藏
原理:基于条件判断,是否创建移除元素节点
场景:要么显示,要么隐藏,不频繁切换的场景

v-else v-else-if
作用:辅助v-if进行判断渲染
语法:v-else v-else-if =“表达式
注意:需要紧挨着v-if一起使用

v-on
作用:注册事件=添加监听 + 提供处理逻辑
语法:
①v-on:事件名=“内联语句”
②v-on:事件名=“methods中的函数名”
简写:@事件名
注意:methods函数内的this 指向Vue实例
v-on调用传参

v-bind
作用:动态的设置html的标签属性 -> src url title …
语法:v-bind:属性名=“表达式”
注意:简写形式:属性名=“表达式”

v-for
作用:基于数据循环,多次渲染整个元素→数组、对象、数字…
遍历数组语法:
v-for = “(item, index) in 数组”
item 每一项,index 下标
省略 index:v-for =“item in 数组”
v-for中的key
语法:key属性="唯一标识"
作用:给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用
v-for的默认行为会尝试原地修改元素就地复用
注意点:

  1. key 的值只能是 字符串数字类型
  2. key 的值必须具有 唯一性
  3. 推荐使用id作为key(唯一),不推荐使用 index作为key(会变化,不对应)

v-model
作用:给 表单元素 使用,双向数据绑定 -> 可以快速获取 或 设置表单元素内容
①数据变化 → 视图自动更新
②视图变化 → 数据自动更新
语法:v-model=‘变量’

二、Vue3.x技术精讲

相关文章:

vue2+vue3 HMCXY基础入门

vue2vue3 HMCXY基础入门 一、Vue2.x技术精讲1.Vue快速上手(1)Vue概念(2)创建实例(3)插值表达式(4)响应式特性(5)开发者工具 2.Vue指令二、Vue3.x技术精讲 一、…...

一次线程数超限导致的hive写入hbase作业失败分析

1.集群配置 操作系统:SuSe操作系统 集群节点:100台相同配置的服务器 单台:核心112Core,内存396G 2.问题现象 现象1:跑单个入库任务报错,批量提交任务后出现OOM异常 执行12个hivesql,将数据写入hbase.hbase入库有近一半的任务报错。 每次报错的任务不是同一个,hivesql…...

ip属地是手机号还是手机位置?一文理清

在数字化和网络化的今天,IP属地这一概念逐渐成为了人们关注的焦点。特别是在社交媒体和在线平台上,IP属地的显示往往让人联想到用户的地理位置。然而,关于IP属地到底与手机号还是手机位置有关,却存在着不少误解和混淆。本文将深入…...

查看设备uuid

在大多数操作系统中,可以通过不同的方式来查看设备的 UUID(Universally Unique Identifier)。以下是一些常见的方法: 在Linux系统中,可以使用命令行工具blkid或lsblk来查看设备的 UUID。例如,执行以下命令…...

C_C++输入输出(下)

C_C输入输出&#xff08;下&#xff09; 用两次循环的问题&#xff1a; 1.一次循环决定打印几行&#xff0c;一次循环决定打印几项 cin是>> cout是<< 字典序是根据字符在字母表中的顺序来比较和排列字符串的&#xff08;字典序的大小就是字符串的大小&#xff09;…...

All in one 的 AI tool Chain “Halomate”

这不算广告啊&#xff0c;就是真好用&#xff0c;虽然是我哥们儿的产品 比如你定了个gpt的plus 订阅&#xff0c;你发现好像有挺多功能 1- chat&#xff0c;这个自不必说&#xff0c;必须的功能 2- 高级语音 现在变成学英语的了&#xff0c;实时视频也就是我过年给姑婶介绍是…...

crewai框架第三方API使用官方RAG工具(pdf,csv,json)

最近在研究调用官方的工具&#xff0c;但官方文档的说明是在是太少了&#xff0c;后来在一个视频里看到了如何配置&#xff0c;记录一下 以PDF RAG Search工具举例&#xff0c;官方文档对于自定义模型的说明如下&#xff1a; 默认情况下&#xff0c;该工具使用 OpenAI 进行嵌…...

脉冲信号傅里叶变换与频域分析:从计算到理解

摘要 本文聚焦于脉冲信号的傅里叶变换&#xff0c;详细推导了矩形脉冲信号和单边指数信号的傅里叶变换过程&#xff0c;深入解释了傅里叶变换结果 F ( ω ) F(\omega) F(ω) 的内涵&#xff0c;包括其定义、物理意义、包含的信息以及在实际应用中的重要性。旨在帮助读者全面掌…...

6.【BUUCTF】[SUCTF 2019]CheckIn

打开题目页面如下 看样子是一道有关文件上传的题 上传一句话木马 显示&#xff1a;非法后缀&#xff01; 看来.php后缀被过滤了 上传一张带有木马的照片 在文件地址处输入cmd 输入以下代码执行 copy 1.jpg/b4.php/a 5.jpg 最后一行有一句话木马 上传带有木马的图片 但其实…...

基于springboot的体质测试数据分析及可视化设计

作者&#xff1a;学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等 文末获取“源码数据库万字文档PPT”&#xff0c;支持远程部署调试、运行安装。 项目包含&#xff1a; 完整源码数据库功能演示视频万字文档PPT 项目编码&#xff1…...

孟加拉国_行政边界省市边界arcgis数据shp格式wgs84坐标

这篇内容将深入探讨孟加拉国的行政边界省市边界数据&#xff0c;该数据是以arcgis的shp格式提供的&#xff0c;并采用WGS84坐标系统。ArcGIS是一款广泛应用于地理信息系统&#xff08;GIS&#xff09;的专业软件&#xff0c;它允许用户处理、分析和展示地理空间数据。在GIS领域…...

可视化相机pose colmap形式的相机内参外参

目录 内参外参转换 可视化相机pose colmap形式的相机内参外参 内参外参转换 def visualize_cameras(cameras, images):fig plt.figure()ax fig.add_subplot(111, projection3d)for image_id, image_data in images.items():qvec image_data[qvec]tvec image_data[tvec]#…...

数据结构 树2

文章目录 前言 一&#xff0c;二叉搜索树的高度 二&#xff0c;广度优先VS深度优先 三&#xff0c;广度优先的代码实现 四&#xff0c;深度优先代码实现 五&#xff0c;判断是否为二叉搜索树 六&#xff0c;删除一个节点 七&#xff0c;二叉收索树的中序后续节点 总结 …...

GB/T 44721-2024 与 L3 自动驾驶:自动驾驶新时代的基石与指引

1.前言 在智能网联汽车飞速发展的当下&#xff0c;自动驾驶技术成为了行业变革的核心驱动力。从最初的辅助驾驶功能&#xff0c;到如今不断迈向高度自动化的征程&#xff0c;每一步都凝聚着技术的创新与突破。而在这一进程中&#xff0c;标准的制定与完善对于自动驾驶技术的规…...

AURIX TC275学习笔记3 官方例程 (UART LED WDT)

文章目录 参考资料1. ASCLIN_UART_12. GPIO_LED_Button_13. WDT (Watch Dog Timer) 参考资料 AURIX TC275学习笔记1 资料收集Getting Started with AURIX™ Development Studio 官方帮助文档happy hacking for TC275! 硬件平台使用AURIX™ TC275 Lite 套件&#xff0c;按照参…...

Vim的基础命令

移动光标 H(左) J(上) K(下) L(右) $ 表示移动到光标所在行的行尾&#xff0c; ^ 表示移动到光标所在行的行首的第一个非空白字符。 0 表示移动到光标所在行的行首。 W 光标向前跳转一个单词 w光标向前跳转一个单词 B光标向后跳转一个单词 b光标向后跳转一个单词 G 移动光标到…...

Linux的简单使用和部署4asszaaa0

一.部署 1 环境搭建方式主要有四种: 1. 直接安装在物理机上.但是Linux桌面使用起来非常不友好.所以不建议.[不推荐]. 2. 使用虚拟机软件,将Linux搭建在虚拟机上.但是由于当前的虚拟机软件(如VMWare之类的)存在⼀些bug,会导致环境上出现各种莫名其妙的问题比较折腾.[非常不推荐…...

Linux 的 sysfs 伪文件系统介绍【用户可以通过文件操作与内核交互(如调用内核函数),而无需编写内核代码】

1. 什么是 sysfs伪文件系统&#xff1f; sysfs 是 Linux 内核提供的 伪文件系统&#xff0c;用于向用户空间暴露内核对象的信息和控制接口。它是 procfs 的补充&#xff0c;主要用于管理 设备、驱动、内核子系统 等信息&#xff0c;使用户可以通过文件操作&#xff08;如用户空…...

每日一题洛谷P5721 【深基4.例6】数字直角三角形c++

#include<iostream> using namespace std; int main() {int n;cin >> n;int t 1;for (int i 0; i < n; i) {for (int j 0; j < n - i; j) {printf("%02d",t);t;}cout << endl;}return 0; }...

计算机网络笔记再战——理解几个经典的协议1

目录 前言 从协议是什么出发 关于TCP/IP协议体系 几个传输方式的分类 地址 网卡 中继器&#xff08;Repeater&#xff09; 网桥&#xff08;Bridge&#xff09; 路由器&#xff08;Router&#xff09; 网关 前言 笔者最近正在整理&#xff08;笔者开的坑不少&#xf…...

别啃书了!用这款70块的Steam游戏《Turing Complete》,手把手带你从逻辑门拼出CPU

从逻辑门到CPU&#xff1a;用《Turing Complete》重构计算机组成原理学习体验 当我在大学第一次翻开《计算机组成原理》教材时&#xff0c;那些密密麻麻的逻辑门符号和抽象的数据通路图让我头皮发麻。直到在Steam上发现标价70元的《Turing Complete》——这款看似简单的电路模拟…...

探索前沿技术趋势:2024年最值得关注的创新应用场景

1. 生成式AI的爆发式应用 2024年最让人兴奋的技术趋势&#xff0c;莫过于生成式AI从实验室走向千家万户。我最近测试了十几个主流AI创作工具&#xff0c;发现它们已经能完成许多过去认为"只有人类能做到"的任务。比如用Midjourney生成产品设计图&#xff0c;只需要简…...

OpenClaw智能书签:用nanobot自动归类收藏网页内容

OpenClaw智能书签&#xff1a;用nanobot自动归类收藏网页内容 1. 为什么需要智能书签 作为一个每天要浏览大量技术文档和行业资讯的开发者&#xff0c;我发现自己陷入了"收藏即学会"的陷阱。Chrome书签栏里堆满了未分类的链接&#xff0c;Notion数据库里散落着零碎…...

开源AI助手竟能自主建频道、做视频?李宏毅深度解析“小龙虾”的神秘工作原理!

最近全网爆火的「养龙虾」到底是什么&#xff1f;为什么一个开源的 AI 助理项目&#xff0c;能让 AI 自己创建 YouTube 频道、自己做教学视频、24 小时自主干活&#xff1f; 台大李宏毅老师的这堂《解剖小龙虾 — 以 OpenClaw 为例介绍 AI Agent 的运作原理》&#xff0c;用最通…...

PhysX帧分配器:一帧一擦的高效艺术

写满就擦&#xff0c;擦完再写&#xff0c;永不停歇引子&#xff1a;数学老师的白板 还记得高中数学课吗&#xff1f; 老师走进教室&#xff0c;面前是一块干干净净的白板。他开始讲解——写公式、画图形、列步骤&#xff0c;白板渐渐被填满。下课铃响&#xff0c;老师拿起板擦…...

AI大模型岗位薪资揭秘:2026大模型岗位薪资,非常详细收藏我这一篇就够了

1. AI系统架构师 薪资范围&#xff1a;100万 - 200万/年 职位要求&#xff1a;需要具备全面的技术背景&#xff0c;精通系统架构设计&#xff0c;能够有效整合AI技术&#xff0c;提升系统性能。要求硕士及以上学历&#xff0c;计算机科学或相关专业背景。 目标院校&#xff1…...

LVGL 7.11.0 Chart控件实战:5分钟搞定动态心率折线图(附完整代码)

LVGL 7.11.0 Chart控件实战&#xff1a;5分钟搞定动态心率折线图&#xff08;附完整代码&#xff09; 在嵌入式设备上实现流畅的数据可视化一直是开发者的痛点。LVGL作为轻量级图形库&#xff0c;其Chart控件能完美解决这一问题。本文将手把手教你用LVGL 7.11.0的Chart控件&am…...

Vivado初始化设计慢?可能是这3个隐藏设置惹的祸

Vivado初始化设计慢&#xff1f;可能是这3个隐藏设置惹的祸 当你在深夜赶项目进度&#xff0c;Vivado却卡在"Initializing Design"界面转圈超过15分钟&#xff0c;那种焦虑感堪比考试时笔没水。作为Xilinx FPGA开发的核心工具&#xff0c;Vivado的初始化速度直接影响…...

根据您提供的写作范围,我为您总结的标题为:“昆通泰MCGS7.7嵌入版:6车位停车场监控系统仿...

6车位停车场监控系统昆通泰MCGS7.7嵌入版仿真运行带运行效果视频6车位停车场监控系统用昆通泰MCGS7.7嵌入版做仿真&#xff0c;真的是新手友好型项目——不用扛硬件、不用接复杂通讯&#xff0c;靠内部变量和几段脚本就能把核心逻辑跑通&#xff0c;还能直观看到实时效果&#…...

【YOLOv11工业级实战】35. DeepStream集成实战——构建高并发视频分析管道

摘要:在智慧交通、智慧工地等工业场景中,多路高清视频的实时分析面临高并发、低延迟、低资源占用的核心诉求。传统PyTorch逐帧推理方案因CPU解码瓶颈、内存拷贝频繁等问题,无法满足500路以上视频流的并发处理需求。本文以NVIDIA DeepStream框架为核心,结合YOLOv11目标检测模…...