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

Vue （v-bind指令、el与data的两种写法、理解MVVM、数据代理、V-no事件处理、双向数据绑定V-model、登陆页面实现

news 2026/2/8 19:43:45

V-bind指令

在这里插入图片描述
在这里插入图片描述

el与data两种写法

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
请添加图片描述

MVVM

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

数据代理

在这里插入图片描述
在这里插入图片描述

V-no事件处理

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
V-no用于监听DOM对象

双向数据绑定V-model

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

下拉选项实例：

<!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" style="font-size: 25px;"><select v-model="selectedOption"><option value="option1">选项1</option><option value="option2">选项2</option><option value="option3">选项3</option></select><p>你选择的选项是: {{ selectedOption }}</p></div><script>new Vue({el: '#app',data: {selectedOption: 'option1'}});</script>
</body></html>

<!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>
<style>.father_box {background-color: rgb(231, 168, 168);width: 800px;height: 800px;margin: auto;border-radius: 50px}.head_box {/* background-color: aqua; */height: 100px;width: 400px;margin: auto;font-size: 60px;color: black;font-style: italic;text-align: center;}.center_box {/* background-color: aqua; */width: 500px;height: 500px;margin: auto;}input {width: 300px;height: 40px;position: relative;left: 100px;border: 1px solid black;background-color: rgb(255, 255, 255);font-family: Arial, Helvetica, sans-serif;border-radius: 5px;padding: 5px;margin: 10px;font-size: 20px;}
</style><body><div class="father_box" id="father"><div class="head_box">请登录</div><div class="center_box"><div> <label for="username">账号：</label><input type="text" id="username" v-model="userName"></div><div> <label for="password">密码：</label><input type="password" id="password" v-model="passWord"></div><button style="font-size: 25px; " v-on:click="save"> 登录</button></div></div></body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>new Vue({el: '#father',data() {return {userName: "",passWord: "",}},methods: {save() {localStorage.setItem('username', this.userName);localStorage.setItem('password', this.passWord);}},mounted() {this.userName = localStorage.getItem('username');this.passWord = localStorage.getItem('password');}})
</script></html>

相关文章：

Vue （v-bind指令、el与data的两种写法、理解MVVM、数据代理、V-no事件处理、双向数据绑定V-model、登陆页面实现

V-bind指令 el与data两种写法 MVVM 数据代理 V-no事件处理 V-no用于监听DOM对象 双向数据绑定V-model v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定&#xff0c;根据表单上的值&#xff0c;自动更新绑定的元素的值。 按钮的…...

编程日记 2024/1/22 22:19:47

SpringBoot - SpringBoot手写模拟SpringBoot启动过程

依赖 建一个工程&#xff0c;两个Module: 1. springboot模块&#xff0c;表示springboot框架的源码实现 2. user包&#xff0c;表示用户业务系统&#xff0c;用来写业务代码来测试我们所模拟出来的SpringBoot 首先&#xff0c;SpringBoot是基于的Spring&#xff0c;所以我…...

编程日记 2024/1/22 22:16:43

40. 组合总和 II - 力扣（LeetCode）

题目描述 给定一个候选人编号的集合 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用 一次 。 注意&#xff1a;解集不能包含重复的组合。 输入示例 candidates [10,1,2,7,…...

编程日记 2024/1/22 22:15:42

第15届蓝桥杯嵌入式省赛准备第二天总结笔记(使用STM32cubeMX创建hal库工程+按键输入)

一.查看电路图 按键是使用的PB0,PB1,PB2,PA0四个引脚&#xff0c;然后使用CubeMX配置引脚&#xff0c;4个脚都配置为输入模式和上拉。 程序生成之后把不用的删掉&#xff0c;需要的留下&#xff0c;这里我把函数名改了。 然后写按键扫描读取程序&#xff0c;这里参考的正点原子…...

编程日记 2024/1/22 22:11:38

【论文阅读】One For All: Toward Training One Graph Model for All Classification Tasks

目录 0、基本信息1、研究动机2、创新点——One For All &#xff1a;unique features3、准备4、具体实现4.1、用TAGs统一来自不同领域的图数据4.2、用NOI&#xff08;NODES-OF-INTEREST&#xff09;统一不同图任务4.2.1、NOI子图4.2.2、NOI提示结点 4.3、用于图的上下文学习&am…...

编程日记 2024/1/22 22:10:37

Python多线程爬虫——数据分析项目实现详解

前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;https://www.captainbed.cn/z 「个人网站」&#xff1a;雪碧的个人网站 ChatGPT体验地址 文章目录 前言爬虫获取cookie网站爬取与启动CS…...

编程日记 2024/1/22 22:04:32

unity全局音量管理/全局音量设置与音量设置界面（含静音功能）

前言 本文将会介绍如何使用audiomixer实现全局音量控制&#xff0c;并且会介绍如何实现游戏内的含静音功能的音量设置界面。 本人也是个初学者&#xff0c;在看过一些关于音量管理的教程后&#xff0c;发现使用audiomixer实现全局音量控制可能是最方便、功能最完备、强大的&a…...

编程日记 2024/1/22 22:03:31

C++ vector 数组转换、查找、最大最小值、排序、排行的几种用法

C vector中常用到排序、取最值&#xff0c;一些场景可能还会要计算某个元素的排行&#xff0c;以下就是一些实际例子&#xff0c;精简、有效。 【1】会涉及到数组转vector&#xff1a; vector<int> v(arr, arr N); // N为数组size&#xff0c;可用sizeof(arr)/sizeof(i…...

编程日记 2024/1/22 21:59:26

vmware 安装Rocky-9.3系统

安装系统截图 安装完成&#xff0c;启动 查看版本和内核 开启远程登陆授权 1、编辑配置文件 #提升权限&#xff0c;输入su,并输入密码 su #编辑ssh文件开启root远程登陆 vi /etc/ssh/sshd_config找到以下内容&#xff1a;#PermitRootLogin prohibit-password 添加&#xff1a…...

编程日记 2024/1/22 21:57:24

C++提高编程——模板

本专栏记录C学习过程包括C基础以及数据结构和算法&#xff0c;其中第一部分计划时间一个月&#xff0c;主要跟着黑马视频教程&#xff0c;学习路线如下&#xff0c;不定时更新&#xff0c;欢迎关注。 当前章节处于&#xff1a; ---------第1阶段-C基础入门 ---------第2阶段实战…...

编程日记 2024/1/22 21:56:23

单线程、同步、异步、预解析、作用域、隐式全局变量、对象创建、new

单线程 进程 cpu 资源分配的最小单位一个进程可以有多个线程 线程 cpu调度的最小单位线程建立在进程的建立基础上的一次程序的运行单位 线程分为&#xff1a;单线程 多线程 单线程&#xff1a;js是单线程 &#xff08;同一个时间只能完成一个任务&#xff09;多线程&…...

编程日记 2024/1/22 21:53:21

《设计模式的艺术》笔记 - 外观模式

介绍 外观模式中外部与一个子系统的通信通过一个统一的外观角色进行&#xff0c;为子系统中的一组接口提供一个一致的入口。外观模式定义了一个高层接口&#xff0c;这个接口使得子系统更加容易使用。外观模式又称为门面模式&#xff0c;它是一种对象结构型模式。 实现 myclas…...

编程日记 2024/1/22 21:49:16

sql 查询时间范围内的数据

要查询特定时间范围内的数据&#xff0c;您可以使用 SQL 中的 BETWEEN 运算符。以下是一个示例查询&#xff0c;它从名为 your_table 的表中检索在 start_date 和 end_date 之间创建的所有记录&#xff1a; SELECT * FROM your_table WHERE created_date BETWEEN start_date AN…...

编程日记 2024/1/22 21:48:15

TestNG中的@BeforeSuite注释

目录 什么是BeforeSuite注解&#xff1f; BeforeSuite带注释的方法何时执行&#xff1f; BeforeSuite annotation有什么用&#xff1f; 所以&#xff0c;是时候集思广益了 我们可以在一个类中使用多个BeforeSuite注释方法吗&#xff1f; BeforeSuite放在超类上时如何工作…...

编程日记 2024/1/22 21:43:10

[学习笔记]刘知远团队大模型技术与交叉应用L3-Transformer_and_PLMs

RNN存在信息瓶颈的问题。 注意力机制的核心就是在decoder的每一步&#xff0c;都把encoder的所有向量提供给decoder模型。 具体的例子 先获得encoder隐向量的一个注意力分数。 注意力机制的各种变体 一&#xff1a;直接点积 二&#xff1a;中间乘以一个矩阵 三&#xff1a;…...

编程日记 2024/1/22 21:42:09

图像处理工具包Pillow的使用分享

Pillow 是 Python 中一个流行的图像处理库&#xff0c;它是 PIL&#xff08;Python Imaging Library&#xff09;的一个友好的分支版本。Pillow 提供了许多功能&#xff0c;使得图像处理变得容易和方便。下面是一些基本用法和示例&#xff1a; 安装 Pillow 首先&#xff0c;你…...

编程日记 2024/1/22 21:39:07

python进程间通信——命名管道（Named Pipe、FIFO）

文章目录 Python中的命名管道&#xff1a;深入理解进程间通信1. 命名管道简介2. 创建和删除命名管道3. 写入命名管道4. 读取命名管道5. 示例&#xff1a;进程间通信write_to_pipe.pyread_from_pipe.py测试运行 6. 注意事项和限制命名管道的半双工机制命名管道读写任意一方未打开…...

编程日记 2024/1/22 21:36:04

03 OSPF 学习大纲

参考文章 1 初步认识OSPF的大致内容(第三课)-CSDN博客 2...

编程日记 2024/1/22 21:35:04

HJ7 取近似值【C语言】

【华为机试题 HJ7】取近似值 描述输入描述：输出描述：示例1示例2参考代码1参考代码2参考代码3描述 写出一个程序，接受一个正浮点数值，输出该数值的近似整数值。如果小数点后数值大于等于 0.5 ,向上取整；小于 0.5 ，则向下取整。 数据范围：保证输入的数字在 32 位浮点数范…...

编程日记 2024/1/22 21:34:02

php基础学习之常量

php常量的基本概念 常量是在程序运行中的一种不可改变的量&#xff08;数据&#xff09;&#xff0c;常量一旦定义&#xff0c;通常不可改变&#xff08;用户级别&#xff09;。 php常量的定义形式 使用define函数&#xff1a;define("常量名字", 常量值);使用cons…...

编程日记 2024/1/22 21:31:00

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2026/2/8 16:24:38

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2026/1/16 16:34:26

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2026/1/24 14:31:01

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2026/1/9 19:36:58

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2026/2/7 11:01:56

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/12/23 11:20:24

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2026/1/29 17:54:05

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2026/2/4 16:13:50