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

Vue入门到实战之第一篇【超基础】

article 2025/6/9 15:03:38

Vue入门到实战之第一篇

  • 学习路线
  • 1. Vue 概念
    • 1.1 Vue 是什么
  • 2. 创建Vue实例，初始化渲染
  • 3. 插值表达式 {{ }}
  • 4. Vue响应式特性
  • 5. 开发者工具

学习路线

学习章节
学习路线

1. Vue 概念

1.1 Vue 是什么

概念： Vue是一个用于 构建用户界面1 的 渐进式2 框架3

1：基于数据渲染出用户看到的页面
2：循序渐进
3：一套完整的项目解决方案优点: 大大提升开发效率（70%↑）缺点：需要理解记忆规则 → 官网

渐进式

2. 创建Vue实例，初始化渲染

创建Vue实例
开发版本/生产版本
开发版本/生产版本（不下载版）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--创建Vue实例，初始化渲染1. 准备容器（Vue所管理的范围）2. 引包（开发版本包 / 生产版本包）官网 v2:http://v2.cn.vuejs.org/ v3:http://cn.vuejs.org/3. 创建实例4. 添加配置项 => 完成渲染--><div class="box2">box2 -- {{ count }}</div><div class="box">box -- {{msg}}</div>
-------------------------------------------------------------------------
<div id="app"><!-- 这里将来会编写一些用于渲染的代码逻辑 --><h1>{{ msg }}</h1><a href="#">{{ count }}</a>
</div><!-- 引入的是开发版本包 - 包含完整的注释和警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>// 一旦引入 VUEJS核心包，在全局环境，就有了 Vue 构造函数const app = new Vue({// 通过 el 配置选择器，指定 Vue 管理的是哪个盒子el: '#app',//通过 data 提供数据data:{msg: 'Hello 小黑',count: 666}})
</script>
</body>
</html>

示图

3. 插值表达式 {{ }}

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

  1. 作用： 利用表达式进行插值，渲染到页面中
    表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
    示例

  2. 语法： {{ 表达式 }}
    示例

  3. 注意点：
    （1）使用的数据必须存在（data）
    示例
    （2）支持的是表达式。而非语句，比如：if for …
    示例
    （3）不能在标签属性中使用 {{ }} 插值
    示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--插值表达式：Vue的一种模板语法作用：利用表达式 进行插值渲染语法：{{ 表达式 }}注意点：1. 使用的数据要存在2. 支持的表达式。不是语句 if for3. 不能在标签属性中使用 {{}}
-->
<div id="app"><p>{{ nickname }}</p><p>{{ nickname.toUpperCase() }}</p><p>{{ nickname + '你好' }}</p><p>{{ age >= 18 ? '成年' : '未成年' }}</p><p>{{ friend.name }}</p><p>{{ friend.desc }}</p><!---------------------------><!-- <p>{{ hobby }}</p> --><!-- <p>{{ if }}</p> --><!-- <p tittle="{{ nickname }}">我是p标签</p> -->
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el:'#app',data:{nickname: 'tony',age: 18,friend: {name: 'jepson',desc: '热爱学习 Vue'}}})
</script>
</body>
</html>

示例

4. Vue响应式特性

Vue响应式特性描述
数据改变，视图会自动更新
响应式

聚焦于数据 → 数据驱动视图
使用Vue开发，关注业务的核心逻辑，根据业务修改数据即可

响应式数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<div id="app">{{ msg }}{{ count }}
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app', //用于指定容器data: {//响应式数据 → 数据变化了，视图自动更新msg: '你好，黑马',count: 100}})// data中的数据，是会被添加到实例上// 1. 访问数据 实例.属性名// 2. 修改数据 实例.属性名 = 新值
</script>
</body>
</html>

5. 开发者工具

安装Vue开发者工具：装插件调试Vue应用

(1) 通过谷歌应用商店安装（国外网站）
(2) 极简插件：下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件htttps://chrome.zzzmh.cn/index

步骤
打开Vue运行的页面，调试工具中Vue栏，即可查看修改数据，进行调试。
插件使用示图

相关文章：

Vue入门到实战之第一篇【超基础】

Vue入门到实战之第一篇 学习路线1. Vue 概念1.1 Vue 是什么 2. 创建Vue实例&#xff0c;初始化渲染3. 插值表达式 {{ }}4. Vue响应式特性5. 开发者工具 学习路线 1. Vue 概念 1.1 Vue 是什么 概念&#xff1a; Vue是一个用于 构建用户界面1 的 渐进式2 框架3 1&#xff1a;基…...

编程日记 2025/6/9 15:03:38

Selenium自动化操作

1、跳转页面播放视频 我们以b站为例&#xff0c;测试是否可以点击模块进行播放视频 //点击页面看是否视频正常播放public void turn() throws InterruptedException {driver.findElement(By.cssSelector("#i_cecream > div.bili-feed4 > main > div.feed2 >…...

编程日记 2025/6/9 15:02:34

实时数据分析的技术架构：Lambda vs Kappa架构选择

文章目录 引言：实时数据分析架构的重要性Lambda架构深度解析Kappa架构技术特性架构对比分析维度性能与可扩展性评估技术栈选型指南实际应用场景分析成本效益对比模型混合架构与演进策略企业级决策框架最佳实践与案例研究技术趋势与未来展望引言：实时数据分析架构的重要性 在…...

编程日记 2025/6/9 15:01:29

MongoDB慢查询临时开启方法讲解

1、首先连接数据库 mongosh "mongodb://localhost:27017" 2、选择目标数据库 show databases;#显示所有数据库 use lidb;#使用某数据库 3、查看当前分析级别 db.getProfilingStatus() 输出 { was: 0, slowms: 100, sampleRate: 1, ok: 1 } #was0表示关闭&…...

编程日记 2025/6/9 15:00:25

springboot2.x升级springboot3.x

springboot2.x升级springboot3.x 背景升级jdk版本为17以上springboot版本修改javax包更新mybatis-plus升级swagger升级springdocspringdoc配置 背景 当前项目是springboot2.5.9版本的springbootmybatis-plus项目&#xff0c;需要升级到springboot3.5.0项目。 升级jdk版本为17…...

编程日记 2025/6/9 14:59:14

Python训练打卡Day43

复习日 1.卷积神经网络的基本概念 2.kaggle找到一个图像数据集&#xff0c;用cnn网络进行训练并且用grad-cam做可视化 进阶&#xff1a;并拆分成多个文件 tips:注册kaggle的注意事项 安装插件&#xff1a;Header Editor 然后打开扩展选项&#xff1a; 输入网址&#xff1a;ht…...

编程日记 2025/6/9 14:58:08

227.2018年蓝桥杯国赛 - 交换次数（中等）- 贪心

227. 交换次数&#xff08;贪心&#xff09; 1. 2018年蓝桥杯国赛 - 交换次数&#xff08;中等&#xff09; 标签&#xff1a;2018 暴力 国赛 1.1 题目描述 IT 产业人才需求节节攀升。业内巨头百度、阿里巴巴、腾讯&#xff08;简称 BAT &#xff09;在某海滩进行招聘活动。…...

编程日记 2025/6/9 14:57:02

STM32入门学习之系统时钟配置

1. 时钟就是单片机的心脏。单片机根据时钟频率来控制每个部件的工作&#xff0c;时钟是单片机的脉搏&#xff0c;决定了每条命令运行的速率&#xff0c;没有时钟单片机将停止工作。 如何理解“时钟决定了单片机每条命令运行的速率”&#xff1f; 首先需要去理解单片机中的时…...

编程日记 2025/6/9 14:55:52

【ArcGIS Pro微课1000例】0072：如何自动保存编辑内容及保存工程？

文章目录 一、自动保存编辑内容二、自动保存工程在使用ArcGIS或者ArcGIS Pro时，经常会遇到以下报错，无论点击【发送报告】，还是【不发送】，软件都会强制退出，这时如果对所操作没有保存，就会前功尽弃。 此时，自动保存工作就显得尤为重要，接下来讲解两种常见的自动保存方…...

编程日记 2025/6/9 14:54:44

AU音频软件｜Audition 2025网盘下载与安装教程指南

说起AU&#xff0c;有些小伙伴可能第一印象是化学元素金&#xff08;Aurum&#xff09;。实际上&#xff0c;本文要介绍的AU&#xff0c;全称是Adobe Audition&#xff0c;是一款专业音频编辑和混音软件‌&#xff0c;广泛应用于音乐制作、广播、电影及视频声音设计等领域。 目…...

编程日记 2025/6/9 14:53:42

网络编程（TCP编程）

思维导图 1.基础流程 流程图中是TCP连接的基础步骤&#xff0c;其他操作都是在此基础上进行添加修改。 2.函数接口 2.1 创建套接字&#xff08;socket&#xff09; int socket(int domain, int type, int protocol); 头文件&#xff1a;#include <sys/types.h> …...

编程日记 2025/6/9 14:52:32

[论文阅读] 人工智能+软件工程 | 结对编程中的知识转移新图景

当AI成为编程搭档&#xff1a;结对编程中的知识转移新图景 论文信息 论文标题&#xff1a;From Developer Pairs to AI Copilots: A Comparative Study on Knowledge Transfer&#xff08;从开发者结对到AI副驾驶&#xff1a;知识转移的对比研究&#xff09; 作者及机构&#…...

编程日记 2025/6/9 14:51:30

热成像实例分割电力设备数据集（3类，838张）

在现代电力系统的运维管理中&#xff0c;红外热成像已经成为检测设备隐患、预防故障的重要手段。相比传统可见光图像&#xff0c;红外图像可揭示设备温度分布&#xff0c;从而更直观地反映过热、老化等问题。而在AI赋能下&#xff0c;通过实例分割技术对热成像中的电力设备进行…...

编程日记 2025/6/9 14:50:29

用电脑通过USB总线连接控制keysight示波器

通过USB总线控制示波器的优势 在上篇文章我介绍了如何通过网线远程连接keysight示波器&#xff0c;如果连接的距离不是很远&#xff0c;也可以通过USB线将示波器与电脑连接起来&#xff0c;实现对示波器的控制和截图。 在KEYSIGHT示波器DSOX1204A的后端&#xff0c;除了有网口…...

编程日记 2025/6/9 14:49:28

uni-app学习笔记二十四--showLoading和showModal的用法

showLoading(OBJECT) 显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。 OBJECT参数说明 参数类型必填说明平台差异说明titleString是提示的文字内容&#xff0c;显示在loading的下方maskBoolean否是否显示透明蒙层&#xff0c;防止触摸穿透&#xff0c;默…...

编程日记 2025/6/9 14:48:26

基于 React Native for HarmonyOS5 的跨平台组件库开发指南，以及组件示例

基于 React Native for HarmonyOS5 的跨平台组件库开发&#xff0c;需融合分层架构设计、鸿蒙原生能力桥接及性能优化技术&#xff0c;核心指南如下&#xff1a; ‌一、分层架构设计‌ 采用 ‌模块化分层结构‌&#xff0c;隔离平台差异逻辑&#xff1a; ├── common_har …...

编程日记 2025/6/9 14:47:24

【Linux】centos软件安装

目录 Linux下安装软件的办法什么是yum使用yum试着安装软件查看yum源配置额外的第三方库 Linux下安装软件的办法 做为一个操作系统&#xff0c;与win和mac一样&#xff0c;安装软件无可厚非。那Linux下安装软件有哪些办法呢&#xff1f;第一种是直接下载源代码本地编译安装&…...

编程日记 2025/6/9 14:46:23

基于Vue3.0的在线工具网站

文章目录 1、初始化项目1.1 创建项目1.2 安装vue路由1.3 安装UI库2、首页搭建2.0 页面布局2.1 页头2.2 侧边栏2.3 内容显示区域3、字符串加密解密功能实现3.1 页面构建3.2 实现加密/解密4、Json工具4.1 Json格式化4.1.1 搭建页面4.1.2 实现Json格式化4.2 Json转XML4.1.1 搭建页…...

编程日记 2025/6/9 14:44:19

STM32H562----------串口通信(UART)

1、串口介绍 1.1、 数据通信概念 在单片机中我们常用的通信方式有 USART、IIC、SPI、CAN、USB 等； 1、数据通信方式 根据数据通信方式可分为串行通信和并行通信两种，如下图： 串行通信基本特征是数据逐位顺序依次传输，优点：传输线少成本低，抗干扰能力强可用于远距离传…...

编程日记 2025/6/9 14:43:17

C++基础进阶：函数、内联函数与Lambda函数详解

引言 在C编程的旅程中&#xff0c;函数是构建复杂程序的基本单元。它们像乐高积木一样&#xff0c;允许我们将代码分解成更小、更易于管理的部分。今天&#xff0c;我们将深入探讨C中的三种重要函数类型&#xff1a;普通函数、内联函数以及Lambda函数。掌握它们&#xff0c;将…...

编程日记 2025/6/9 14:42:15

大话软工笔记—需求调研的准备

需求调研前需做好充分的准备&#xff1a; 1. 背景资料来源 可以通过企业官网、宣传资料、人员沟通获取客户企业信息。 ​​​​​​​2. 背景资料汇总 根据获得的信息做出一份背景分析报告&#xff0c;主要包含以下内容&#xff1a; 2.1 企业基本信息 企业发展愿景&#…...

编程日记 2025/6/9 14:41:13

如何计算1920*1080分辨率的YUV或RGB图像数据占用大小？

好多开发者在对接大牛直播SDK的时候&#xff0c;经常问到的问题是&#xff0c;1920*1080分辨率的YUV或RGB图像数据&#xff0c;到底多少字节&#xff1f;在音视频图像开发中&#xff0c;19201080&#xff08;即 Full HD&#xff09;是一种极其常见的分辨率。但很多开发者在处理…...

编程日记 2025/6/9 14:40:12

webpack其余配置

webpack搭建本地服务器 首先是要安装一个webpack-dev-server npm install webpack-dev-server -D 安装后在package.json中添加&#xff1a; {"name": "babel_core_demo","version": "1.0.0","main": "index.js"…...

编程日记 2025/6/9 14:39:10

ArkUI-X与Android桥接通信之消息通信

平台桥接用于客户端&#xff08;ArkUI&#xff09;和平台&#xff08;Android或iOS&#xff09;之间传递消息&#xff0c;即用于ArkUI与平台双向数据传递、ArkUI侧调用平台的方法、平台调用ArkUI侧的方法。本文主要介绍Android平台与ArkUI交互&#xff0c;ArkUI侧具体用法请参考…...

编程日记 2025/6/9 14:38:07

【CUDA 】第5章 共享内存和常量内存——5.3减少全局内存访问（2）

CUDA C编程笔记 第五章 共享内存和常量内存5.3 减少全局内存访问5.3.2 使用展开的并行规约思路reduceSmemUnroll4&#xff08;共享内存&#xff09;具体代码&#xff1a;运行结果意外发现书上全局加载事务和全局存储事务和ncu中这两个值相同 5.3.3 动态共享内存的并行规约reduc…...

编程日记 2025/6/9 14:37:04

Python 训练营打卡 Day 46

通道注意力 一、什么是注意力 注意力机制是一种让模型学会「选择性关注重要信息」的特征提取器&#xff0c;就像人类视觉会自动忽略背景&#xff0c;聚焦于图片中的主体&#xff08;如猫、汽车&#xff09;。 transformer中的叫做自注意力机制&#xff0c;他是一种自己学习自…...

编程日记 2025/6/9 14:36:02

MySQL(56)什么是复合索引？

复合索引&#xff08;Composite Index&#xff09;&#xff0c;也称为多列索引&#xff0c;是在数据库表的多列上创建的索引。它可以提高涉及多个列的查询性能&#xff0c;通过组合多个列的值来索引数据。复合索引特别适用于需要同时过滤多列的查询。 复合索引的优点 提高多列…...

编程日记 2025/6/9 14:34:58

Rust学习（1）

声明&#xff1a;学习来源于 《Rust 圣经》 变量的绑定和解构 变量绑定 let a "hello world":这个过程称之为变量绑定。绑定就是把这个对象绑定给一个变量&#xff0c;让这个变量成为它的主人。 变量可变性 Rust 变量默认情况下不可变&#xff0c;可以通过 mut …...

编程日记 2025/6/9 14:33:54

鸿蒙仓颉语言开发实战教程：商城应用个人中心页面

又到了高考的日子&#xff0c;幽蓝君在这里祝各位考生朋友冷静答题&#xff0c;超常发挥。 今天要分享的内容是仓颉语言商城应用的个人中心页面&#xff0c;先看效果图&#xff1a; 下面介绍下这个页面的实现过程。 我们可以先分析下整个页面的布局结构。可以看出它是纵向的布…...

编程日记 2025/6/9 14:32:47

vue3 eslint ts 关闭多单词命名检查

无效做法 import { globalIgnores } from eslint/config import {defineConfigWithVueTs,vueTsConfigs, } from vue/eslint-config-typescript import pluginVue from eslint-plugin-vue import skipFormatting from vue/eslint-config-prettier/skip-formatting// To allow m…...

编程日记 2025/6/9 14:31:40