博客主页 😶
文章

Count:

计 25 篇
255
test
无标签
test
分类:
简介:test
231
ciscn校内赛wp
ciscn校内赛wp
分类: 网络安全
简介:记录一下.welcome拿到文件是个加密的压缩包,010editor打开看到目录区和头区都是0900可以知道是真加密,由提示知道密码是小明生日,用字典生成器生成可能的密码合集,直接用Elcomsoft Password Recovery进行爆破获得密码20161011,打开后是一个全黑的png图片,一样用010editor打开图片的两个IDAT区域被修改为了CTBU该回去发现图片正常访问,但还是没有flag,有可能是图片隐写,修改图片长度获取flagguanyu下载下来,发现是个模型文件,先在模型中找了找感觉不太可能,然后以压缩包形式打开从model.dat里直接获取了flagshark流量分析,从请求信息来看是在data中获取的flag,将http文件全部导出,打开data文件,是一个数组文件看着这值应该是ascii码解码直接获取flagdotab站搜原视频在对应时间找到flagcheers根据描述找出莫岳恒学长的b站账号,动态第一条发现杠哥发的一部分flag,在莫岳恒学长那条动态对应的视频下的评论中找到了flagdo you like archives revenge下载下来是一个压缩包,直接用手一个个解压不太现实,直接选择python脚本import os import shutil import zipfile import tarfile def decompress_file(file_path): """ 解压文件函数 :param file_path: 压缩文件路径 """ # 判断文件是否存在 if not os.path.exists(file_path): print(f"File {file_path} not exist!") return # 获取文件名和文件夹路径 file_name = os.path.basename(file_path) folder_path = os.path.dirname(file_path) # 判断文件类型,并进行相应的解压操作 if file_name.endswith(".zip"): with zipfile.ZipFile(file_path, "r") as zip_ref: zip_ref.extractall(folder_path) elif file_name.endswith(".tar") or file_name.endswith(".tar.gz") or file_name.endswith(".tgz"): with tarfile.open(file_path, "r:*") as tar_ref: tar_ref.extractall(folder_path) # 删除原始压缩文件 os.remove(file_path) # 遍历解压出来的文件,如果发现还有压缩文件,则再次进行解压操作 for file in os.listdir(folder_path): file_path = os.path.join(folder_path, file) if zipfile.is_zipfile(file_path) or tarfile.is_tarfile(file_path): decompress_file(file_path) # 测试代码,解压指定文件夹下的所有压缩文件 source_folder = "./ge" for root, dirs, files in os.walk(source_folder): for file in files: file_path = os.path.join(root, file) if zipfile.is_zipfile(file_path) or tarfile.is_tarfile(file_path): decompress_file(file_path) 解压后获得最后一个压缩包,发现是加密的,在压缩包中并没有发现0900类似的特征,感觉不像zip,直接用Winrar的修复功能直接揭秘出来了,打开获得flag1337最先是想在原视频找看了好久没找到,结果在5月10的聊天记录中发现flaggsh题目获得信息chatgpt做终端,直接尝试/flag成功获取flagmagic digit 5题目所说直接把原字符串进行Md5加密放入flag就是flagbase ctbu利用chatgpt写出解题函数# 解码函数 def base_ctbu_decode(s): base_ctbu_alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZgsdxco6' binary_str = '' # 将密文每五个字符分为一段,解析出对应的二进制数据 for c in s: binary_str += bin(base_ctbu_alphabet.index(c))[2:].rjust(5, '0') # 将所有的二进制数据合并成一个二进制串,并转化为字符串 return ''.join([chr(int(binary_str[i:i+8], 2)) for i in range(0, len(binary_str), 8)]) # 调用解码函数解密密文 print(base_ctbu_decode('MZWGCZssNJgSINgoMNUEAsTHGNPXIgDFMVSWKXgBJRYEQQBYGMsXg666')) # Congratulations, you solved the challenge successfully. 获取flagassccciiiiiiiii由代码知道芝士一个字符出现的次数就是它对应ascii的位数,数字就是它的位置python直接解密the = "0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111112222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333344444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444455555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555556666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777888888888888888888888888888888888888888888888888899999999999999999999999999999999999999999999999991010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111112121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121213131313131313131313131313131313131313131313131313131313131313131313131313131313131313131313131313131313131313141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141415151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161616161617171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717171717181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181818181819191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191919191920202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212122222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323232323242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242424242425252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252526262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262626262727272727272727272727272727272727272727272727272727272727272727272727272727272727272727272727272727272828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828282828" num = 0 ttt = 0 tempNum = 0 flag = "" while num < len(the): while the[num:num + len(str(ttt))] == str(ttt): tempNum += 1 num += len(str(ttt)) flag += chr(tempNum) tempNum = 0 ttt += 1 print(flag)emperor利用chatgpt写出脚本import itertools alphabet = bytes(range(32, 127)) encrypted_flag = b'39.4HF2@,A52,;.:_,\3,5]:,6P,o.2@.?J' for key in itertools.count(): decrypted_flag = bytes([alphabet[(c key) % len(alphabet)] for c in encrypted_flag]) if decrypted_flag.startswith(b'flag{'): print(decrypted_flag) breakRuShArsa加密,质因数分解获取到了P q直接运行rsa的解密脚本获取明文,转化为二进制再转化为对应的ascii码获取到flagwall分析源码可知是将对应的字符类似字典一样换成对应的字符串,用python写一个字典去进行文件替换# 密文字典 encrypted_chars = {'a': '5a0f92fc99e8d1e5ea1677f987139c9c', 'b': '336766cfc9273d47294374c4456bd7e6', 'c': 'ab11f422e2ab0e5a672df60ac4d9978b', 'd': '04f44abda2d59984299dd1e56fedc671', 'e': '036f4d8d3c925c472af18052d047c6fb', 'f': '5b6d034b1552dd4c08199e32bebee520', 'g': 'bab20c076199ae86e5d92ea1edc1aa8f', 'h': '34a7aee723181478d6fe343788a109f9', 'i': '678a06a066ee8e6cf70bf53415fab592', 'j': 'cbd04e40d3e97ee1ca9ff95752614618', 'k': '0ec19b0e7976c4e6dfc0534803bb43f3', 'l': 'c62600a4b61358c21fb85b7c2945a332', 'm': 'e56d228da8a800aa54cdc5e9c925f262', 'n': '32e17a8fa2ad89536fd354d090bace19', 'o': 'f0ade343e3c05f8f71b58006e583933a', 'p': 'cb317151da3b66e0e6584d753baf3e01', 'q': '8b5878a92246878e9291037d1d4bd064', 'r': '3d668242905a3a4bc4ec7a905b2c7677', 's': '5a20662ff34f416e9f3abca66341c5c4', 't': '5ec5e06fc44cd2e99edcb67dd66ba1cb', 'u': 'b5768fc110d3e481fc2cab777698809d', 'v': 'ffa9532cdfdaa513471a51bfedf9022d', 'w': 'a171eda69cfbf433539ff32da4945f1f', 'x': '981fa79016ab8ae14d60998c7704bb5d', 'y': '51b969ba3459798991e5d4d87f54e073', 'z': '67252b0bb8e9903969a8e8d0a971ca63', 'A': 'c07ffaf369a4853d34a2003c1c3f5c06', 'B': '125b3bc5f336a0b2baf4e2c6b2f052f0', 'C': 'd5a7d119d6d19950cc872bfde0b94c2e', 'D': 'e0a3a14c698c2ff493c0da81fc811cc7', 'E': '112904b32851e5381e3b8ae028e92ccb', 'F': '384fddb523563d8e3a559bf077c22168', 'G': 'acc874bcc5a8555c269a080acd59279e', 'H': 'ebea16b847782d7ebb2415722b44ad10', 'I': '32512f9482e8c7c125c04685ac86f796', 'J': '5b2740b2c1542130490b75d88650fa50', 'K': 'ab8447bcc2fbbacb6a5e48e338012a46', 'L': '385ac9cddde1de5be2ee318a2709bcaf', 'M': '3d6a3db691b627ac086e351d21fba44e', 'N': '1fef12d140914d31c17349a22ab1b00e', 'O': '17e434e1201600d31b1a6b6da9977bad', 'P': 'e902610b80f75b2d77becd914bcf5461', 'Q': 'c0b92ac23b1cc4665c53020cd6c8262e', 'R': '8a7643d64f010706b206528c9513e573', 'S': 'be7cdfccb4327b28312b99bb2776df81', 'T': 'f3ab52d0dab3e888e9f11d7170d0a3d5', 'U': '1741ad5607cf1395693de4e03244a0b8', 'V': 'ffd2286b17224e320a106aa6037a5a33', 'W': '9a491f19d9cbc5b2f5321ffcd1ffb98c', 'X': '748c91af7880d9e4b654a7b0086c75f8', 'Y': '8a6026ad6887f67cf798fbf4e1debe25', 'Z': 'b3693036b7928c98e46d3d5b1bb5d53f', '0': '4312ef16a9e53149b0e4289d8a1c292c', '1': '37b8464c61284dfb3bafd47bb883c20a', '2': '255c6e619a1a1679cc3fd3c506e06c3c', '3': 'c255163951f0003f300168c9ed863e38', '4': '0d4bf2556609bde9bdf7e154f0bc01d0', '5': '389b3cbf9bdc47727aa3d60d960b4b7a', '6': '804256547141e1414f335a93d0aee2c9', '7': '91335eadbca437e6c96889da774186c2', '8': 'fad58ae4e9a6698aa3438b28f6f745cd', '9': 'e82c249a79d044b3c4891b8077736906', '{': '113780962f6031c7a4e00173bfcee17d', '_': '909e2c7a0962fdd07016dbb3c368e015', '}': '303ce188742781b005773b41173f8cfa'} # 将密文字典的键值对互换,得到明文字 encrypted_flag = '5b6d034b1552dd4c08199e32bebee520c62600a4b61358c21fb85b7c2945a3325a0f92fc99e8d1e5ea1677f987139c9cbab20c076199ae86e5d92ea1edc1aa8f113780962f6031c7a4e00173bfcee17da171eda69cfbf433539ff32da4945f1f112904b32851e5381e3b8ae028e92ccb37b8464c61284dfb3bafd47bb883c20a37b8464c61284dfb3bafd47bb883c20a909e2c7a0962fdd07016dbb3c368e0155ec5e06fc44cd2e99edcb67dd66ba1cb34a7aee723181478d6fe343788a109f937b8464c61284dfb3bafd47bb883c20a389b3cbf9bdc47727aa3d60d960b4b7a909e2c7a0962fdd07016dbb3c368e01537b8464c61284dfb3bafd47bb883c20a5a20662ff34f416e9f3abca66341c5c4909e2c7a0962fdd07016dbb3c368e01532e17a8fa2ad89536fd354d090bace194312ef16a9e53149b0e4289d8a1c292c91335eadbca437e6c96889da774186c2909e2c7a0962fdd07016dbb3c368e01591335eadbca437e6c96889da774186c234a7aee723181478d6fe343788a109f95a0f92fc99e8d1e5ea1677f987139c9c5ec5e06fc44cd2e99edcb67dd66ba1cb909e2c7a0962fdd07016dbb3c368e01537b8464c61284dfb3bafd47bb883c20ae56d228da8a800aa54cdc5e9c925f262cb317151da3b66e0e6584d753baf3e013d668242905a3a4bc4ec7a905b2c7677c255163951f0003f300168c9ed863e38bab20c076199ae86e5d92ea1edc1aa8f32e17a8fa2ad89536fd354d090bace195a0f92fc99e8d1e5ea1677f987139c9c336766cfc9273d47294374c4456bd7e6c62600a4b61358c21fb85b7c2945a332036f4d8d3c925c472af18052d047c6fb303ce188742781b005773b41173f8cfa' decrypted_flag = '' for i in range(0, len(encrypted_flag), 32): encrypted_block = encrypted_flag[i:i+32] for char, encrypted_char in encrypted_chars.items(): if encrypted_char == encrypted_block: decrypted_flag += char break print(decrypted_flag)htmlweb签到题,直接查看源代码获取flagi am root访问后发现是接收get请求,当get的值为root的时候发现页面变化,在burp的response中搜索到了flagzuploadfile get content,直接伪协议,构建payload。php://filter/read=convert.base64 encode/resource=/flagzupload pro代码查看发现仅仅是对前端进行限制了,直接burp绕过前端,上大马获取shell,拿到flagzupload pro plus查看代码,看到对文件名进行了简单的检查,文件名以.进行分割成数组,判断数组的第二个元素是否为zip,文件名为shell.zip.php成功上传,获取shell拿到flagzupload pro plus max用了include函数来接收用户的get请求,伪协议php://filter/read=convert.base64 encode/resource=/flag获取flagzupload pro plus max ultra题目bug,伪协议直接过zupload pro plus max ultra premium查看代码,发现上传的文件会被解压,先上传了一个包含shell的zip打开之后发现这个文件夹的内容只能下载,不会运行在服务器,后面用ln建立一个软连接链接到根目录的/flag处然后压缩进压缩包,这样这个文件在服务器上内容就会于flag同步,下载下来获取flagopagida打开获取flagnohtyppyc文件,进行反编译得到一个数组,ascii解密获取flagflag = [ 125, 51, 56, 97, 117, 103, 110, 64, 108, 95, 56, 110, 49, 109, 109, 97, 114, 103, 48, 114, 112, 95, 99, 49, 109, 64, 110, 121, 100, 95, 114, 48, 102, 95, 101, 53, 114, 101, 118, 51, 114, 123, 103, 97, 108, 102]stick game在文件夹里打开这个网页,他说要1000分就能获取Flag,控制台处直接修改score变量为10000,自杀获取flagandrogin下载下来后是个apk,安装后提示要账号密码才能获取flag,直接手机上用Mt管理器打开apk在classes3.dex中找到了账号密码,获得了flagco pack题目提示upx,用exeinfope发现确实是套了壳的,直接用upx解密发现失败,在网上查了查可以用upxfix来修复,修复后进行upx命令执行成功,ida打开获取到了flag
291
Linux学习记录
Linux学习记录
分类: 基础学习
简介:文件处理命令目录相关pwd (print work directory)打印出当前目录$ pwdls (list)列出当前目录的所有文件。$ ls [opt][opt]:a 显示所有文件及目录l 以列表形式显示文件与目录la a与l的混用cd (change directory)改变目录cd [path][path]:'..' 返回上级目录mkdir (Make directory)创建目录mkdir [opt] [path][opt]:p 创建多级目录(不用此命令创建多级目录会报错)rmdir (remove directory)删除空文件夹rmdir [opt][opt]:p 更彻底,回去判断上级目录是否在下级目录删除后也成了空目录文件相关touch创建文件touch [path]cp (copy)复制文件cp [opt] [from] [to][opt]:r 递归复制整个文件夹rm (remove)移除 文件|文件夹rm [opt] [path][opt]:r 递归删除整个文件夹f force强行删除,无提示此命令有著名的垃圾清理这个实际是删库跑路的命令sudo rm rf /*mv (move)移动文件或目录mv [from] [to]当from和to一致时可以达成修改文件名的效果~cat查看文件cat [path]Vim的使用Vim是linux下的代码编辑器,无错误提示,长期使用,可以更好的养成编程的好习惯。vim下的几种模式图示非常清楚~编辑模式的命令:w 保存:wq 保存并退出:q! 强制退出不保存:set nu 显示行号:set nonu 不显示行号:[行号] 跳转行命令模式下的命令yy 拷贝当前行5yy 拷贝向下的5行p 粘贴拷贝内容dd 删除当前行5dd 删除向下5行/[查找内容] 进入查找模式按n查找下一个u 撤销操作G 跳转最末行gg 跳转首行5gg 跳转第五行
237
Vue3的学习 day3&day4
Vue3的学习 day3&day4
简介:kali系统的安装和使用在体验了两个多周的Linux系统之后感觉体验还不错,于是我在电脑上装了第三个系统,kali,正好这也是Debian的分支,下载下来后我发现里面集成许多渗透常用分析工具 Burp、wireshark、sqlmap还有一些我没见过的工具,这可能就是那些网络安全的大佬喜欢kali的原因吧。Vue3学习 DAY3&4模块化的使用因为Vue的模块化是目前前端的主流,所以以后的笔记都会用模块化进行。模块的引用,App.vue是vue的入口文件,和html和php中的index起着一样的效果,所以就从这里开始引入模块。Part1<script> import { RouterLink, RouterView } from 'vue router'; import Index from './components/Index.vue';//引入模块 export default { data(){ return { WebSiteName: "Home", Arr: [1,2,3] } }, components:{ Index },//这里代表元素的注册 methods:{ recChild(value){ console.log(value); } // 需要创建一个函数来接受子组件传过来的变量 } } </script> <template> <Index></Index> <! 完成上面两个步骤就可以在任意位置插入元素了 > <! 元素可以重复插入 > <Index :theName="WebSiteName" :Arr="Arr"></Index> <! 这里用v bind来绑定动态属性theName是他在子组件中的标签名字 > <index @message="recChild"></index> <! 利用v on来监听子组件传来的参数 > </template> <style> </style> 以上为App.vue部分<script> export default { data(){ return { greet: "hello", } }, // props:['theName'] // props 用于接收父组件传递过来的数据 // 以上是props用数组接受的写法 // 下面是用对象的写法 props:{ // theName:Sring // 可以用以上写法接收theName并且指定他的数据类型 // 也可以用下面的方法来设置theName的默认值 // required可以要求必须传值 theName:{ type:String, default:"Loading", required:false }, Arr:{ type:Array, default(){ return [1,1,1]; }//数组或对象设置默认值必须用函数来返回一个默认值 } }, methods:{ transportParent(){ this.$emit("message",this.greet); // $emit这个关键词可以向父组件传递参数 } } } </script> <template> <p>Hello template!</p> <! 它与 app.vue虽然是父子组件的关系,但并不能获取App.vue中的变量 > <br/> <p>{{ greet }}</p> <br/> <button @click="greet = '你好!'">Go</button> <! 这里点击Go后即可发现每个组件之间的属性是互相独立的 > <! 点击按钮只有对应的 元素的属性发生了变化 > <! vue3这样的设计可以有效的防止数据污染 > <br/> <p>{{ theName }}</p> <! 通过props传递的数据就可以直接使用了 > <! 并且这样的数据是拥有响应式的了 > <br/> <p>{{ Arr }}</p> <br/> <button @click="transportParent">Transport</button> <! 向父组件传递参数 > <br/> </template> 以上为Index文件部分插槽的使用这里分p是因为一直下去会很乱App.vue<script> import slotTest from './components/slotTest.vue' export default{ data(){ return { name:"xuanSAMA", greet: "夜深了,早些休息吧!" } }, components:{ slotTest } } </script> <template> <! <slotTest>XuanSAMA</slotTest> > <! 在插槽中可以随意添加html元素 > <slotTest> <template v slot:userName>{{ name }}</template> <template v slot:greet>{{ greet }}</template> <! 这里只能用template > </slotTest> </template> slotTest.vue<script> export default{ data(){ return{ } }, } </script> <template> <! <p>欢迎您 <slot></slot>,<br/>夜深了,早些休息吧!</p> > <! 以上示例用slot标签即可达成最简单slot效果 > <! 以下为具名插槽的使用 > <p>欢迎您 <slot name="userName">User</slot>,<br/><slot name="greet">Welcome</slot></p> <! 可将默认值写在slot中间 > </template> 组件之间的跨域传递App.vue<script> import injectionTest from "./components/injectionTest.vue" export default{ data(){ return{ testData:"this is a demo", obj:{ msg:"Hello" } } }, provide(){ return { trans:this.testData, objMsg:this.obj } }, components:{ injectionTest } } </script> <template> <! 组件之间的跨域传递 > <! 只支持向后代传递数据 > <! VUe3新增写法 > <injectionTest></injectionTest> <button @click="testData='Changed!'">responseTest</button> <! 这里可以发现发送过去的数据并不是响应式的 > <! 如果要让它支持响应式那么就需要传递一个对象 > <! 因为学过JAVA和php这样的面对对象的编程语言就知道 > <! 只有传递对象是传递的地址,因此可以达到响应式 > <button @click="obj.msg='Changed!'">objChange</button> </template> injectionTest.vue<script> export default{ data(){ return{ recData:this.trans, theMsg:this.obj } }, inject:['trans','obj'] } </script> <template> <p>{{ recData }}</p><br /> <p>{{ theMsg.msg }}</p> </template>
217
Vue3的学习 - Day 1&2
Vue3的学习 - Day 1&2
简介:当前状况因为大一上半学期学习JAVA SE,本来我也会一些前端知识,但也知识基础,正好用Vue的学习来完善一下我的前端的欠缺,后面再学习以下Springboot来作为后端,Android Studio来做移动端的开发,这样的搭配大概是比较适合现在的我的,下面是我这两天学习的笔记。Vue3 的构建Vue环境的部署方法有很多,我使用的是vite的方法,首先得安装比较新版本的nodejs,大概是在13以上,否则安装Vue的过程中会报错,我就遇到了。。完成后在bash中打开要安装Vue的目录,执行代码npm init vue@latest bash中就会出现一些Vue中的一些选项,可以自行选择进行配置构建。 构建好后依次执行以下代码就可以进入开发者模式了。 cd day2 npm install // 自动安装需要的模块,仅仅第一次运行时需要使用 npm run lint // 这个是用于修复错误的配置的 npm run dev // 以开发者模式运行 进入开发者模式后打开它给的连接,界面如下,这样就代表Vue3成功的构建了出来Vue常用语法<script> export default{ data() { return{ uName: "xuanSAMA", uAge: "19", msg: "<h2>这是v html的测试</h2>", Did: "awesome", poem: "鹏北海,凤朝阳", Datt: "id", target: "awesome" } }, methods: { ageIcrease:function(){ this.uAge++; } } } </script> <template> <! 双大括号是引入data里的属性 > <p>uName: {{ uName }}</p> <br /> <p>uAge: {{ uAge }}</p> <br /> <! @是Vue中的一个语法糖 代表的是v on 用于监听DOM事件 > <button v on:click="ageIcrease">Age +</button> <br /> <! 这是@的写法与上面的代码效果一样 > <button @click="ageIcrease">Age +</button> <br/> <! v once 这个指令代表只渲染一次 > <p v once>当前年龄: {{ uAge }}</p> <br/> <! v html 让内容以HTML的形式渲染 > <! 有被XSS攻击风险!慎用!! > <p v html="msg"></p> <br/> <! v bind 实现动态属性的指令 > <p v bind:id="Did">{{ poem }}</p> <br/> <! v bind 的语法糖是 : > <p :id="Did">又携书剑路茫茫。</p> <! 双大括号还可以在里面执行js代码 > <! 例如随便来个文字翻转 > {{ poem.split('').reverse().join('') }} <br/> <! []可以实现动态参数的效果 > <p :[Datt]='target'>测试</p> <button @click="Datt='class'">改变Datt</button> </template> <style scoped> #awesome { color: forestgreen; } .awesome { color: skyblue; } </style>Vue的计算属性与方法<script> export default{ data() { return{ testContent: 'We1c0me t0 Vue3', testNumber: 0, testObj:{ Num: 0 } } }, // computed的作用是可以将一个方法当作属性使用 // 只要依赖值不变,那么不会从新计算 computed:{ timeStamp(){ return Date.now(); // 响应式依赖,永不更新 }, // 每个computed都有getter和setter // 以上只是简写,仅仅写了getter // 以下为完整写法 reverseText: { get() { return this.testContent.split('').reverse().join(''); }, set(newValue) { //在设置或改变计算属性的时候会执行的代码 //不知道为啥,在这个代码中改变不会执行set....ma一下,后面再来看 console.log(newValue); } } }, // watch是监听器可以检测属性的变化 // 在watch中的函数名对应需要检测的属性名 watch:{ testContent(newData,oldData){// 这里代表要检测testcontent的变化 // 第一个形参表示变化后的值,第二个表示之前的值 console.log(oldData + " >" + newData); }, testNumber:{ immediate:true,// 是否初始化时就检测 handler:function(newData){ console.log("我现在是"+newData); } }, // 检测对象属性的变化 // 这貌似就是深度监听 "testObj.Num":function(newData){ console.log("我现在是"+newData); } } } </script> <template> <p>{{ timeStamp }}</p> <br> {{ reverseText }} <input type="text" v model="testContent" /> <button @click="testNumber++">{{ testNumber }}</button> <button @click="testObj.Num++">{{ testObj.Num }}</button> </template> <style> </style>条件渲染v if v show与列表渲染<script> export default { data(){ return { goods: ["农夫三拳","康帅夫","雷碧"] } } } </script> <template> <p v if="true">可以看见,并且渲染了</p> <br/> <p v if="false">看不见,并且没渲染</p> <br/> <p v show="true">可以看见,并且渲染了</p> <br/> <p v show="false">不可看见,但渲染了</p> <! 通过f12可知v show仅仅在标签上加了display为不可见的标识 > <! 但需要注意的是v if会增加性能负担适情况使用v if和v show是一个优化的点 > <! 以下是列表渲染 v for > <br/> 商品列表 <ul> <li v for="(item,key) of goods" :key="key">{{ item }}</li> </ul> <button @click="goods.push('可口可勒')">添加商品</button> <! key为什么要添加? > <! key是列表元素的唯一标识 > <! 也是Vue维护状态的参照物 > <ul> <li v for="(item,key) of goods" :key="key"><input type="checkbox" name="" id="">{{ item }}</li> </ul> </template> <style> </style>
博客主页 流光博客 欢迎来到我的博客,我会在这里分享我的学习笔记,纪录一些生活。 51统计
萌ICP备20220869号 本站已运行 1 年 99 天 16 小时 4 分 自豪地使用 Typecho 建站,并搭配 MyDiary 主题 Copyright © 2022 ~ 2024. 流光博客 All rights reserved.
打赏图
打赏博主
欢迎
搜 索
足 迹
分 类
  • 📚 学习生涯
  • 📔 日常纪录
  • 🖥️ 软件分享
  • 🗂️ 杂项
  • 🖼️ 相册