Vue2基础速成
一、准备工作
首先下载vue2的JavaScript库,并且命名为vue.min.js
下载链接:https://cdn.jsdelivr.net/npm/vue@2(若链接失效可去vue官网寻找)
CTRL+S即可下载保存
文件目录结构
二、使用操作原生DOM与使用VUE操作DOM的便捷性比较
操作原生DOM
<!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"></div><script>let value = '这是内容'document.getElementById('app').textContent = valuevalue = '这是新的内容'document.getElementById('app').textContent = value</script>
</body></html>
使用VUE操作DOM
<!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"><!-- 1.2插值表达式 --><p>{{title}}</p><p>{{content}}</p><p>{{1+2+3}}</p><p>{{1>2?'对':'错'}}</p></div><script src="./vue.min.js"></script><script>//1、响应式数据与插值表达式const vm = new Vue({el: '#app',data() {return {title: '这是标题文本',content: '这是内容文本'}}})</script></body></html>
三、其它使用VUE操作DOM的技巧
<!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"><!-- 1.2插值表达式 --><p>{{title}}</p><p>{{content}}</p><!-- <p>{{1+2+3}}</p><p>{{1>2?'对':'错'}}</p><p>{{output()}}</p><p>{{output()}}</p><p>{{output()}}</p><p>{{outputContent}}</p><p>{{outputContent}}</p><p>{{outputContent}}</p> --><!--4、指令 --><!-- 内容指令 --><!-- <p v-text="title">123</p><p v-html="content">123</p> --><!-- <p v-text=htmlContent>123</p><p v-html=htmlContent>123</p> --><!-- 渲染指令 --><!-- <p v-for="(item,key,index) in arr">这是内容:{{item}}-{{key}}</p><p v-for="(item,key,index) in obj">这是内容:{{item}}-{{key}}-{{index}}</p> <p v-if="false">标签内容</p><p v-show="bool">标签内容</p> --><!-- 属性指令 --><!-- <p v-bind:title="title">标签内容</p><p :title="title">标签内容</p> --><!-- 事件指令 -->//下面这行是属性指令<!-- <button v-on:click="output">按钮</button> --><!-- <button @click="output">按钮</button> --><!-- 表单指令:v-model可以实现双向数据绑定 --><input type="text" v-model="inputValue"><p v-text="inputValue"></p><!-- 5、修饰符 --><input type="text" v-model.trim="inputValue"></div></div><script src="./vue.min.js"></script><script>//1、响应式数据与插值表达式const vm = new Vue({el: '#app',data() {return {title: '这是标题文本',content: '这是内容文本',htmlContent: '这是一个<span>span</span>标签',arr: ['a', 'b', 'c', 'd'],obj: { a: 10, b: 20, c: 30 },bool: true,inputValue: '默认内容'}},//1.3methods属性methods: {output() {console.log('methods执行了')return '标题为:' + this.title + ',' + '内容为' + this.content}},//2、计算属性:具有缓存性computed: {outputContent() {console.log('computed执行了')return '标题为:' + this.title + ',' + '内容为' + this.content}},//3、侦听器watch: {title(newVal, oldVal) {console.log(newVal, oldVal)}}})</script></body></html>
相关文章:
Vue2基础速成
一、准备工作 首先下载vue2的JavaScript库,并且命名为vue.min.js 下载链接:https://cdn.jsdelivr.net/npm/vue2(若链接失效可去vue官网寻找) CTRLS即可下载保存 文件目录结构 二、使用操作原生DOM与使用VUE操作DOM的便捷性比较…...
Java大厂硬核面试:Flink流处理容错、Pomelo JVM调优、MyBatis二级缓存穿透防护与Kubernetes服务网格实战解析
第二幕:系统架构设计 面试官:设计一个处理10万QPS的秒杀系统需要的技术方案和技术选型 xbhog:采用基础架构: 存储层:Redis限流分布式锁服务层:Sentinel流量控制消息层:RocketMQ事务消息保证最…...
Python实现简易博客系统
下面我将介绍如何使用Python实现一个简易的博客系统,包含前后端完整功能。这个系统将使用Flask作为Web框架,SQLite作为数据库,并包含用户认证、文章发布、评论等基本功能。 1. 系统架构设计 技术栈选择 后端:Flask (Python Web框架)数据库:SQLite (轻量…...
【T型三电平仿真】SPWM调制
自然采样法和规则采样法的特点和计算 https://blog.csdn.net/u010632165/article/details/110889621 单极性和双极性的单双体现在什么地方 单极性和双极性的单双是指载波三角波的极性 为什么simulink进行电路仿真时,都需要放置一个powergui模块 任何使用SimPow…...
Astral Ascent 星界战士(星座上升) [DLC 解锁] [Steam] [Windows SteamOS macOS]
Astral Ascent 星界战士(星座上升) [DLC 解锁] [Steam] [Windows & SteamOS & macOS] 需要有游戏正版基础本体,安装路径不能带有中文,或其它非常规拉丁字符; DLC 版本 至最新全部 DLC 后续可能无法及时更新文章…...
Ubuntu20.04如何优雅的安装ROS 1(胎教级教程)
1、USTC的源: sudo sh -c . /etc/lsb-release && echo "deb http://mirrors.ustc.edu.cn/ros/ubuntu/ lsb_release -cs main" > /etc/apt/sources.list.d/ros-latest.list2、设置的ROS源添加密钥: sudo apt-key adv --keyserver …...
terraform生成随机密码
在 Terraform 中生成安全随机密码可以通过 random_password 资源实现,以下是完整实现方案及安全实践: 基础实现 (生成随机密码) terraform {required_providers {random {source "hashicorp/random"version "~> 3.5.1" # 使…...
一个linux系统电脑,一个windows电脑,怎么实现某一个文件夹共享
下载Samba linux主机名字不能超过15个字符 sudo dnf install samba samba-client -y 创建共享文件夹 sudo mkdir /shared 配置文件 vim /etc/samba/smb.conf [shared] path /shared available yes valid users linux电脑用户 read only no browsable yes p…...
等保系列(一):网络安全等级保护介绍
一、基本概念 网络安全等级保护(以下简称:等保)是根据《中华人民共和国网络安全法》及配套规定(如《信息安全技术 网络安全等级保护基本要求》等)建立的系统性安全防护机制,要求网络运营者根据信息系统的重…...
【专题五】位运算(2)
📝前言说明: 本专栏主要记录本人的基础算法学习以及LeetCode刷题记录,按专题划分每题主要记录:(1)本人解法 本人屎山代码;(2)优质解法 优质代码;ÿ…...
【2025五一数学建模竞赛A题】 支路车流量推测问题|建模过程+完整代码论文全解全析
你是否在寻找数学建模比赛的突破点?数学建模进阶思路! 作为经验丰富的美赛O奖、国赛国一的数学建模团队,我们将为你带来本次数学建模竞赛的全面解析。这个解决方案包不仅包括完整的代码实现,还有详尽的建模过程和解析,…...
案例:自动化获取Web页面小说(没钱修什么仙)——selenium
目录 前言一、目标即结果1. 目标:2. 提前了解网页信息3. 结果 二、逐步分析1 . selenium启动2. 获取所有章节3.打开对应章节链接,获取小说文本4. 内容写入本地文件 三、完整代码四、声名 前言 提示:通过案例掌握selenium语法 涉及技术&#…...
硬件工程师面试常见问题(11)
第五十一问:器件手册的翻译题目 要学英语啊,孩子。 第五十二问:二极管三极管常识题 1.二极管的导通电压一般是 0.7V 2.MOS管根据掺杂类型可以分为 NMOS和PMOS 3.晶体三极管在工作时,发射结和集电结均处于正向偏置,该晶体管工作在一饱和态。…...
TTL、LRU、LFU英文全称及释义
以下是 TTL、LRU 和 LFU 的英文全称及其简要解释: 1. TTL 全称:Time To Live(存活时间)含义: 表示数据在缓存或存储中的有效存活时间,过期后自动删除。 Redis 示例:SET key value EX 60&#x…...
本地部署 n8n 中文版
本地部署 n8n 中文版 0. n8n的核心价值1. 本地部署 n8n 中文版2. 访问 n8n 在技术团队寻求高效自动化解决方案的今天,n8n 作为一款安全的工作流自动化平台脱颖而出!它将代码的灵活性与低代码的便捷性深度融合,为开发者提供了独特的工具选择。…...
蓝桥杯比赛
蓝桥杯全国软件和信息技术专业人才大赛是由工业和信息化部人才交流中心主办,国信蓝桥教育科技(北京)股份有限公司承办的计算机类学科竞赛。以下是其相关信息: 参赛对象 具有正式全日制学籍且符合相关科目报名要求的研究生、本科生…...
【Linux】Makefile
Makefile常用用法介绍。 部分图片和经验来源于网络,还有正点原子的Linux驱动开发教程,若有侵权麻烦联系我删除,主要是做笔记的时候忘记写来源了,做完笔记很久才写博客。 专栏目录:记录自己的嵌入式学习之路-CSDN博客 1…...
【工具】Windows批量文件复制教程:用BAT脚本自动化文件管理
一、引言 在日常开发与部署过程中,文件的自动化复制是一个非常常见的需求。无论是在构建过程、自动部署,还是备份任务中,开发者经常需要将某个目录中的 DLL、配置文件、资源文件批量复制到目标位置。相比使用图形界面的复制粘贴操作…...
字节一面:后端开发
前言 这是我字节一面的回忆录,可能有些不全。 由于博主是Java面试Go岗,操作系统和计网问的还是比较多。 个人感觉字节很喜欢追问,博主被追问拷打的找不到北了,总结还是学的太浅了。 面试官给我的建议:再更深挖一些…...
西式烹饪实训室建设路径
在餐饮行业持续变革与教育信息化快速发展的当下,西式烹饪实训室的智能化建设成为提升教学质量、培养适应新时代需求烹饪人才的关键举措。通过引入先进技术,创新教学与管理模式,为学生打造更高效、更具沉浸感的学习环境。凯禾瑞华——实训室建…...
[更新完毕]2025五一杯A题五一杯数学建模思路代码文章教学:支路车流量推测问题
完整内容请看文章最下面的推广群 支路车流量推测问题 摘要 本文针对支路车流量推测问题展开研究,通过建立数学模型解决不同场景下的车流量分析需求。 针对问题一(Y型道路场景),研究两支路汇入主路的车流量推测。通过建立线性增长…...
2025年五一杯C题详细思路分析
C题 社交媒体平台用户分析问题 问题背景 近年来,社交媒体平台打造了多元化的线上交流空间和文化圈,深刻影响着人们社交互动与信息获取。博主基于专业知识或兴趣爱好等创作出高质量内容,吸引并获得用户的关注。用户可以随时通过观看、点赞、…...
攻防世界 dice_game
dice_game dice_game (1) motalymotaly-VMware-Virtual-Platform:~/桌面$ file game game: ELF 64-bit LSB pie executable, x86-64, version 1 (SYSV), dynamically linked, interpreter /lib64/ld-linux-x86-64.so.2, for GNU/Linux 2.6.32, BuildID[sha1]254…...
如何进行 JVM 性能调优?
进行 JVM 性能调优是一个系统性的过程,旨在提高 Java 应用程序的响应速度、吞吐量、降低资源消耗(如 CPU 和内存)以及提高稳定性。 以下是一个通用的 JVM 性能调优步骤和常用方法: 第一步:明确目标与建立基线 (Defin…...
艺华直播 5.0 |专注于提供港澳台及央视频道的电视直播应用,加载快,播放流畅
艺华直播是一款专注于提供港澳台及央视频道的电视直播应用。它以加载速度快、播放流畅不卡顿著称,是目前少数能够稳定观看港澳台频道的应用之一。此次分享的版本为测试版,支持4K秒播,带来极致的观看体验。尽管该应用已开始收费,但…...
【软件设计师:复习】上午题核心知识点总结(三)
一、编译原理(基础题) 1.编译过程概述(必考) 编译过程分为六个阶段,各阶段核心任务与典型输出如下: 阶段核心任务输入输出关键方法/工具词法分析将字符流转换为标记(Token)流源代码字符串Token序列(如<ID, "x">)正则表达式、有限自动机(DFA/NFA)…...
SAE极速部署弹性微服务商城——实验记录
SAE极速部署弹性微服务商城 本实验带您体验在SAE上快速部署一个弹性的在线商城微服务应用,使得终端用户可以通过公网访问该商城,并进行压力测试以验证其性能与稳定性。 文章目录 SAE极速部署弹性微服务商城使用SAE部署应用有哪些优势? 对商城…...
内存 “舞台” 上,进程如何 “翩翩起舞”?(转)
在数字世界里,计算机的每一次高效运转都离不开内存与进程的默契配合。内存,恰似一座宏大且有序的舞台,为进程提供了施展拳脚的空间。而进程,则如同舞台上的舞者,它们在内存的舞台上,遵循着一套复杂而精妙的…...
产品手册小程序开发制作方案
公司产品手册小程序系统主要是为了解决传统纸质或PDF格式手册更新成本高、周期长,难以及时反映最新产品信息。线下分发效率低,线上分享体验差,不利于品牌推广。传统手册单向传递信息,无法与用户进行互动,企业难以了解用…...
【dify—8】Agent实战——占星师
目录 一、创建Agent应用 二、创建提示词 三、创建变量 四、添加工具 五、发布更新 六、运行 第一部分 安装difydocker教程:【difydocker安装教程】-CSDN博客 第二部分 dock重装教程:【dify—2】docker重装-CSDN博客 第三部分 dify拉取镜像ÿ…...
Redis的键过期删除策略与内存淘汰机制详解
Redis 的键过期删除策略与内存淘汰机制详解 一、键过期删除策略 Redis 通过 定期删除(Active Expire) 和 惰性删除(Lazy Expire) 两种方式结合,管理键的过期清理。 1. 惰性删除(Lazy Expire) …...
数据结构——树(中篇)
今日名言: 人生碌碌,竞短论长,却不道枯荣有数,得失难量 上次我们讲了树的相关知识,接下来就进一步了解二叉树吧。本文为个人学习笔记,如有侵权,请 联系删除,如有错误,欢…...
实验三 软件黑盒测试
实验三 软件黑盒测试使用测试界的一个古老例子---三角形问题来进行等价类划分。输入三个整数a、b和c分别作为三角形的三条边,通过程序判断由这三条边构成的三角形类型是等边三角形、等腰三角形、一般三角形或非三角形(不能构成一个三角形)。其中要求输入变量&#x…...
PHP-Cookie
Cookie 是什么? cookie 常用于识别用户。cookie 是一种服务器留在用户计算机上的小文件。每当同一台计算机通过浏览器请求页面时,这台计算机将会发送 cookie。通过 PHP,您能够创建并取回 cookie 的值。 设置Cookie 在PHP中,你可…...
提升采购管理,打造核心竞争力七步战略采购法详解P94(94页PPT)(文末有下载方式)
资料解读:《提升采购管理,打造核心竞争力 —— 七步战略采购法详解》 详细资料请看本解读文章的最后内容。 在当今竞争激烈的商业环境中,采购管理已成为企业打造核心竞争力的关键环节。这份文件围绕七步战略采购法展开,深入剖析了…...
单片机-89C51部分:13、看门狗
飞书文档https://x509p6c8to.feishu.cn/wiki/LefkwDPU7iUUWBkfKE9cGLvonSh 一、作用 程序发生死循环的时候(跑飞),能够自动复位。 启动看门狗计数器->计数器计数->指定时间内不对计数器赋值(主程序跑飞,无法喂…...
基于MyBatis的银行转账系统开发实战:从环境搭建到动态代理实现
目标: 掌握mybatis在web应用中怎么用 mybatis三大对象的作用域和生命周期 ThreadLocal原理及使用 巩固MVC架构模式 为学习MyBatis的接口代理机制做准备 实现功能: 银行账户转账 使用技术: HTML Servlet MyBatis WEB应用的名称&am…...
纹理采样+光照纹理采样
普通纹理显示 导入纹理 1.将纹理拷贝到项目中 2.配置纹理 纹理显示原理 原始纹理(边长是),如果原始图的边长不是,游戏引擎在运行时,会自动将 纹理的边长补偿为,所以补偿是有损耗的(纹理不一定是…...
408真题笔记
2024 年全国硕士研究生招生考试 计算机科学与技术学科联考 计算机学科专业基础综合 (科目代码:408) 一、单项选择题 第 01~40 小题,每小题 2 分,共 80 分。下列每小题给出的四个选项中,只有一个…...
【Shell 脚本编程】详细指南:第一章 - 基础入门与最佳实践
Shell 脚本编程完全指南:第一章 - 基础入门与最佳实践 引言:Shell 脚本在现代开发中的重要性 Shell 脚本作为 Linux/Unix 系统的核心自动化工具,在 DevOps、系统管理、数据处理等领域扮演着关键角色。本章将系统性地介绍 Shell 脚本的基础知…...
PostgreSQL数据库操作SQL
数据库操作SQL 创建 创建数据库 create database db_test;创建并指定相关参数 with owner : 所有者encoding : 编码connection limit :连接限制 create database db_test1 with owner postgresencoding utf-8connection limit 100;修改 修改数据库名称 renam…...
RAG工程-基于LangChain 实现 Advanced RAG(预检索-查询优化)(下)
Multi-Query 多路召回 多路召回流程图 多路召回策略利用大语言模型(LLM)对原始查询进行拓展,生成多个与原始查询相关的问题,再将原始查询和生成的所有相关问题一同发送给检索系统进行检索。它适用于用户查询比较宽泛、模糊或者需要…...
VBA数据库解决方案第二十讲:Select From Where条件表达式
《VBA数据库解决方案》教程(版权10090845)是我推出的第二套教程,目前已经是第二版修订了。这套教程定位于中级,是学完字典后的另一个专题讲解。数据库是数据处理的利器,教程中详细介绍了利用ADO连接ACCDB和EXCEL的方法…...
Linux架构篇、第1章_02源码编译安装Apache HTTP Server 最新稳定版本是 2.4.62
Linux_基础篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:源码编译安装Apache HTTP Server 最新稳定版本是 2.4.62 版本号: 1.0,0 作者: 老王要学习 日期: 2025.05.01 适用环境: Centos7 文档说明 本文…...
【Machine Learning Q and AI 读书笔记】- 03 小样本学习
Machine Learning Q and AI 中文译名 大模型技术30讲,主要总结了大模型相关的技术要点,结合学术和工程化,对LLM从业者来说,是一份非常好的学习实践技术地图. 本文是Machine Learning Q and AI 读书笔记的第3篇,对应原…...
Webug4.0靶场通关笔记08- 第11关万能密码登录(SQL注入漏洞)
目录 第13关 万能密码登录 1.打开靶场 2.源码分析 3.渗透方法1 4.渗透方法2 第13关 万能密码登录 本文通过《webug靶场第13关 万能密码登录》来进行渗透实战。 万能密码是利用 SQL 注入漏洞,构造出能够绕过登录验证的特殊密码字符串。通常,登录验…...
terraform中statefile文件的实现原理及作用
Terraform 的 State 文件(terraform.tfstate)是其基础设施即代码(IaC)机制的核心组件,用于记录和管理云资源的实际状态。以下是其实现原理及核心作用的详细分析: 一、State 文件的实现原理 1. 数据结构与…...
7.0/Q1,GBD数据库最新文章解读
文章题目:Cardiovascular disease s mortality in Brazilian municipalities: estimates from the Global Burden of Disease study, 2000-2018 DOI:10.1016/j.lana.2025.101106 中文标题:巴西城市的心血管疾病死亡率:来自2000-20…...
linux 使用nginx部署next.js项目,并使用pm2守护进程
前言 本文基于:操作系统 CentOS Stream 8 使用工具:Xshell8、Xftp8 服务器基础环境: node - 请查看 linux安装node并全局可用pm2 - 请查看 linux安装pm2并全局可用nginx - 请查看 linux 使用nginx部署vue、react项目 所需服务器基础环境&…...
0基础 | Proteus电路仿真 | 电机使用
目录 电机类型 51单片机对直流电机的控制 基于89C51主控的直流电机控制电路仿真 代码《基于Keil C51》 51单片机对步进电机的控制 控制代码《基于Keil C51》 基于89C51主控的步进电机控制电路仿真 电机类型 直流电机 步进电机 51单片机对直流电机的控制 直流电机&#…...