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

vue学习第一阶段

news 2025/11/14 7:25:15

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

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2025/11/13 15:03:43

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2025/11/7 20:35:32

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/7/28 21:04:40

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/9/22 18:49:24

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2025/11/8 10:11:29

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2025/11/12 16:59:20

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2025/11/12 18:52:40

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/9/23 8:19:28

MySQL：分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

编程新知 2025/11/13 17:07:10

macOS 终端智能代理检测

&#x1f9e0; 终端智能代理检测&#xff1a;自动判断是否需要设置代理访问 GitHub 在开发中&#xff0c;使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新&#xff0c;例如&#xff1a; fatal: unable to access https://github.com/ohmyzsh/oh…...

编程新知 2025/11/9 11:08:19