【Web - 框架 - Vue】随笔 - Vue的简单使用(01) - 快速上手
【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…...
【简说八股】Redisson的守护线程是怎么实现的
Redisson Redisson 是一个 Java 语言实现的 Redis SDK 客户端，在使用分布式锁时，它就采用了「自动续期」的方案来避免锁过期，这个守护线程我们一般也把它叫做「看门狗」线程。 Redission是一个在Java环境中使用的开源的分布式缓存和分布式锁实…...
WPS/Office 好用的Word插件-查找替换
例如：一片文档：…………泰山…………泰（少打了山字）………… 要是把“泰”查找替换为“泰山”，就会把前面的“泰山”变成“泰山山”，这种问题除了再把“泰山山”查找替换为“泰山”，有没有更简单…...
Go 简单设计和实现可扩展、高性能的泛型本地缓存
相信大家对于缓存这个词都不陌生，但凡追求高性能的业务场景，一般都会使用缓存，它可以提高数据的检索速度，减少数据库的压力。缓存大体分为两类：本地缓存和分布式缓存（如 Redis）。本地缓存适用于…...
Vue.js 深度解析：模板编译原理与过程
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...
Java多线程——如何保证原子性
目录 引出原子性保障原子性CAS 创建线程有几种方式？方式1：继承Thread创建线程方式2：通过Runnable方式3：通过Callable创建线程方式4：通过线程池概述ThreadPoolExecutor API代码实现源码分析工作原理：线程池的…...
stm32消息和邮箱使用
邮箱管里介绍 邮箱是C/OS-II中另一种通讯机制，它可以使一个任务或者中断服务子程序向另一个任务发送一个指针型的变量。该指针指向一个包含了特定“消息”的数据结构。为了在C/OS-II中使用邮箱，必须将OS_CFG.H中的OS_MBOX_EN常数置为1。使用邮箱之前，必须先建立该邮箱。该操…...
银行数字化转型导师坚鹏：银行数字化转型案例研究
银行数字化转型案例研究 课程背景： 数字化背景下，很多银行存在以下问题： 不清楚银行科技金融数智化案例？ 不清楚银行供应链金融数智化案例？ 不清楚银行普惠金融数智化案例？ 不清楚银行跨境金融数智…...
142.乐理基础-音程的构唱练习
内容参考于：三分钟音乐社 上一个内容：141.乐理基础-男声女声音域、模唱、记谱与实际音高等若干问题说明-CSDN博客 本次内容最好去看视频： https://apphq3npvwg1926.h5.xiaoeknow.com/p/course/column/p_5fdc7b16e4b0231ba88d94f4?l_progra…...
【比较mybatis、lazy、sqltoy、mybatis-flex操作数据】操作批量新增、分页查询（二）
orm框架使用性能比较 环境： 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…...
每日OJ题_链表②_力扣24. 两两交换链表中的节点
目录 力扣24. 两两交换链表中的节点 解析代码 力扣24. 两两交换链表中的节点 24. 两两交换链表中的节点 难度 中等 给你一个链表，两两交换其中相邻的节点，并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题（即&…...
C语言数据类型详解及相关题——各种奇奇怪怪的偏难怪
文章目录 一、C语言基本数据类型溢出 二、存储原理符号位原码反码补码补码操作的例子 三、赋值中的类型转换常见返回类型——巨坑总结 一、C语言基本数据类型 溢出 因为数据范围（即存储单元的位的数量）的限制，可以表达的位数是有限的。 溢出…...
经典语义分割(二)医学图像分割模型UNet
经典语义分割(二)医学图像分割模型UNet 我们之前介绍了全卷积神经网络( FCN) ，FCN是基于深度学习的语义分割算法的开山之作。 今天我们介绍另一个语义分割的经典模型—UNet，它兼具轻量化与高性能，通常作为语义分割任务的基线测试模型&#x…...
三天学会阿里分布式事务框架Seata-seata事务日志mysql持久化配置
锋哥原创的分布式事务框架Seata视频教程： 实战阿里分布式事务框架Seata视频教程（无废话，通俗易懂版）_哔哩哔哩_bilibili实战阿里分布式事务框架Seata视频教程（无废话，通俗易懂版）共计10条视频&…...
C语言-简单实现单片机中的malloc示例
概述 在实际项目中，有些单片机资源紧缺，需要mallloc内存，库又没有自带malloc函数时，此时，就需要手动编写，在此做个笔录。（已在项目上使用），还可进入对齐管理机制。 直接…...
外包干了2年，技术退步明显
先说一下自己的情况，研究生，19年进入广州某软件公司，干了接近4年的功能测试，今年年初，感觉自己不能够在这样下去了，长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…...
计算机网络面经-HTTPS加密过程
前言 在上篇文章HTTPS详解一中，我已经为大家介绍了 HTTPS 的详细原理和通信流程，但总感觉少了点什么，应该是少了对安全层的针对性介绍，那么这篇文章就算是对HTTPS 详解一的补充吧。还记得这张图吧。 HTTPS 和 HTTP的区别 显然&am…...
2024年最佳硬盘！为台式电脑、NAS等产品量身定做的顶级机械硬盘
机械硬盘（HDD）可能看起来像是古老的技术，但它们仍然在许多地方提供“足够好”的性能，并且它们很容易以同等的价格提供最多的存储空间。 尽管最好的SSD将为你的操作系统和引导驱动器提供最好的体验，并提供比HDD更好的应…...
串的匹配算法——BF算法（朴素查找算法）
串的模式匹配：在主串str的pos位置查找子串sub，找到返回下标，没有找到返回-1。 1.BF算法思想 相等则继续比较，不相等则回退；回退是i退到刚才位置的下一个（i-j1）;j退到0；利用子串是否…...
数据处理分类、数据仓库产生原因
个人看书学习心得及日常复习思考记录，个人随笔。 数据处理分类 操作型数据处理（基础） 操作型数据处理主要完成数据的收集、整理、存储、查询和增删改操作等，主要由一般工作人员和基层管理人员完成。 联机事务处理系统ÿ…...
反向工程与模型迁移：打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...
React Native 开发环境搭建（全平台详解）
React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。 一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...
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样…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代，加密货币作为一种新兴的金融现象，正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而，加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下，稳定…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...