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

vue学习第一阶段

news 2026/5/27 17:24:33

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

Unity UGUI轻量UI框架：200行代码实现零GC界面管理

1. 为什么还要自己手写UI框架&#xff1f;——当UGUI原生方案开始“卡脖子”很多人看到这个标题第一反应是&#xff1a;“都2024年了&#xff0c;还手写UI框架&#xff1f;Asset Store里几十个成熟方案&#xff0c;NGUI、FairyGUI、TextMeshPro配套的UI系统一抓一大把&#xff…...

编程新知 2026/5/26 4:16:13

Agent开发面试通关攻略：吃透稳拿offer

阅读前置&#xff1a;2026年当下最卷也最缺人的AI岗位&#xff0c;一定是AI Agent开发。最近刷遍CSDN、牛客、力扣最新面经&#xff0c;发现一个非常明显的招聘趋势&#xff1a;普通大模型微调岗位饱和内卷&#xff0c;而AI Agent开发岗位人才严重缺口&#xff0c;薪资更高、竞…...

编程新知 2026/5/26 1:51:13

森优时铁锌维发根养黑用三个月真实效果实测：内服营养养黑的客观测评

"森优时铁锌维发根养黑用三个月真实效果实测显示&#xff0c;针对压力、熬夜引发的早白问题&#xff0c;通过内服补充毛囊所需营养的方式&#xff0c;多数使用者能感受到发根韧性提升、新生发色素沉淀改善&#xff0c;整体改善效果因人而异&#xff0c;合规的营养补充是目…...

编程新知 2026/5/26 1:29:07

嘈杂工业场景下的自适应VAD与双码本声纹识别鉴权系统：基于端侧轻量化神经网络与向量量化（VQ）重构

在大型化工车间、能源集控中心以及金融极密隔离库房中&#xff0c;离线声纹识别是物理访问控制和身份安全核验的重要生物特征屏障。然而&#xff0c;在环境本底噪声高达80dB以上的恶劣工业场景下&#xff0c;常规的语音活动检测&#xff08;VAD&#xff09;会频繁误触&#xff…...

编程新知 2026/5/26 1:09:00

pan-baidu-download：百度网盘多线程下载加速器架构解析与性能优化指南

pan-baidu-download&#xff1a;百度网盘多线程下载加速器架构解析与性能优化指南 【免费下载链接】pan-baidu-download 百度网盘下载脚本 项目地址: https://gitcode.com/gh_mirrors/pa/pan-baidu-download pan-baidu-download是一款基于Python开发的百度网盘命令行下载…...

编程新知 2026/5/25 23:59:47

什么情况下会核销贷款

贷款核销的核心前提是&#xff1a;贷款被认定为 “损失类” 且经 “穷尽追偿” 仍无法收回&#xff0c;银行按监管与会计规则从账面冲销&#xff0c;但债权不消灭、仍可追偿。一、核心认定条件&#xff08;满足其一即可&#xff09;破产 / 注销 / 吊销&#xff1a;借款人和担保…...

编程新知 2026/5/25 21:01:15

3分钟告别英文恐惧：Android Studio中文界面轻松切换指南

3分钟告别英文恐惧&#xff1a;Android Studio中文界面轻松切换指南 【免费下载链接】AndroidStudioChineseLanguagePack AndroidStudio中文插件(官方修改版本&#xff09; 项目地址: https://gitcode.com/gh_mirrors/an/AndroidStudioChineseLanguagePack 你是否曾经因…...

编程新知 2026/5/25 20:11:59

基于Arduino与433MHz射频的智能灯光定时系统设计与实现

1. 项目概述&#xff1a;告别机械定时器&#xff0c;打造智能灯光管家家里前后院的照明&#xff0c;还有出门度假时屋内的几盏灯&#xff0c;过去一直靠四个老旧的机械定时器来管理。说实话&#xff0c;这玩意儿用起来真是费劲。它的核心问题在于“死板”——你设定好晚上7点开…...

编程新知 2026/5/25 18:08:09

终极STL到STEP转换指南：如何实现3D打印模型到CAD设计的无缝衔接

终极STL到STEP转换指南&#xff1a;如何实现3D打印模型到CAD设计的无缝衔接 【免费下载链接】stltostp Convert stl files to STEP brep files 项目地址: https://gitcode.com/gh_mirrors/st/stltostp 在数字化制造和工程设计领域&#xff0c;STL到STEP转换已成为连接3D…...

编程新知 2026/5/25 17:21:50

树莓派Zero离线语音交互实战：TTS与STT引擎部署与优化

1. 项目概述&#xff1a;为什么选择树莓派 Zero 来实现语音功能&#xff1f;如果你玩过 Arduino、ESP32 这类微控制器&#xff0c;也接触过树莓派 4B 这样的单板电脑&#xff0c;那你大概能理解那种“选择困难症”&#xff1a;微控制器实时性强、功耗低&#xff0c;但算力有限&…...

编程新知 2026/5/25 17:17:23