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

Java1234的Vue学习笔记

news 2026/2/10 2:36:53

第一节 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> <…...

编程日记 2024/8/10 15:56:32

嵌入式八股-C++面试91题（20240809）

1. 讲一讲封装、继承、多态是什么&#xff1f; 封装&#xff1a;将具体实现过程和数据封装成一个类&#xff0c;只能通过接口进行访问&#xff0c;降低耦合性&#xff0c;使类成为一个具有内部数据的自我隐藏能力、功能独立的软件模块。 意义&#xff1a;保护代码防止被破坏&…...

编程日记 2024/8/10 15:55:31

如何恢复误删视频？找回误删视频文件的办法分享

在数字化时代&#xff0c;视频已成为我们生活中不可或缺的一部分&#xff0c;记录着珍贵的回忆、工作资料或是学习素材。然而&#xff0c;在电脑上一不小心误删视频文件&#xff0c;该怎么办&#xff1f;视频误删怎么恢复&#xff1f;有什么小技巧可以找回删除的视频&#xff1…...

编程日记 2024/8/10 15:54:30

游戏手柄开发一款游戏

使用游戏手柄开发一款游戏是一个既有趣又充满挑战的项目。这通常涉及多个步骤&#xff0c;包括选择合适的硬件、学习编程技能、设计游戏逻辑以及测试和优化游戏。以下是一个大致的步骤指南&#xff0c;帮助你开始这个过程&#xff1a; 1. 确定游戏类型和概念 游戏类型&#x…...

编程日记 2024/8/10 15:51:27

【阿旭机器学习实战】【39】脑肿瘤数据分析与预测案例：数据分析、预处理、模型训练预测、评估

《------往期经典推荐------》 一、【100个深度学习实战项目】【链接】&#xff0c;持续更新~~ 二、机器学习实战专栏【链接】&#xff0c;已更新31期&#xff0c;欢迎关注&#xff0c;持续更新中~~ 三、深度学习【Pytorch】专栏【链接】 四、【Stable Diffusion绘画系列】专…...

编程日记 2024/8/10 15:49:26

深度学习基础 - 梯度垂直于等高线的切线

深度学习基础 - 梯度垂直于等高线的切线 flyfish 梯度 给定一个标量函数 f ( x , y ) f(x, y) f(x,y)&#xff0c;它的梯度&#xff08;gradient&#xff09;是一个向量&#xff0c;表示为 ∇ f ( x , y ) \nabla f(x, y) ∇f(x,y)&#xff0c;定义为&#xff1a; ∇ f ( x…...

编程日记 2024/8/10 15:48:24

py2exe打包

要用到py2exe打包python程序&#xff0c;记录一下。 写一个setup.py文件&#xff0c;内容如下&#xff1a; from distutils.core import setup import py2exeoptions {"py2exe":{"compressed": 1, # 0或1 1压缩&#xff0c;0不压缩"optimize&quo…...

编程日记 2024/8/10 15:39:11

Gerrit存在两个未审核提交且这两个提交有冲突时的解决方案

Gerrit存在两个未审核提交且这两个提交有冲突时的解决方案 问题背景 用户A提交了一个记录&#xff0c;用户A的记录未审核此时用户B又提交了&#xff0c;这个时候管理员去合并代码&#xff0c;合了其中一个后再去合另一个发现合并不了&#xff0c;提示冲突&#xff0c;这个时候另…...

编程日记 2024/8/10 15:38:09

基于单片机的智能风扇设计

摘 要: 传统风扇无法根据周围环境的温度变化进行风速的调整&#xff0c;必须人为地干预才能达到需求 。 本文基于单片机的智能风扇主要解决以往风扇存在的问题&#xff0c;其有两种工作模式: 手动操作模式和自动运行模式&#xff0c;人们可以根据需要进行模式选择。 在自动运行…...

编程日记 2024/8/10 15:36:07

【实战】Spring Security Oauth2自定义授权模式接入手机验证

文章目录 前言技术积累Oauth2简介Oauth2的四种模式授权码模式简化模式密码模式客户端模式自定义模式 实战演示1、mavan依赖引入2、自定义手机用户3、自定义手机用户信息获取服务4、自定义认证令牌5、自定义授权模式6、自定义实际认证提供者7、认证服务配置8、Oauth2配置9、资源…...

编程日记 2024/8/10 15:30:00

Redis数据失效监听

一、配置Redis开启 打开conf/redis.conf 文件&#xff0c;添加参数&#xff1a;notify-keyspace-events Ex 二、验证配置 步骤一&#xff1a;进入redis客户端&#xff1a;redis-cli步骤二&#xff1a;执行 CONFIG GET notify-keyspace-events &#xff0c;如果有返回值证明配…...

编程日记 2024/8/10 15:27:58

【达梦数据库】-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 ---------------------------------------…...

编程日记 2024/8/10 15:26:57

DispatcherServlet 源码分析

一.DispatcherServlet 源码分析 本文仅了解源码内容即可。 1.观察我们的服务启动⽇志: 当Tomcat启动之后, 有⼀个核⼼的类DispatcherServlet, 它来控制程序的执⾏顺序.所有请求都会先进到DispatcherServlet&#xff0c;执⾏doDispatch 调度⽅法. 如果有拦截器, 会先执⾏拦截器…...

编程日记 2024/8/10 15:24:55

代码随想录算法训练营第十八天| 530.二叉搜索树的最小绝对差 ● 501.二叉搜索树中的众数 ● 236. 二叉树的最近公共祖先

题目&#xff1a; 530. 二叉搜索树的最小绝对差 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数&#xff0c;其数值等于两值之差的绝对值。 示例 1&#xff1a; 输入&#xff1a;root [4,2,6,1,3] 输出&#xff1a;…...

编程日记 2024/8/10 15:21:52

会议室占用的时间（75%用例）D卷(JavaPythonC++Node.jsC语言)

现有若干个会议，所有会议共享--个会议室，用数组表示各个会议的开始时间和结束时间，格式为: 会议1开始时间,会议1结束时间 会议2开始时间，会议2结束时间 请计算会议室占用时间段。 输入描述: 第一行输入一个整数 n，表示会议数量 之后输入n行，每行两个整数，以空格分隔，…...

编程日记 2024/8/10 15:20:50

C++初阶_1：namespace

本章详细解说&#xff1a;namespace 。 namespace&#xff1a; namespace,意为&#xff1a;命名空间&#xff0c;c的关键字&#xff08;关键字&#xff0c;就是提示&#xff1a;取变量名&#xff0c;函数名时不能与之撞名&#xff09;。 namespace的价值&#xff1a; 为了解…...

编程日记 2024/8/10 15:18:49

低代码开发平台：效率革命还是质量隐忧？

如何看待“低代码”开发平台的兴起&#xff1f; 近年来&#xff0c;“低代码”开发平台如雨后春笋般涌现&#xff0c;承诺让非专业人士也能快速构建应用程序。这种新兴技术正在挑战传统软件开发模式&#xff0c;引发了IT行业的广泛讨论。低代码平台是提高效率的利器&#xff0…...

编程日记 2024/8/10 15:16:45

在 Django 表单中传递自定义表单值到视图

在Django中&#xff0c;我们可以通过表单的初始化参数initial来传递自定义的初始值给表单字段。如果我们想要在视图中设置表单的初始值&#xff0c;可以在视图中创建表单的实例时&#xff0c;传递一个字典给initial参数。 1、问题背景 我们遇到了这样一个问题&#xff1a;在使…...

编程日记 2024/8/10 15:13:43

Android之复制文本（TextView）剪贴板

效果图&#xff1a; 功能简单就是点击“复制”&#xff0c;将邀请码复制到 剪贴板中 布局 <androidx.constraintlayout.widget.ConstraintLayoutandroid:id"id/clCode"android:layout_width"dimen/dp_0"android:layout_height"dimen/dp_49"…...

编程日记 2024/8/10 15:06:34

Ubuntu24.04设置国内镜像软件源

参考文章&#xff1a; Ubuntu24.04更换源地址&#xff08;新版源更换方式&#xff09; - 陌路寒暄 一、禁用原来的软件源 Ubuntu24.04 的源地址配置文件发生改变&#xff0c;不再使用以前的 sources.list 文件&#xff0c;升级 24.04 之后&#xff0c;该文件内容变成了一行注…...

编程日记 2024/8/10 15:05:33

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2026/1/24 13:05:24

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/29 18:30:30

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2026/1/30 4:52:56

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2026/1/31 4:37:39

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2026/1/29 14:27:00

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2026/2/1 6:24:16

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

编程新知 2026/1/29 5:24:50