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

vue学习第一阶段

news 2026/5/27 18:30:41

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

【DeepSeek事件驱动架构实战指南】：20年架构师亲授5大核心陷阱与避坑清单

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;DeepSeek事件驱动架构全景认知 DeepSeek事件驱动架构&#xff08;Event-Driven Architecture, EDA&#xff09;并非单一技术组件的堆叠&#xff0c;而是一种以事件为第一公民、强调松耦合与异步协作的系统设计…...

编程新知 2026/5/26 0:42:31

如何让Rhino 3D模型在Blender中保持完整数据：import_3dm插件深度解析

如何让Rhino 3D模型在Blender中保持完整数据&#xff1a;import_3dm插件深度解析 【免费下载链接】import_3dm Blender importer script for Rhinoceros 3D files 项目地址: https://gitcode.com/gh_mirrors/im/import_3dm 当建筑师需要在Blender中渲染Rhino设计的建筑模…...

编程新知 2026/5/26 0:20:12

基于ESP8266与MQTT的家庭水压自动控制系统设计与实现

1. 项目概述与核心需求解析家里水压不稳、供水时断时续&#xff0c;这大概是很多朋友都遇到过的烦心事。我所在的城市供水情况就很不理想&#xff0c;为了解决这个问题&#xff0c;我不得不自己动手&#xff0c;搭建了一套基于ESP8266微控制器的家庭水压增压与储水自动控制系统…...

编程新知 2026/5/25 22:42:37

工业云脑：06 现在就能干：树莓派边缘盒子+PLC，10分钟缺陷检测小案例

06 现在就能干：树莓派边缘盒子+PLC，10分钟缺陷检测小案例 今天第九篇06小节——现在就能干：树莓派边缘盒子+PLC，10分钟缺陷检测小案例。新手照着做10分钟就能跑起来，老手一看就知道这玩意儿省了多少钱。以前想上AI检测，得花几万块买专业边缘盒子；现在？树莓派5（RPi 5）…...

编程新知 2026/5/25 20:28:07

零基础怎么学Agent？这个工程师考试内容拆给你看

站在 AI Agent&#xff08;智能体&#xff09;爆发的十字路口&#xff0c;很多既没有深厚算法背景、也没有丰富写代码经验的“小白”常常感到迷茫&#xff1a;动辄谈及的大模型交互、复杂的业务编排&#xff0c;零基础真的能学会吗&#xff1f; 事实上&#xff0c;智能体开发早…...

编程新知 2026/5/25 19:09:14

AutoWall终极指南：如何在Windows上轻松设置炫酷动态壁纸

AutoWall终极指南&#xff1a;如何在Windows上轻松设置炫酷动态壁纸 【免费下载链接】AutoWall &#x1f30c; Live wallpapers on Windows 7/8/10/11 using open-source wallpaper engine 项目地址: https://gitcode.com/gh_mirrors/au/AutoWall 厌倦了千篇一律的静态桌…...

编程新知 2026/5/25 18:10:15

从数据到模型：手把手教你预处理MPIIFaceGaze和EyeDiap数据集（Python实战）

从数据到模型&#xff1a;手把手教你预处理MPIIFaceGaze和EyeDiap数据集&#xff08;Python实战&#xff09;当你第一次打开MPIIFaceGaze或EyeDiap数据集的压缩包时&#xff0c;那种面对杂乱文件夹和神秘.mat文件的迷茫感&#xff0c;我太熟悉了。作为计算机视觉工程师&#xf…...

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

从脚本到系统：设计一个支持插件、限流、重试与监控的 Python 异步爬虫框架

从脚本到系统&#xff1a;设计一个支持插件、限流、重试与监控的 Python 异步爬虫框架 很多人第一次写 Python 爬虫&#xff0c;都是从几十行脚本开始的&#xff1a;requests.get()、BeautifulSoup、for 循环、保存 CSV。它很快&#xff0c;也很有成就感。但真实项目往往不是“…...

编程新知 2026/5/25 15:50:11

每日一书㉗ | 刻意练习：为什么有些人努力一辈子还是平庸？

“本文来自「乐想屋」公众号&#xff0c;系列更新[每日一书]&#xff0c;每次5分钟&#xff0c;帮你把书读薄&#xff0c;把知识用活”先问你一个问题。你身边有没有这样的人&#xff1a;入行时间比你短&#xff0c;但能力已经甩你好几条街。他们好像没有特别刻苦&#xff0c;但…...

编程新知 2026/5/25 15:26:07

JavaScript语言精粹第三章解读 | 吃透JS对象核心！告别90%日常开发对象Bug

前言 最近重读《JavaScript语言精粹》&#xff0c;复盘JS对象基础的时候&#xff0c;我真的发现了自己多年的编码陋习。 写了好几年前端&#xff0c;每天都在和对象打交道&#xff1a;接口回参解析、页面状态存储、配置项封装&#xff0c;全是{}&#xff0c;看似简单到不值一…...

编程新知 2026/5/25 13:39:44