Java1234的Vue学习笔记
第一节 vue.js简介
简介
第二节 vue开发工具
vscode
第三节:vue HelloWorld实现
理解vue双向绑定v-model的概念
底层数据改变视图对应显示会变,视图绑定数据变会影响底层数据,对应MVVM模式
http://blog.java1234.com/blog/articles/510.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><input type="text" v-model="message" /><p></p><input type="text" v-bind:value="message" /><input type="text" :value="message" /><p>{{message}}</p>
</div>
<script type="text/javascript" src="./js/vue2.6.js"></script>
<script type="text/javascript" >new Vue({el:'#app',//接管了DOMdata:{message:'vue.js大爷你好!'}})
</script></body>
</html>
第四节:vue调试工具 vue devtools谷歌插件 安装
http://blog.java1234.com/blog/articles/511.html
第五节:vue模版语法
http://blog.java1234.com/blog/articles/526.html
vue插值:
双大括号{{x}}
v-once指令 一次性插值
html的解析: v-html指令
数据绑定: v-bind指令
js表达式:对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。
例如,{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
v-bind指令缩写语法为:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h2>插值</h2><input type="text" v-model="message" /><p>绑定数据并插值,message会动态改变: {{message}}</p><p v-once>一次性插值message不会改变: {{message}}</p><p>html的解析:<span v-html="message2"></span></p><h2>数据绑定</h2><div id="dynamicId">这不是数据绑定</div><div v-bind:id="dynamicId">这是数据绑定</div><div :id="dynamicId">这是缩写的数据绑定</div><hr><button v-bind:disabled="isButtonDisabled">Button</button><button :disabled="isButtonDisabled">Button</button><hr><a v-bind:href="url">网站</a><a :href="url">缩写绑定的网站</a><h2>js表达式</h2>{{number+1}}<hr>{{ok?'YES':'NO'}}<hr>{{info.split(' ').reverse().join(',')}}<hr><h2>事件绑定</h2><button v-on:click="doSomething">事件绑定</button><button @click="doSomething">事件绑定缩写</button>
</div>
<script type="text/javascript" src="./js/vue2.6.js"></script>
<script type="text/javascript" >new Vue({el:'#app',//接管了DOMdata:{message:'vue.js大爷你好!',message2:'<font color="red">呵呵</font>',dynamicId:1,isButtonDisabled:true,number:2,ok:true,info:'1 3 5',url:'http://wwww.baidu.com'},methods:{doSomething:()=>{alert('haha');}}})
</script></body>
</html>
第六节:vue条件语句
http://blog.java1234.com/blog/articles/527.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h2>v-if</h2><h1 v-if="awesome">Vue is awesome</h1><h1 v-else>Oh no.</h1><h2>template</h2><template v-if="ok"><h1>ok为true</h1><p>template标签包裹要显示的dom块</p><p>Paragraph 2</p></template><template v-else="ok"><h1>ok为false</h1><p>template标签就是要包裹显示的dom块</p><p>Para相关文章:
Java1234的Vue学习笔记
第一节 vue.js简介 简介 第二节 vue开发工具 vscode 第三节:vue HelloWorld实现 理解vue双向绑定v-model的概念 底层数据改变视图对应显示会变,视图绑定数据变会影响底层数据,对应MVVM模式http://blog.java1234.com/blog/articles/510.html <!DOCTYPE html> <…...
嵌入式八股-C++面试91题(20240809)
1. 讲一讲封装、继承、多态是什么? 封装:将具体实现过程和数据封装成一个类,只能通过接口进行访问,降低耦合性,使类成为一个具有内部数据的自我隐藏能力、功能独立的软件模块。 意义:保护代码防止被破坏&…...
如何恢复误删视频?找回误删视频文件的办法分享
在数字化时代,视频已成为我们生活中不可或缺的一部分,记录着珍贵的回忆、工作资料或是学习素材。然而,在电脑上一不小心误删视频文件,该怎么办?视频误删怎么恢复?有什么小技巧可以找回删除的视频࿱…...
游戏手柄开发一款游戏
使用游戏手柄开发一款游戏是一个既有趣又充满挑战的项目。这通常涉及多个步骤,包括选择合适的硬件、学习编程技能、设计游戏逻辑以及测试和优化游戏。以下是一个大致的步骤指南,帮助你开始这个过程: 1. 确定游戏类型和概念 游戏类型&#x…...
【阿旭机器学习实战】【39】脑肿瘤数据分析与预测案例:数据分析、预处理、模型训练预测、评估
《------往期经典推荐------》 一、【100个深度学习实战项目】【链接】,持续更新~~ 二、机器学习实战专栏【链接】,已更新31期,欢迎关注,持续更新中~~ 三、深度学习【Pytorch】专栏【链接】 四、【Stable Diffusion绘画系列】专…...
深度学习基础 - 梯度垂直于等高线的切线
深度学习基础 - 梯度垂直于等高线的切线 flyfish 梯度 给定一个标量函数 f ( x , y ) f(x, y) f(x,y),它的梯度(gradient)是一个向量,表示为 ∇ f ( x , y ) \nabla f(x, y) ∇f(x,y),定义为: ∇ f ( x…...
py2exe打包
要用到py2exe打包python程序,记录一下。 写一个setup.py文件,内容如下: from distutils.core import setup import py2exeoptions {"py2exe":{"compressed": 1, # 0或1 1压缩,0不压缩"optimize&quo…...
Gerrit存在两个未审核提交且这两个提交有冲突时的解决方案
Gerrit存在两个未审核提交且这两个提交有冲突时的解决方案 问题背景 用户A提交了一个记录,用户A的记录未审核此时用户B又提交了,这个时候管理员去合并代码,合了其中一个后再去合另一个发现合并不了,提示冲突,这个时候另…...
基于单片机的智能风扇设计
摘 要: 传统风扇无法根据周围环境的温度变化进行风速的调整,必须人为地干预才能达到需求 。 本文基于单片机的智能风扇主要解决以往风扇存在的问题,其有两种工作模式: 手动操作模式和自动运行模式,人们可以根据需要进行模式选择。 在自动运行…...
【实战】Spring Security Oauth2自定义授权模式接入手机验证
文章目录 前言技术积累Oauth2简介Oauth2的四种模式授权码模式简化模式密码模式客户端模式自定义模式 实战演示1、mavan依赖引入2、自定义手机用户3、自定义手机用户信息获取服务4、自定义认证令牌5、自定义授权模式6、自定义实际认证提供者7、认证服务配置8、Oauth2配置9、资源…...
Redis数据失效监听
一、配置Redis开启 打开conf/redis.conf 文件,添加参数:notify-keyspace-events Ex 二、验证配置 步骤一:进入redis客户端:redis-cli步骤二:执行 CONFIG GET notify-keyspace-events ,如果有返回值证明配…...
【达梦数据库】-SQL调优思路
【达梦数据库】-SQL调优思路 --查看统计信息是否准确 select table_name,num_rows,blocks,last_analyzed from user_tables where table_name表名; #默认每周六1点进行全库信息统计1、确认SQL --sql select * from test;2、查看ET ---------------------------------------…...
DispatcherServlet 源码分析
一.DispatcherServlet 源码分析 本文仅了解源码内容即可。 1.观察我们的服务启动⽇志: 当Tomcat启动之后, 有⼀个核⼼的类DispatcherServlet, 它来控制程序的执⾏顺序.所有请求都会先进到DispatcherServlet,执⾏doDispatch 调度⽅法. 如果有拦截器, 会先执⾏拦截器…...
代码随想录算法训练营第十八天| 530.二叉搜索树的最小绝对差 ● 501.二叉搜索树中的众数 ● 236. 二叉树的最近公共祖先
题目: 530. 二叉搜索树的最小绝对差 给你一个二叉搜索树的根节点 root ,返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数,其数值等于两值之差的绝对值。 示例 1: 输入:root [4,2,6,1,3] 输出:…...
会议室占用的时间(75%用例)D卷(JavaPythonC++Node.jsC语言)
现有若干个会议,所有会议共享--个会议室,用数组表示各个会议的开始时间和结束时间,格式为: 会议1开始时间,会议1结束时间 会议2开始时间,会议2结束时间 请计算会议室占用时间段。 输入描述: 第一行输入一个整数 n,表示会议数量 之后输入n行,每行两个整数,以空格分隔,…...
C++初阶_1:namespace
本章详细解说:namespace 。 namespace: namespace,意为:命名空间,c的关键字(关键字,就是提示:取变量名,函数名时不能与之撞名)。 namespace的价值: 为了解…...
低代码开发平台:效率革命还是质量隐忧?
如何看待“低代码”开发平台的兴起? 近年来,“低代码”开发平台如雨后春笋般涌现,承诺让非专业人士也能快速构建应用程序。这种新兴技术正在挑战传统软件开发模式,引发了IT行业的广泛讨论。低代码平台是提高效率的利器࿰…...
在 Django 表单中传递自定义表单值到视图
在Django中,我们可以通过表单的初始化参数initial来传递自定义的初始值给表单字段。如果我们想要在视图中设置表单的初始值,可以在视图中创建表单的实例时,传递一个字典给initial参数。 1、问题背景 我们遇到了这样一个问题:在使…...
Android之复制文本(TextView)剪贴板
效果图: 功能简单就是点击“复制”,将邀请码复制到 剪贴板中 布局 <androidx.constraintlayout.widget.ConstraintLayoutandroid:id"id/clCode"android:layout_width"dimen/dp_0"android:layout_height"dimen/dp_49"…...
Ubuntu24.04设置国内镜像软件源
参考文章: Ubuntu24.04更换源地址(新版源更换方式) - 陌路寒暄 一、禁用原来的软件源 Ubuntu24.04 的源地址配置文件发生改变,不再使用以前的 sources.list 文件,升级 24.04 之后,该文件内容变成了一行注…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中,UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念,确保一个租户(在这个系统中可能是一个公司或一个独立的客户)的数据对其他租户是不可见的。在 RuoYi 框架(您当前项目所使用的基础框架)中,这通常是通过在数据表中增加一个…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...
python爬虫——气象数据爬取
一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用: 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests:发送 …...
从面试角度回答Android中ContentProvider启动原理
Android中ContentProvider原理的面试角度解析,分为已启动和未启动两种场景: 一、ContentProvider已启动的情况 1. 核心流程 触发条件:当其他组件(如Activity、Service)通过ContentR…...
6.9-QT模拟计算器
源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...
