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

【Web - 框架 - Vue】随笔 - Vue的简单使用(01) - 快速上手

news 2025/9/16 21:11:35

【Web - 框架 - Vue】随笔 - Vue的简单使用(01) - 快速上手

Vue模板代码

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板</title>
</head>
<body>
<div></div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>let v = new Vue({el: "",data: {},methods: {}})
</script>
</body>
</html>

Vue文本相关

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue文本相关</title>
</head>
<body>
<div><!--插值,不依赖于标签-->{{info}}<p>{{info}}</p><!--让元素的文本内容和变量进行绑定--><p v-text="info"></p><!--让元素的标签内容和变量进行绑定--><p v-html="info"></p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>let v = new Vue({el: "div",data: {info: "<b>文本相关</b>"}})
</script>
</body>
</html>

结果

在这里插入图片描述

Vue属性绑定

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue属性绑定</title>
</head>
<body>
<div><!--属性绑定:v-bind--><a v-bind:href="url">超链接1</a><!--属性绑定简写(省略掉"v-bind")--><a :href="url">超链接2</a><input type="text" :value="info"><img :src="imgUrl" alt="">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>let v = new Vue({el: "div",data: {url: "http://www.baidu.com",info: "文本内容",imgUrl: "https://img-blog.csdnimg.cn/direct/f4f51baf0fd64076975340d0bce02fbb.png"}})
</script>
</body>
</html>

结果

在这里插入图片描述

Vue双向绑定

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue双向绑定</title>
</head>
<body>
<div><input type="text" :value="info_a"><!--双向绑定:v-model--><input type="text" v-model="info_b">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>let v = new Vue({el: "div",data: {info_a: "属性绑定",info_b: "双向绑定"}})setTimeout(function () {alert(v.info_a + "  " + v.info_b)}, 8000)
</script>
</body>
</html>

结果

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

Vue事件绑定

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue事件绑定</title>
</head>
<body>
<div><!--事件绑定:v-on:事件名="方法名"--><input type="button" value="按钮1" v-on:click="f()"><!--事件绑定简写--><input type="button" value="按钮2" @click="f">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>let v = new Vue({el: "div",data: {},methods: {f() {alert("按钮点击了");}}})
</script>
</body>
</html>

结果

在这里插入图片描述

Vue循环遍历

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue循环遍历</title>
</head>
<body>
<div><ul><!--循环遍历:v-for--><li v-for="name in arr">{{name}}</li></ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>let v = new Vue({el: "div",data: {arr: ["刘备", "关羽", "诸葛亮", "孙尚香", "刘禅"]},methods: {}})
</script>
</body>
</html>

结果

在这里插入图片描述

Vue显示隐藏

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue显示隐藏</title>
</head>
<body>
<div><!--显示删除:v-if--><h1 v-if="isVisible">刘德华</h1><!--显示删除:v-else--><h1 v-else>张三</h1><!--显示隐藏:v-show--><h1 v-show="isVisible">张学友</h1><h1>郭富城</h1>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>let v = new Vue({el: "body>div",data: {isVisible: true},methods: {}})
</script>
</body>
</html>

结果

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

相关文章：

【Web - 框架 - Vue】随笔 - Vue的简单使用(01) - 快速上手

【Web - 框架 - Vue】随笔 - Vue的简单使用(01) - 快速上手 Vue模板代码 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>模板</title> </head> <body> <div></di…...

编程日记 2024/3/8 2:15:57

【简说八股】Redisson的守护线程是怎么实现的

Redisson Redisson 是一个 Java 语言实现的 Redis SDK 客户端&#xff0c;在使用分布式锁时&#xff0c;它就采用了「自动续期」的方案来避免锁过期&#xff0c;这个守护线程我们一般也把它叫做「看门狗」线程。 Redission是一个在Java环境中使用的开源的分布式缓存和分布式锁实…...

编程日记 2024/3/8 2:13:55

WPS/Office 好用的Word插件-查找替换

例如&#xff1a;一片文档&#xff1a;…………泰山…………泰&#xff08;少打了山字&#xff09;………… 要是把“泰”查找替换为“泰山”&#xff0c;就会把前面的“泰山”变成“泰山山”&#xff0c;这种问题除了再把“泰山山”查找替换为“泰山”&#xff0c;有没有更简单…...

编程日记 2024/3/8 2:12:54

Go 简单设计和实现可扩展、高性能的泛型本地缓存

相信大家对于缓存这个词都不陌生&#xff0c;但凡追求高性能的业务场景&#xff0c;一般都会使用缓存&#xff0c;它可以提高数据的检索速度&#xff0c;减少数据库的压力。缓存大体分为两类&#xff1a;本地缓存和分布式缓存&#xff08;如 Redis&#xff09;。本地缓存适用于…...

编程日记 2024/3/8 2:11:53

Vue.js 深度解析：模板编译原理与过程

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2024/3/8 2:10:52

Java多线程——如何保证原子性

目录 引出原子性保障原子性CAS 创建线程有几种方式&#xff1f;方式1&#xff1a;继承Thread创建线程方式2&#xff1a;通过Runnable方式3&#xff1a;通过Callable创建线程方式4&#xff1a;通过线程池概述ThreadPoolExecutor API代码实现源码分析工作原理&#xff1a;线程池的…...

编程日记 2024/3/8 2:08:51

stm32消息和邮箱使用

邮箱管里介绍 邮箱是C/OS-II中另一种通讯机制，它可以使一个任务或者中断服务子程序向另一个任务发送一个指针型的变量。该指针指向一个包含了特定“消息”的数据结构。为了在C/OS-II中使用邮箱，必须将OS_CFG.H中的OS_MBOX_EN常数置为1。使用邮箱之前，必须先建立该邮箱。该操…...

编程日记 2024/3/8 2:07:49

银行数字化转型导师坚鹏：银行数字化转型案例研究

银行数字化转型案例研究 课程背景&#xff1a; 数字化背景下&#xff0c;很多银行存在以下问题&#xff1a; 不清楚银行科技金融数智化案例&#xff1f; 不清楚银行供应链金融数智化案例&#xff1f; 不清楚银行普惠金融数智化案例&#xff1f; 不清楚银行跨境金融数智…...

编程日记 2024/3/8 2:06:48

142.乐理基础-音程的构唱练习

内容参考于&#xff1a;三分钟音乐社 上一个内容&#xff1a;141.乐理基础-男声女声音域、模唱、记谱与实际音高等若干问题说明-CSDN博客 本次内容最好去看视频&#xff1a; https://apphq3npvwg1926.h5.xiaoeknow.com/p/course/column/p_5fdc7b16e4b0231ba88d94f4?l_progra…...

编程日记 2024/3/8 2:05:47

【比较mybatis、lazy、sqltoy、mybatis-flex操作数据】操作批量新增、分页查询（二）

orm框架使用性能比较 环境&#xff1a; idea jdk17 spring boot 3.0.7 mysql 8.0比较mybatis、lazy、sqltoy、mybatis-flex操作数据 测试条件常规对象 orm 框架是否支持xml是否支持 Lambda对比版本mybatis☑️☑️3.5.4sqltoy☑️☑️5.2.98lazy✖️☑️1.2.4-JDK17-SNAPS…...

编程日记 2024/3/8 2:04:46

每日OJ题_链表②_力扣24. 两两交换链表中的节点

目录 力扣24. 两两交换链表中的节点 解析代码 力扣24. 两两交换链表中的节点 24. 两两交换链表中的节点 难度 中等 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&…...

编程日记 2024/3/8 2:03:45

C语言数据类型详解及相关题——各种奇奇怪怪的偏难怪

文章目录 一、C语言基本数据类型溢出 二、存储原理符号位原码反码补码补码操作的例子 三、赋值中的类型转换常见返回类型——巨坑总结 一、C语言基本数据类型 溢出 因为数据范围&#xff08;即存储单元的位的数量&#xff09;的限制&#xff0c;可以表达的位数是有限的。 溢出…...

编程日记 2024/3/8 2:02:44

经典语义分割(二)医学图像分割模型UNet

经典语义分割(二)医学图像分割模型UNet 我们之前介绍了全卷积神经网络( FCN) &#xff0c;FCN是基于深度学习的语义分割算法的开山之作。 今天我们介绍另一个语义分割的经典模型—UNet&#xff0c;它兼具轻量化与高性能&#xff0c;通常作为语义分割任务的基线测试模型&#x…...

编程日记 2024/3/8 2:00:42

三天学会阿里分布式事务框架Seata-seata事务日志mysql持久化配置

锋哥原创的分布式事务框架Seata视频教程&#xff1a; 实战阿里分布式事务框架Seata视频教程&#xff08;无废话&#xff0c;通俗易懂版&#xff09;_哔哩哔哩_bilibili实战阿里分布式事务框架Seata视频教程&#xff08;无废话&#xff0c;通俗易懂版&#xff09;共计10条视频&…...

编程日记 2024/3/8 1:54:37

C语言-简单实现单片机中的malloc示例

概述 在实际项目中&#xff0c;有些单片机资源紧缺&#xff0c;需要mallloc内存&#xff0c;库又没有自带malloc函数时&#xff0c;此时&#xff0c;就需要手动编写&#xff0c;在此做个笔录。&#xff08;已在项目上使用&#xff09;&#xff0c;还可进入对齐管理机制。 直接…...

编程日记 2024/3/8 1:51:35

外包干了2年，技术退步明显

先说一下自己的情况&#xff0c;研究生&#xff0c;19年进入广州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…...

编程日记 2024/3/8 1:49:33

计算机网络面经-HTTPS加密过程

前言 在上篇文章HTTPS详解一中&#xff0c;我已经为大家介绍了 HTTPS 的详细原理和通信流程&#xff0c;但总感觉少了点什么&#xff0c;应该是少了对安全层的针对性介绍&#xff0c;那么这篇文章就算是对HTTPS 详解一的补充吧。还记得这张图吧。 HTTPS 和 HTTP的区别 显然&am…...

编程日记 2024/3/8 1:47:31

2024年最佳硬盘！为台式电脑、NAS等产品量身定做的顶级机械硬盘

机械硬盘&#xff08;HDD&#xff09;可能看起来像是古老的技术&#xff0c;但它们仍然在许多地方提供“足够好”的性能&#xff0c;并且它们很容易以同等的价格提供最多的存储空间。 尽管最好的SSD将为你的操作系统和引导驱动器提供最好的体验&#xff0c;并提供比HDD更好的应…...

编程日记 2024/3/8 1:44:28

串的匹配算法——BF算法（朴素查找算法）

串的模式匹配&#xff1a;在主串str的pos位置查找子串sub&#xff0c;找到返回下标&#xff0c;没有找到返回-1。 1.BF算法思想 相等则继续比较&#xff0c;不相等则回退&#xff1b;回退是i退到刚才位置的下一个&#xff08;i-j1&#xff09;;j退到0&#xff1b;利用子串是否…...

编程日记 2024/3/8 1:42:27

数据处理分类、数据仓库产生原因

个人看书学习心得及日常复习思考记录&#xff0c;个人随笔。 数据处理分类 操作型数据处理&#xff08;基础&#xff09; 操作型数据处理主要完成数据的收集、整理、存储、查询和增删改操作等&#xff0c;主要由一般工作人员和基层管理人员完成。 联机事务处理系统&#xff…...

编程日记 2024/3/8 1:40:25

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/9/14 1:53:04

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/9/14 13:49:51

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/9/11 12:54:42

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/7/20 9:15:14

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/7/20 15:22:30

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/8/29 0:20:47

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/9/2 18:36:21

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

编程新知 2025/8/27 0:09:05

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

编程新知 2025/9/14 6:33:08

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

编程新知 2025/9/14 1:29:18