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

Vue的简单入门三

news 来源：原创 2025/8/30 8:15:00

侦听器

watch

注意

表单输入绑定

v-model

v-model修饰符编辑

lazy

number

Trim

模板引用

组件组成

组件引用三步走

组件的嵌套关系

Main

Aside

Aritice

Item

App.vue组件引入三个子组件

组件的注册方式

全局注册组件的方法

(1) Vue 2 语法

(2) Vue 3 语法

侦听器

watch

<template><h3>侦听器</h3><button @click="chanage">修改值</button><p>{{message}}</p>
</template>
<script>
export default{data(){return{message:"Hello!"//响应式数据：数据一旦修改，页面得到相应。}},methods:{chanage(){this.message="World!"}},watch: {// 监视 message 属性的变化message(newValue, oldValue) {// 数据发生变化时，自动执行的函数。（两次修改的值相同则不算变化）console.log(newValue, oldValue);if (newValue === oldValue) {// 实际上，由于 Vue 的响应式系统，如果新旧值相同，这个 watch 函数通常不会被触发。// 所以，这个 alert 理论上应该不会出现。alert("两次值相同"); // 在正常情况下不可能执行} else {alert("值发生了变化");}}
}
}
</script>

运行效果：当点击修改值的按钮时，调用修改值的函数，触发监听事件，弹窗提示。

注意

监听器函数名必须与侦听的数据对象保持一致

表单输入绑定

v-model

在前端处理表单时，我们常常需要将表单输入框的内容同步给JavaScript中相应的变量。手动连接值绑定和更改事件监听器会很麻烦，v-model指令帮我们简化了这一步骤。

<template><h3>表单输入绑定</h3><from><input type="text" v-model="message"><p>{{message}}</p></from>
</template>
<script>
export default{data(){return{message:""}}
}
</script>

运行效果：文本框内输入的文本与下面的文本同步更新。

复选框示例：

<template><h3>表单输入绑定</h3><from><input type="text" v-model="message"><p>{{message}}</p><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{checked}}</label></from>
</template>
<script>
export default{data(){return{message:"",checked:true}}
}
</script>

运行效果：点击复选框时，若勾选则右侧变为true

v-model修饰符

lazy

失去焦点时才会触发

<template><h3>表单输入绑定</h3><from><input type="text" v-model.lazy="message"><p>{{message}}</p><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{checked}}</label></from>
</template>
<script>
export default{data(){return{message:"",checked:true}}
}
</script>

运行效果：输入aaaa后，文本框失去焦点，或者按下回车键，<p>{{message}}</p>将会显现。

number

作用是将用户输入的内容自动转换为数值类型（Number）

不同输入场景的效果

(1) 输入有效数字

输入内容："123.45"
绑定结果：123.45（Number 类型）

(2) 输入无效内容（非数值开头）

输入内容："abc123"
绑定结果："abc123"（String 类型）

(3) 输入混合内容（数值开头）

输入内容："123abc"
绑定结果：123（Number 类型，仅提取开头的有效数字部分）

(4) 输入空值

输入内容：""（空字符串）
绑定结果：""（String 类型）

严格数字输入：
如果需要强制用户输入纯数字，建议结合 <input type="number"> 或使用第三方库（如 vue-input-number）。

Trim

去掉前后空格在输入框内前后输入空格时，会自动去除

模板引用

内容改变：{{模板语法}}

属性改变：v-bind：指令

事件：v-on:click

<template><h3>模板引用</h3><div  ref="container" class="container">容器</div><button @click="getelementhandle">获取元素</button>
</template><script>
export default {data(){return{content:"内容"}},methods:{getelementhandle(){console.log(this.$refs.container)console.log(this.$refs.container.innerHTML='hhh')}}
}
</script>

运行效果：点击获取元素按钮时，触发函数，执行操作第一句是在控制台打印该标签，第二句将标签内的值改为hhh,并打印该值。

组件组成

组件最大的优势就是可复用性

组件组成：

Template：承载所有的HTML标签的 html

Script：用来承载所有的业务逻辑 js

Style：所有的样式 css

组件引用三步走

<template>
<!-- 第三步：显示组件 -->
<mycomponnet/>
<mycomponnet/>
</template><script >
//第一步：引入组件
import mycomponnet from "./components/testexport.vue"
export default{//第二部：注入组件components:{mycomponnet}
}
</script>
<!-- <script setup>
import mycomponnet from "./components/testexport.vue"
</script> --><style></style>

在<style scoped>中scoped的作用是：生效作用域，只在当前组件内生效。否则就是全局样式。

组件的嵌套关系

下面代码将完成以上效果：

<template><h3>Header</h3>
</template>
<script>
export default{data(){return{}}
}
</script>
<style scoped>
h3{border: 5px solid black;width: 100%;height: 100px;text-align: center;box-sizing: border-box;line-height: 100px;
}
</style>

Main

<template><div class="main"><h3>Main</h3><Aritice/><Aritice/></div></template><script>
import Aritice from './aritice.vue';
export default{components:{Aritice}
}
</script>
<style scoped>
.main{float: left;border: 5px solid black;width: 70%;height: 600px;text-align: center;box-sizing: border-box;line-height: 100px;
}
</style>

Aside

<template><div class="aside"><h3>Aside</h3><item/><item/><item/></div></template>
<script>
import Item from './item.vue';export default{components:{Item},data(){return{}}
}
</script>
<style scoped>
.aside{float: right;border: 5px solid black;width: 28%;height: 600px;text-align: center;box-sizing: border-box;line-height: 100px;
}
</style>

Aritice

<template><h3>Aritice</h3>
</template>
<script>
export default{data(){return{}}
}
</script>
<style scoped>
h3{width: 80%;margin: 0 auto;text-align: center;line-height: 100px;box-sizing: border-box;margin-top: 50px;background: #999;
}
</style>

Item

<template><h3>item</h3>
</template>
<script>
export default{data(){return{}}
}
</script>
<style scoped>
h3{width: 80%;margin: 0 auto;text-align: center;line-height: 100px;box-sizing: border-box;margin-top: 50px;background: #999;
}
</style>

App.vue组件引入三个子组件

<template>
<Header/>
<Aside/>
<Main/></template><script >
import Aside from "./components/pages/aside.vue";
import Header from "./components/pages/header.vue"
import Main from "./components/pages/main.vue";
export default{components:{Header,Main,Aside}
}
</script>

文件结构

运行效果如图

组件的注册方式

一个VUE组件在使用前需要被注册，这样vue才能在渲染模块时找到其对应的实现。

组件的注册有两种方式：全局注册和局部注册。

全局注册组件的方法

(1) Vue 2 语法

在 main.js 或入口文件中使用 Vue.component()：

import Vue from 'vue';
import MyComponent from '@/components/MyComponent.vue';// 全局注册组件
Vue.component('MyComponent', MyComponent);new Vue({render: h => h(App),
}).$mount('#app');

(2) Vue 3 语法

在 main.js 中通过 app.component() 注册：

import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from '@/components/MyComponent.vue';const app = createApp(App);// 全局注册组件
app.component('MyComponent', MyComponent);app.mount('#app');

Vue的简单入门三

目录侦听器 watch 注意表单输入绑定 v-model v-model修饰符编辑 lazy number Trim 模板引用组件组成组件引用三步走组件的嵌套关系 header Main Aside Aritice Item App.vue组件引入三个子组件组件的注册方式全局注册组件的方法 (1) Vue 2 语…...

编程日记 2025/8/30 8:15:00

kotlin的val声明的变量是常量吗

kotlin的val声明的变量是常量吗 DeepSeek R1 思考 65 秒思考过程嗯，用户问的是Kotlin中的val声明的变量是不是常量。首先我需要回忆一下Kotlin的基础知识。记得在Kotlin里，val用来声明只读变量，也就是说一旦赋值之后就不能再重新赋值了。…...

编程日记 2025/8/29 3:54:27

C# | 委托 | 事件 | 异步

委托（Delegate）和事件（Event） 在C#和C中，委托（Delegate）与事件（Event）以及函数对象（Function Object）是实现回调机制或传递行为的重要工具。虽然…...

编程日记 2025/8/29 16:08:47

算法日记33：14届蓝桥C++B冶炼金属（二分答案）

一、题目： 二、题解： 1、思路解析： 1）首先我们可以发现题目的样例数量为（ n < 1000 n<1000 n<1000），因此我们可以考虑 O ( n ∗ l o g n ) O(n*log^n) O(n∗logn)时间复杂度的算法 …...

编程日记 2025/8/29 8:53:42

【YOLO V5】目标检测 WSL2 AutoDL VScode SSH

【YOLO V5】目标检测 WSL2 AutoDL VScode SSH 前言整体思路理解向YOLO 目标检测完整流程环境配置Anaconda 获取 YOLO 代码与预训练模型下载 YOLOv5 代码和预训练模型配置 YOLOV5 工程环境解压 YOLOv5 源代码并添加预训练模型调整依赖版本选择对应的 Python 解释器数据集准备…...

编程日记 2025/8/29 18:37:40

前端基础之ajax

vue-cli配置代理服务器解决跨域问题我们可以使用一个代理服务器8080，Vue项目8080发送请求向代理服务器8080发送请求，再由在理服务器转发给后端服务器首先需要在vue.config.js中配置代理服务器 const { defineConfig } require(vue/cli-service) modul…...

编程日记 2025/8/30 6:31:20

vscode离线配置远程服务器

目录一、前提二、方法 2.1 查看vscode的commit_id 2.2 下载linux服务器安装包 2.3 安装包上传到远程服务器，并进行文件解压缩三、常见错误 Failed to set up socket for dynamic port forward to remote port（vscode报错解决方法）-C…...

编程日记 2025/8/30 3:25:48

C语言——string.h下的特殊库函数

string.h下的特殊函数 strtok(分割字符串）strerror(错误码信息）memcpy(拷贝）memmove(拷贝）memset(设置内存）memcmp(比较大小） strtok(分割字符串） char * strtok ( char * str, const char * s…...

编程日记 2025/8/29 18:52:10

烟花燃放安全管控：智能分析网关V4烟火检测技术保障安全

一、方案背景在中国诸多传统节日的缤纷画卷中，烟花盛放、烧纸祭祀承载着人们的深厚情感。一方面，烟花璀璨，是对节日欢庆氛围的热烈烘托，寄托着大家对美好生活的向往与期许；另一方面，袅袅青烟、点点烛光&a…...

编程日记 2025/8/28 9:13:16

【一个月备战蓝桥算法】递归与递推

字典序在刷题和计算机科学领域，字典序（Lexicographical order）也称为词典序、字典顺序、字母序，是一种对序列元素进行排序的方式，它模仿了字典中单词的排序规则。下面从不同的数据类型来详细解释字典序： …...

编程日记 2025/8/26 2:38:47

二、Java-封装playwright UI自动化(根据官网执行步骤，首先封装BrowserFactory枚举类及BrowserManager)

前言查看playwright官网，api文档了解到，playwright的基本步骤： 1、实例化一个playwright 2、启动一个浏览器类型 3、打开一个页面所以，在封装时需要有一个浏览器工厂类，定义不同的浏览器类型，在配置文…...

编程日记 2025/8/27 13:00:10

java项目之基于ssm的在线视频网站开发（源码+文档）

项目简介基于ssm的在线视频网站开发实现了以下功能： 该系统的目标用户包括管理员，用户。管理员上传视频，管理视频，查看视频留言，回复视频留言，管理视频收藏信息，管理公告，管理用户…...

编程日记 2025/8/29 16:46:21

观察者模式的C++实现示例

核心思想观察者模式是一种行为型设计模式，定义了对象之间的一对多依赖关系。当一个对象（称为Subject，主题）的状态发生改变时，所有依赖于它的对象（称为Observer，观察者）都会自动收到…...

编程日记 2025/8/28 1:56:43

c语言中的主要知识点

一、基础语法与结构程序结构包含顺序结构、选择结构（if/switch）、循环结构（for/while/do-while）。程序必须包含且仅有一个main函数作为入口。数据类型与变量基本类型：整型（int、long）、浮…...

编程日记 2025/8/29 12:03:51

Pytorch构建LeNet进行MNIST识别 #自用

LeNet是一种经典的卷积神经网络（CNN）结构，由Yann LeCun等人在1998年提出，主要用于手写数字识别（如MNIST数据集）。作为最早的实用化卷积神经网络，LeNet为现代深度学习模型奠定了基础，…...

编程日记 2025/8/29 19:32:40

docker：Dockerfile案例之自定义centos7镜像

1 案例需求自定义centos7镜像。要求： 默认登录路径为 /usr可以使用vim 2 实施步骤编写dockerfile脚本 vim centos_dockerfile 内容如下： #定义父镜像 FROM centos:7#定义作者信息 MAINTAINER handsome <handsomehandsome.com># 设置阿里云…...

编程日记 2025/8/30 5:25:21

post get 给后端传参数

post 方式一 ： data: params 作为请求体（Request Body）传递： 你已经展示了这种方式，通过data字段直接传递一个对象或数组。这种方式通常用于传递复杂的数据结构。dowmfrom: function (params) { return request({ u…...

编程日记 2025/8/27 8:16:34

Linux 系统不同分类的操作命令区别

Linux 系统有多种发行版，每种发行版都有其独特的操作命令和工具。以下是一些常见的分类及其操作命令的区别： 1. 基于 Red Hat 的发行版 (RHEL, CentOS, Fedora) 1.1 包管理安装软件包： bash复制 sudo yum install <package> 更新软件包： bash复制 sudo yum update…...

编程日记 2025/8/28 9:29:07

Checkpoint 模型与Stable Diffusion XL（SDXL）模型的区别

Checkpoint 模型与 Stable Diffusion XL（SDXL）模型在功能、架构和应用场景上有显著区别，以下是主要差异的总结： 1. 基础架构与定位 Checkpoint 模型是基于 Stable Diffusion 官方基础模型（如 SD 1.4/1.5）…...

编程日记 2025/8/29 18:45:22

软件工程与实践（第4版新形态）练习与实践1

软件工程与实践（第4版新形态） 练习与实践1 1.填空题 (1)程序，文档 (2)系统软件，支撑软件，应用软件 (3)系统方法 (4)软件开发和维护 (5)工程的概念、原理、技术和方法 (6)实现软件的优质高产 (7)软件开发技术和…...

编程日记 2025/8/28 16:44:05

探秘基带算法：从原理到5G时代的通信变革【九】QPSK调制/解调

文章目录 2.8 QPSK 调制 / 解调简介QPSK 发射机的实现与原理QPSK 接收机的实现与原理QPSK 性能仿真QPSK 变体分析本博客为系列博客，主要讲解各基带算法的原理与应用，包括：viterbi解码、Turbo编解码、Polar编解码、CORDIC算法、CRC校验、FFT/…...

编程日记 2025/8/30 0:43:58

侯捷 C++ 课程学习笔记：深入理解智能指针

文章目录每日一句正能量一、引言二、智能指针的核心概念（一）std::unique_ptr（二）std::shared_ptr（三）std::weak_ptr 三、学习心得四、实际应用案例五、总结每日一句正能量如果说幸福是一个悖论&#xff…...

编程日记 2025/8/30 3:42:01

基于Qwen-VL的手机智能体开发

先上Demo： vl_agent_demo 代码如下： 0 设置工作目录： 你的工作目录需要如下： 其中utils文件夹和qwenvl_agent.py均参考自 GitHub - QwenLM/Qwen2.5-VL: Qwen2.5-VL is the multimodal large language model series developed by …...

编程日记 2025/8/29 12:09:35

系统盘还原成正常U盘

选择格式化,等格式化完毕就完了点击还原设备的默认值格式化就完了...

编程日记 2025/8/16 12:10:49

Leetcode 103: 二叉树的锯齿形层序遍历

Leetcode 103: 二叉树的锯齿形层序遍历问题描述： 给定一个二叉树，返回其节点值的锯齿形层序遍历（即第一层从左到右，第二层从右到左，第三层从左到右，依此类推）。适合面试的解法：广…...

编程日记 2025/8/29 11:29:50

FastGPT 引申：基于 Python 版本实现 Java 版本 RRF

文章目录 FastGPT 引申：基于 Python 版本实现 Java 版本 RRF函数定义使用示例 FastGPT 引申：基于 Python 版本实现 Java 版本 RRF 函数定义使用 Java 实现 RRF 相关的两个函数：合并结果、过滤结果 import java.util.*;// 搜索结果类型定义…...

编程日记 2025/8/29 21:32:24

C++中的无锁编程

引言在当今多核处理器普及的时代，并发编程已成为高性能应用程序开发的关键技术。传统的基于锁的同步机制虽然使用简单，但往往会带来性能瓶颈和死锁风险。无锁编程（Lock-Free Programming）作为一种先进的并发编程范式&#xff0c…...

编程日记 2025/8/28 7:45:17

【全栈开发】---- 一文掌握 Websocket 原理，并用 Django 框架实现

目录介绍底层原理握手环节详解： 收发数据（加密） Django 中配置 channels 1、注册 channels 2、在 settings.py 中添加 asgi_application 3、修改 asgi.py 文件 4、routing 5、consumers 实现聊天室介绍 WebSocket是一种先进的通信协议&…...

编程日记 2025/8/28 14:04:36

游戏引擎学习第135天

仓库:https://gitee.com/mrxiao_com/2d_game_3 回顾 game_asset.cpp 的创建在开发过程中，不使用任何现成的游戏引擎或第三方库，而是直接基于 Windows 进行开发，因为 Windows 目前仍然是游戏的标准平台，因此首先在这个环境中进行…...

编程日记 2025/8/16 12:03:39

国内支持Stable Diffusion模型的平台

国内支持Stable Diffusion模型的平台截至2025年3月，国内支持SD模型的平台主要包括以下六类，覆盖不同用户需求和技术层级： 一、模型分享与下载平台 Liblib.ai 描述：国内最大SD原创模型社区，提供海量基础模型、Lora…...

编程日记 2025/8/29 15:09:46

扣子（Coze）：重构AI时代的工作流革命

文章目录扣子（Coze）：重构AI时代的工作流革命使用Coze：一、工作流的本质：从单点智能到系统智能二、扣子工作流的技术基因三、场景化实践：从知识库到智能员工四、未来图景：AI Agent的进化之路结语…...

编程日记 2025/8/28 19:09:44

alloc、malloc 与 allocator：内存管理三剑客

内存管理是C语言开发者的核心能力，也是系统级编程的基石。一、内存分配三剑客：malloc/calloc/realloc 1. malloc函数原理 int* arr (int*)malloc(5 * sizeof(int)); // 分配20字节空间（假设int为4字节） 从堆区分配指定字节的连…...

编程日记 2025/8/29 3:45:04

单细胞分析（21）——SCENIC 分析流程（singularity容器版）

SCENIC 分析流程笔记 SCENIC (Single-Cell rEgulatory Network Inference and Clustering) 是一种基于单细胞 RNA 测序数据的调控网络分析方法，主要用于识别调控因子（TFs）及其靶基因（Regulons），并评估这些…...

编程日记 2025/8/29 6:49:38

亚马逊云科技Marketplace（中国区）上架专业服务产品， “云生态连接器”价值凸显

近日，由西云数据运营的亚马逊云科技Marketplace（中国区）正式支持专业服务产品。此次发布将大幅简化企业对云专业服务的采购流程，实现云软件从规划、部署到支持的全生命周期管理，同时也为合作伙伴提供了更多的销售机会。…...

编程日记 2025/8/30 3:25:07

拉普拉斯·隆格·楞次矢量

L − R − L L-R-L L−R−L 矢量的推导有平方反比有心力： F ⃗ − k r 2 r ^ \vec F-\dfrac{k}{r^2}\hat r F −r2kr^ 显然角动量 L ⃗ r ⃗ p ⃗ \vec L\vec r\times \vec p L r p 守恒。故 ∣ L ⃗ ∣ Const \begin{vmatrix}\vec L\end{vmatrix}\…...

编程日记 2025/8/29 13:59:29

GStreamer —— 2.3、Windows下Qt加载GStreamer库后运行 - “教程3:动态管道“（附：完整源码）

运行效果（音频） 简介上一个教程演示了GStreamer 概念。本教程中的管在它设置为 playing 状态之前完全构建。这没关系。如果我们没有采取进一步的行动，数据会到达 pipeline 的 pipeline 和 pipeline 将生成错误消息并停止。但我们将采取进一…...

编程日记 2025/8/27 2:38:24

jupyter notebook更改文件存储路径

默认情况打开是这样的进入cmd或者Anaconda Prompt，输入以下命令 jupyter notebook --generate-config进入该目录打开该文件，CTRLF 查找c.ServerApp.root_dir 进行修改。这样就修改好啦！...

编程日记 2025/8/25 13:21:21

基于遗传算法的无人机三维路径规划仿真步骤详解

基于遗传算法的无人机三维路径规划仿真步骤详解一、问题定义目标：在三维空间内，寻找从起点到终点的最优路径，需满足：避障：避开所有障碍物。路径最短：总飞行距离尽可能短。平滑性：转折角度不宜过大，降低机动能耗。输入：三维地图（含障碍物，如立方体、圆柱体）。起…...

编程日记 2025/8/28 20:29:35

①EtherCAT转Modbus485RTU网关多路同步高速采集无需编程串口服务器

EtherCAT转Modbus485RTU网关多路同步高速采集无需编程串口服务器https://item.taobao.com/item.htm?ftt&id798036415719 型号 1路总线EC网关 MS-A2-1011 2路总线EC网关 MS-A2-1021 4路总线EC网关 MS-A2-1041 EtherCAT 串口网关 EtherCAT 转 RS485 技术规格 …...

编程日记 2025/8/28 1:40:06

Spring Boot WebFlux 中 WebSocket 生命周期解析

Spring Boot WebFlux 中的 WebSocket 提供了一种高效、异步的方式来处理客户端与服务器之间的双向通信。WebSocket 连接的生命周期包括连接建立、消息传输、连接关闭以及资源清理等过程。此外，为了确保 WebSocket 连接的稳定性和可靠性，我们可以加入重试…...

编程日记 2025/8/29 1:16:41

集合论之集合的表示法

目录 1. 说明 2. 常用表示法 2.1 枚举法(Roster Notation) 2.2 构建法(Set-builder notation) 3. 其它表示法 1. 说明要表示一个集合，可以直接列出其元素，或者提供一种可以唯一地刻画其元素的方当。 2. 常用表示法 2.1 枚举法(Roster Notatio…...

编程日记 2025/8/30 7:28:33