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 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。
按钮的事件我们可以使用 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/642750.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

激光雷达行业梳理1-概述、市场、技术路线

激光雷达作为现代精确测距和感知技术的关键组成部分&#xff0c;在近几年里取得了令人瞩目的发展。作为自动驾驶感知层面的重要一环&#xff0c;相较摄像头、毫米波雷达等其他传感器具有“ 精准、快速、高效作业”的巨大优势&#xff0c;已成为自动驾驶的主传感器之一&#xff…

网络安全的概述

网络空间的概念 2003年美国提出网络空间的概念&#xff1a;一个由信息基础设施组成的互相依赖的网络。 我国官方文件定义&#xff1a;网络空间为继海&#xff0c;陆&#xff0c;空&#xff0c;天以外的第五大人类活动领域 网络安全发展历史 通信保密阶段 --- 计算机安全阶段…

API接口安全总结

接口分类 HTTP接口 RPC接口&#xff08;客户端和服务器端的连接 例如游戏登陆&#xff09;非web协议&#xff0c;PRC 远程过程调用 Remote Procedure Call&#xff0c;其就是一个节点请求另外一个节点提供的服务。当两个物理分离的子系统需要建立逻辑上的关联时&#xff0c;R…

1 认识微服务

1.认识微服务 随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢&#xff1f; 1.0.学习目标 了解微服务架构的优缺点 1.1.单体架构 单体架构&#xff1a;将业务的所有…

k8s集群异常恢复

前提、我自己的k8s采用的是单master节点两个从节点部署&#xff0c;我针对单master情况进行恢复说明 场景一&#xff1a;正常开关虚拟机&#xff0c;可直接重启kubelet进行恢复 1、1、一般重启后三个节点都需要检查&#xff0c;输入命令检查kubelet&#xff1a; systemctl s…

时限挑战——深度解析Pytest插件 pytest-timeout

在软件开发中,测试用例的执行时间通常是一个关键考虑因素。Pytest插件 pytest-timeout 提供了一个强大的插件,允许你设置测试用例的超时时间。本文将深入介绍 pytest-timeout 插件的基本用法和实际案例,助你精确掌控测试用例的执行时限。 什么是pytest-timeout? pytest-tim…

python环境安装sklearn及报错解决

安装 如刚开始安装&#xff0c;还未遇到问题请直接从重新安装库开始看&#xff0c;如果遇到报错&#xff0c;从问题开始看 问题 python安装sklearn报错 &#xff0c;报错信息如下 File "<stdin>", line 1pip install scikit-learn^ SyntaxError: invalid s…

第7章 7.6.5 常量指针 Page406~407

const可以限制指针指向的数据&#xff0c;也可以限制指针的指向 const限制指针指向的数据&#xff0c;不可以修改指向的数据&#xff0c;可以改变指向 推荐写法 常见写法&#xff1a;

用Excel辅助做数独

做数独游戏的时候&#xff0c;画在纸上很容易弄花眼&#xff0c;所以我考虑用Excel辅助做一个。 界面如下&#xff1a; 按下初始化表格区域按钮&#xff0c;会在所有单元格中填充“123456789”。如下图&#xff1a; 当某个单元格删除得只剩一个数字时&#xff0c;会将同一行、…

《大型语言模型自然语言生成评估》综述

在快速发展的自然语言生成&#xff08;NLG&#xff09;评估领域中&#xff0c;引入大型语言模型&#xff08;LLMs&#xff09;为评估生成内容质量开辟了新途径&#xff0c;例如&#xff0c;连贯性、创造力和上下文相关性。本综述旨在提供一个关于利用LLMs进行NLG评估的全面概览…

一篇就学会接口,全网最详细的接口测试

大多数人对于接口测试都觉得是一种高大上的测试&#xff0c;觉得学会接口测试就可以从小白测试员&#xff0c;变成了高级测试员&#xff0c;但其实接口测试只是测试的基础内容 什么是接口 接口泛指实体把自己提供给外界的一种抽象化物&#xff08;可以为另一实体&#xff09;&…

开始学习Vue2(脚手架,组件化开发)

一、单页面应用程序 单页面应用程序&#xff08;英文名&#xff1a;Single Page Application&#xff09;简 称 SPA&#xff0c;顾名思义&#xff0c;指的是一个 Web 网站中只有唯一的 一个 HTML 页面&#xff0c;所有的功能与交互都在这唯一的一个页面内完成。 二、vue-cli …

java web mvc-02-struts2

拓展阅读 Spring Web MVC-00-重学 mvc mvc-01-Model-View-Controller 概览 web mvc-03-JFinal web mvc-04-Apache Wicket web mvc-05-JSF JavaServer Faces web mvc-06-play framework intro web mvc-07-Vaadin web mvc-08-Grails Struts2 Apache Struts是一个用于创…

Redis 笔记二

概览 1.高并发秒杀问题及可能出现的bug 2.秒杀场景JVM级别锁和分布式锁 3.大厂分布式锁Redisson框架 4.从Redisson源码剖析lua解决锁原子性问题 5.从Redisson源码剖析经典锁续命问题 6.Redis主从架构锁失效如何解决 7.Redlock分布式锁高并发下可能存在的问题 8.双十一大促如何将…

alfred自定义谷歌翻译workflow

如果要实现自定义workflow&#xff0c;则必须安装付费版的alfred&#xff0c;囊中羞涩的话可以自行淘宝。自定义步骤如下&#xff1a; 1. 新建空的workflow&#xff0c;填写基本信息 2. 开发python脚本 打开该workflow所在目录&#xff0c;进行下面步骤&#xff1a; 首先安装…

OpenCV第 1 课 计算机视觉和 OpenCV 介绍

文章目录 第 1 课 计算机视觉和 OpenCV 介绍1.机器是如何“看”的2.机器视觉技术的常见应用3.图像识别介绍4. 图像识别技术的常见应用5.OpenCV 介绍6.图像在计算机中的存储形式 第 1 课 计算机视觉和 OpenCV 介绍 1.机器是如何“看”的 我们人类可以通过眼睛看到五颜六色的世界…

一文(10图)了解Cornerstone3D核心概念(万字总结附导图)

Cornerstone3D介绍 Cornerstone3D是一个专门为处理三维医学影像而设计的JavaScript库。 它是Cornerstone项目的一部分&#xff0c;旨在为医学影像社区提供高性能、可扩展且易于使用的开源Web工具&#xff0c;专注于提供交互式的3D医学图像浏览体验&#xff0c;适用于多种医学…

9款最新文生图模型汇总!含华为、谷歌、Stability AI等大厂创新模型(附论文和代码)

2023年真是文生图大放异彩的一年&#xff0c;给数字艺术界和创意圈注入了新鲜血液。从起初的基础图像创作跃进到现在的超逼真效果&#xff0c;这些先进的模型彻底变革了我们制作和享受数字作品的途径。 最近&#xff0c;一些大公司比如华为、谷歌、还有Stability AI等人工智能巨…

【Linux】Linux进程信号(上)

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;Linux &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 上一篇博客&#xff1a;【Linux】…

【新加坡机器人学会支持】第三届工程管理与信息科学国际学术会议 (EMIS 2024)

第三届工程管理与信息科学国际学术会议 (EMIS 2024) 2024 3rd International Conference on Engineering Management and Information Science 【国际高级别专家出席/新加坡机器人学会支持】 第三届工程管理与信息科学国际学术会议 (EMIS 2024)将于2024年4月12-14日在中国洛…