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

vue学习第一阶段

news 文章来源：https://blog.csdn.net/qq_43712538/article/details/144429644 2025/5/5 0:38:50

vue

在这里插入图片描述

什么是Vue？

概念：Vue是一个构建用户页面的渐进式框架

Vue的两种使用方式

  • Vue的核心开发 场景： 局部 {\color{red}局部} 局部模块改造
  • Vue核心包& Vue插件 工程化开发场景： 整站 {\color{red}整站} 整站开发

Vue2官网

https://v2.cn.vuejs.org/

资料存放地址

D:\BaiduNetdiskDownload\2、最新Vue2+3 入门到实战课程

echarts官网

https://echarts.apache.org/zh/index.html

layui官网

http://layui.xhcen.com/

课件保留地址

D:\BaiduNetdiskDownload\2、最新Vue2+3 入门到实战课程

在这里插入图片描述

一、创建vue实例

在这里插入图片描述

​

1.创建html
2.引入vue依赖
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>创建一个Vue实例</title>
</head>
<body>
<!--创建Vue实例，初始化渲染1.准备容器（Vue所有管理的范围）2.引包(开发版本包/生产版本包)官网3.创建实例4.添加配置-》完成渲染
-->
<div id="app"><!--这里将来会编写用于渲染的代码逻辑    --><h1>{{ msg }}</h1><h2>{{name}}</h2><h3>{{age}}</h3>
</div><!-- 开发环境版本，包含了有帮助的命令行警告 (不可以写成：<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"/>)-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>//一旦引入了VueJS核心包，在全局环境下，就有了Vue构造函数const app = new Vue({//通过el配置选择器，指定Vue管理的是哪个盒子el: '#app',//通过data提供数据data: {msg:'Hello 黑马',name: 'lzp',age: 18}});
</script>
</body>
</html>

二、插值表达式

在这里插入图片描述

三、Vue响应特性

在这里插入图片描述

在这里插入图片描述

四、Vue指令

语法糖：

1、保留两位小数

在这里插入图片描述

2、document.querySelector(‘p’)

通过标签名选择元素，允许你通过提供一个 CSS 选择器来选择文档中的第一个匹配的元素。这个函数返回匹配的元素（如果找到了匹配项），否则返回 null。document.querySelector 是一个非常有用的方法，因为它让你可以通过多种选择器轻松地选择和操作 DOM 元素。

  • value.slice(0, 1)，value.slice(1)：截取字符

  • v-html:设置元素的innerHTML，语法：v-html=“表达式”

  • v-show：控制元素的显示隐藏， t r u e : 显示， f a l s e ：隐藏 {\color{red}true:显示，false：隐藏} true:显示，false：隐藏，底层原理切换css的display：none来控制显示隐藏，使用场景，频繁切换显示隐藏的场景

  • v-if：控制元素的显示隐藏（条件渲染 t r u e : 显示， f a l s e ：隐藏 {\color{red}true:显示，false：隐藏}

相关文章：

vue学习第一阶段

vue 什么是Vue？ 概念：Vue是一个构建用户页面的渐进式框架 Vue的两种使用方式 Vue的核心开发 场景： 局部 {\color{red}局部} 局部模块改造Vue核心包& Vue插件 工程化开发场景： 整站 {\color{red}整站} 整站开发Vue2官网 https://v2.cn.vuejs.org/ 资料存放地址 D:\Baidu…...

编程日记 2025/1/5 0:00:54

React虚拟DOM：理解和应用

写在前面 在现代前端开发中&#xff0c;React 是一个非常流行的 JavaScript 库&#xff0c;用于构建用户界面。它引入了一个名为“虚拟 DOM”&#xff08;Virtual DOM&#xff09;的概念&#xff0c;这个概念对于 React 的高效性能和易用性至关重要。本文将深入探讨 React Vir…...

编程日记 2025/1/4 23:56:51

用python编写一个放烟花的小程序

import pygame import random # 代码解释及使用说明&#xff1a; # 首先&#xff0c;导入 pygame 和 random 库。pygame 用于创建游戏窗口和图形绘制&#xff0c;random 用于生成随机数。 # 初始化 pygame&#xff0c;并设置屏幕尺寸为 800x600 像素&#xff0c;设置窗口标题为…...

编程日记 2025/1/4 23:52:48

Git 仓库与文件管理笔记

Git 的三种仓库概念 本地仓库 (Local Repository) 位于本地 .git 文件夹中通过 git init 或 git clone 创建存储完整的项目历史和分支信息 远程仓库 (Remote Repository) 位于 GitHub、GitLab 等平台服务器使用 git remote -v 查看所有远程仓库默认远程仓库名通常为 origin 工…...

编程日记 2025/1/4 23:50:46

2024 年 docker 提示index.docker.io

发现 docker 提示以下错误&#xff1a; Error response from daemon: Get "https://index.docker.io/v1/search?qnginx&n25": dialing index.docker.io:443 container via direct connection because has no HTTPS proxy: connecting to index.docker.io:443:…...

编程日记 2025/1/4 23:49:45

TCP粘/拆包----自定义消息协议

今天是2024年12月31日&#xff0c;今年的最后一天&#xff0c;希望所有的努力在新的一年会有回报。❀ 无路可退&#xff0c;放弃很难&#xff0c;坚持很酷 TCP传输 是一种面向二进制的&#xff0c;流的传输。在传输过程中最大的问题是消息之间的边界不明确。而在服务端主要的…...

编程日记 2025/1/4 23:48:43

Modbus知识详解

Modbus知识详解 ## 1.什么是Modbus?**顾名思义**&#xff0c;它是一个Bus&#xff08;总线&#xff09;&#xff0c;即总线协议。比如串口协议、IIC协议、SPI都是通信协议。你接触到这种协议&#xff0c;相信你所处的行业是工业电子方面或者你的产品用于工业。好了&#xff0c…...

编程日记 2025/1/4 23:45:40

Java-创建一个结合CompletableFuture和自定义功能的工具类

1.重试机制：当异步任务失败时自动重试。 2.超时重试：在指定时间内未完成的任务进行重试。 3.批量处理：将多个任务批量执行并收集结果。 4.日志记录：为每个异步任务添加日志记录，便于调试和监控。 5.自定义线程池：允许用户传入自定义的线程池配置。 import java.util…...

编程日记 2025/1/4 23:44:39

【MATLAB第111期】基于MATLAB的sobol全局敏感性分析方法二阶指数计算

【MATLAB第111期】基于MATLAB的sobol全局敏感性分析方法二阶指数计算 一、简介 在MATLAB中计算Sobol二阶效应指数通常涉及到全局敏感性分析&#xff08;Global Sensitivity Analysis, GSA&#xff09;&#xff0c;其中Sobol方法是一种流行的技术&#xff0c;用于评估模型输入…...

编程日记 2025/1/4 23:43:38

C语言-sprintf

sprintf是一个在C语言中用于字符串格式化的函数&#xff0c;其功能是将格式化的数据写入某个字符串中。该函数定义stdio.h在头文件中&#xff0c;原型为: int sprintf(char *string, const char *format, ...); 函数参数 ‌ string‌&#xff1a;指向一个字符数组的指针&#…...

编程日记 2025/1/4 23:42:37

APM 3.0.2 | 聚合B站、油管和MF的音乐播放器，支持歌词匹配

APM&#xff08;Azusa-Player-Mobile&#xff09;是一款基于B站的第三方音频播放器&#xff0c;现已扩展支持YouTube Music、YouTube、本地音乐、AList和MusicFree等平台。它不仅提供视频作为音频播放&#xff0c;还具备排行榜、分区动态等功能。用户可以通过添加Alist地址接入…...

编程日记 2025/1/4 23:41:36

Mono 和 IL2Cpp的区别

Mono特征: 标准项目中有Assembly-CSharp.dll , 但在更复杂的项目或特定配置中,可能会有其他.dll或结构变更 在游戏的数据目录下看到一系列的.dll文件,这些文件的语言一般为中间语言 CE附加 , 查看是否有Mono.dll相关模块 目录有MonoBleedingEdge文件夹 IL2Cpp 标准项目应该…...

编程日记 2025/1/4 23:40:35

力扣第389题—找不同

class Solution:def findTheDifference(self, s: str, t: str) -> str:# 对字符串 s 和 t 进行排序a sorted(s)b sorted(t)# 比较排序后的两个列表for i in range(len(a)):if a[i] ! b[i]:return b[i]# 如果前面的比较没有找到差异&#xff0c;那么差异字符在 t 的最后一个…...

编程日记 2025/1/4 23:36:31

我的桌面 1.9.75 | 个性化定制手机桌面，丰富的小组件和主题

我的桌面iScreen是一款万能桌面小组件APP&#xff0c;提供各种高颜值桌面主题与创意小组件自由组合。支持X面板、照片、待办清单、时钟、日历等实用有趣的小组件。拥有超过500种小组件供选择&#xff0c;包括灵动面板、滚动相册等&#xff0c;搭配300多种精美主题和高清壁纸&am…...

编程日记 2025/1/4 23:34:29

【Java项目】基于SpringBoot的【垃圾分类系统】

【Java项目】基于SpringBoot的【垃圾分类系统】 技术简介&#xff1a;本系统使用采用B/S架构、Spring Boot框架、MYSQL数据库进行开发设计。 系统简介&#xff1a;使用者分为管理员和用户、垃圾分类管理员&#xff0c;实现功能包括管理员&#xff1a;首页、个人中心、用户管理、…...

编程日记 2025/1/4 23:31:24

生成埃里克卡特曼人工智能语音听起来像他或配音视频

您是《南方公园》和迷人角色埃里克卡特曼的忠实粉丝吗&#xff1f;您是否渴望获得标志性的埃里克卡特曼 AI 语音&#xff0c;将他的动画魅力融入到您的数字内容、游戏或流媒体体验中&#xff1f;如果答案是肯定的&#xff0c;那么您来对地方了&#xff01; 在本文中&#xff0…...

编程日记 2025/1/4 23:30:22

C语言中的va_list

目录 1. 可变参数函数&#xff08;Variadic Function&#xff09; 2. va_list 及相关宏 3. va_list 的用途 4. 与 printf、vsnprintf 等函数的关系 5. 在实际场景中的示例 5.1 API_SendAtCommandParam 函数 5.2 va_arg 直接取参数 6. 常见问题 7. 结论 在 C 语言中&am…...

编程日记 2025/1/4 23:26:18

idea无法安装插件

目录 修改工具配置 本地安装 无法下载很多时候就是延迟太高导致的&#xff0c;我们先打开插件官网看一下 Python - IntelliJ IDEs Plugin | Marketplace 修改工具配置 1、配置代理&#xff08;点击 setting-点击 plugins-在点击 http proxy Settings&#xff09; 输入&…...

编程日记 2025/1/4 23:22:14

智汇厦门：苏哒智能携其智能化产品亮相文心中国行现场

2025年1月2日&#xff0c;文心中国行再次踏足美丽的鹭岛厦门。 本次的文心中国行活动不仅有来自政府、高校及企业的精英专家将齐聚一堂&#xff0c;分享AI与大模型的最新研究成果&#xff0c;还正式揭牌百度飞桨&#xff08;厦门&#xff09;人工智能产业赋能中心&#xff0c;…...

编程日记 2025/1/4 23:20:12

C++函数模板的定义为何要和调用点放在一起

在C中&#xff0c;模板的声明最好和调用放在一起&#xff0c;或者确保编译器在进行模板实例化时能看到模板完整的定义&#xff0c;主要有以下几方面原因&#xff1a; 一、模板实例化机制的需求 编译时实例化特点 C模板是在编译阶段根据实际使用时传入的类型参数进行实例化&am…...

编程日记 2025/1/4 23:18:09

Nginx - 整合lua 实现对POST请求的参数拦截校验(不使用Openresty)

文章目录 概述步骤 1: 安装 Nginx 和 Lua 模块步骤 2: 创建 Lua 脚本用于参数校验步骤 3: 配置 Nginx 使用 Lua 脚本写法二&#xff1a; 状态码写法三 &#xff1a; 返回自定义JSON复杂的正则校验 步骤 4: 测试和验证ngx.HTTP_* 枚举值 概述 一个不使用 OpenResty 的 Nginx 集…...

编程日记 2025/1/4 23:14:01

互联网直播点播平台EasyDSS无人机视频推拉流技术实现工地远程监控巡检直播

在建筑行业&#xff0c;施工现场的安全管理和实时监控一直是项目管理中的重点。随着技术的进步&#xff0c;无人机工地直播技术成为了一种新兴的解决方案&#xff0c;它不仅能够提高施工透明度&#xff0c;还能够加强现场安全管理。EasyDSS作为一种先进的流媒体技术平台&#x…...

编程日记 2025/1/4 23:13:00

Unity3D 基于GraphView实现的节点编辑器框架详解

前言 在Unity3D游戏开发中&#xff0c;节点编辑器是一种强大的工具&#xff0c;它允许开发者以可视化的方式创建和编辑复杂的逻辑和流程。Unity提供了一个强大的UI工具包——GraphView&#xff0c;它使得创建自定义节点编辑器变得相对简单。本文将详细介绍如何使用GraphView实…...

编程日记 2025/1/4 23:10:57

【C++】开源：Armadillo数值计算库配置与使用

😏★,:.☆(￣▽￣)/$:.★ 😏 这篇文章主要介绍Armadillo数值计算库配置与使用。 无专精则不能成，无涉猎则不能通。——梁启超 欢迎来到我的博客，一起学习，共同进步。 喜欢的朋友可以关注一下，下次更新不迷路🥞 文章目录 :smirk:1. Armadillo介绍:blush:2. 环境配置:s…...

编程日记 2025/1/4 23:09:56

HackMyVM-Airbind靶机的测试报告

目录 一、测试环境 1、系统环境 2、使用工具/软件 二、测试目的 三、操作过程 1、信息搜集 2、Getshell 3、提权 使用ipv6绕过iptables 四、结论 一、测试环境 1、系统环境 渗透机&#xff1a;kali2021.1(192.168.101.127) 靶 机&#xff1a;debian(192.168.101.11…...

编程日记 2025/1/4 23:08:53

C语言----函数

目录 1. 定义&#xff1a; 2.三要素 3.格式 4. 函数声明 5. 函数调用 6.函数传参 6.1. 值传递 6.2. 地址传递 6.3. 数组传递 string函数族 1.strcpy 2. strlen 3. strcat 4.strcmp 递归函数 1. 定义&#xff1a; 一个完成特定功能的代码模块 2.三要素 功能、…...

编程日记 2025/1/4 23:07:52

MySQL图形化界面工具--DataGrip

之前介绍了在命令行进行操作&#xff0c;但是不够直观&#xff0c;本次介绍图形化界面工具–DataGrip。 安装DataGrip 官网链接&#xff1a;官网下载链接 常规的软件安装流程。 参考链接&#xff1a;DataGrip安装 使用DataGrip 添加数据源&#xff1a; 第一次使用最下面会…...

编程日记 2025/1/4 23:06:51

PyTorch AMP 混合精度中grad_scaler.py的scale函数解析

PyTorch AMP 混合精度中的 scale 函数解析 混合精度训练&#xff08;AMP, Automatic Mixed Precision&#xff09;是深度学习中常用的技术&#xff0c;用于提升训练效率并减少显存占用。在 PyTorch 的 AMP 模块中&#xff0c;GradScaler 类负责动态调整和管理损失缩放因子&…...

编程日记 2025/1/4 23:05:49

【Ubuntu20.04】Apollo10.0 Docker容器部署+常见错误解决

官方参考文档【点击我】 Apollo 10.0 版本开始&#xff0c;支持本机和Docker容器两种部署方式。 如果您使用本机部署方式&#xff0c;建议使用x86_64架构的Ubuntu 22.04操作系统或者aarch64架构的Ubuntu 20.04操作系统。 如果您使用Docker容器部署方式&#xff0c;可以使用x…...

编程日记 2025/1/4 23:04:48

【文献精读笔记】Explainability for Large Language Models: A Survey （大语言模型的可解释性综述）（二）

****非斜体正文为原文献内容&#xff08;也包含笔者的补充&#xff09;&#xff0c;灰色块中是对文章细节的进一步详细解释&#xff01; 3.1.2 基于注意力的解释&#xff08;Attention-Based Explanation&#xff09; 注意力机制可以揭示输入数据中各个部分之间的关系&#…...

编程日记 2025/1/4 23:02:44