2019-9-14 480 0
2019-9-14 433 0
编程杂谈

v-text设置标签的文本属性v-text会覆盖原本标签的值标签想要部分设置文本可以使用{{}}方式v-text、{{}}支持逻辑表达式<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><h2>信息:{{message}}</h2><h2>信息:{{message+"!"}}</h2><h2v-text="name">姓名</h2><h2v-text="name+'!'">姓名</h2></div></body><script>varvue=newVue({el:"#app",data:{message:"大数据男孩",name:"Bigdataboy",}})</script>v-html设置元素的innerHTML,data对象里的HTML结构会解析成标签,v-text只会解析成文本<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><pv-html="content"></p></div></body><script>varvue=newVue({el:"#app",data:{content:"<h2>大数据男孩</h2>"}})</script>v-on为元素绑定事件完整格式:v-on:事件="方法名"缩写:@事件="方法名"绑定的方法定义在methods属性里面相关事件:click点击、dblclick双击、mouseenter鼠标移动…<body><divid="app"><inputtype="button"value="v-on指令"v-on:click="fun"><inputtype="button"value="v-on缩写"@click="fun"><pv-text="message"@click="changeMessage"></p></div></body><script>varvue=newVue({el:"#app",data:{message:"大数据男孩",},methods:{fun:function(){alert("事件绑定")},changeMessage:function(){this.message+="真帅"},},})</script>v-on补充传参事件绑定方法写成函数调用形式,可以传入自定义参数<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><inputtype="button"value="按钮"@click="doBtn('老铁','666666')"/></div></body><script>varvue=newVue({el:"#app",methods:{doBtn:function(p1,p2){console.log(p1,p2)}}})</script>修饰符事件的后面跟上.修饰符可以对事件进行限制更多访问:https://cn.vuejs.org/v2/api/#v-on<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><inputtype="text"@keyup.enter="doEnter('回车被点击')"/></div></body><script>varvue=newVue({el:"#app",methods:{doEnter:function(p){console.log(p)}}})</script>v-show用于显示&隐藏标签支持条件表达式本质是控制display:none;<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><!--布尔值--><imgv-show="true"src="./img/1.jpg"style="width:10%;height:10%;"/><!--变量控制--><imgv-show="isShow"src="./img/1.jpg"style="width:10%;height:10%;"/><!--条件表达式--><imgv-show="age>18"src="./img/1.jpg"style="width:10%;height:10%;"/></div></body><script>varvue=newVue({el:"#app",data:{isShow:true,age:17},})</script>v-if用于显示&隐藏标签支持条件表达式本质是判定为false时把标签移除v-if相对于v-show,更消耗性能,因为v-if需要操作DOM树<body><divid="app"><inputtype="button"@click="toggleIsShow"value="切换v-if"/><p></p><!--变量控制--><imgv-if="isShow"src="./img/1.jpg"style="width:10%;height:10%;"/><!--条件表达式--><imgv-if="age>18"src="./img/1.jpg"style="width:10%;height:10%;"/></div></body><script>varvue=newVue({el:"#app",data:{isShow:true,age:17},methods:{toggleIsShow:function(){this.isShow=!this.isShow}}})</script>v-bind为元素绑定属性完整写法:v-bind:属性缩写::属性如果设置的class属性,建议使用对象方式判断是否添加类名<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><!--绑定src属性(完整写法)--><imgv-bind:src="isSrc"style="width:10%;height:10%;"/><br/><!--绑定src属性(缩写写法)--><img:src="isSrc"style="width:10%;height:10%;"/><br/><!--绑定类名(建议对象写法)--><img:src="isSrc":class="{img:isShow,active:isActive}"style="width:10%;height:10%;"/><!--绑定类名(数组写法)--><img:src="isSrc":class="[show,active]"style="width:10%;height:10%;"/></div></body><script>varvue=newVue({el:"#app",data:{isSrc:"./img/1.jpg",isShow:true,isActive:true,show:"show",active:"active",}})</script>v-for根据数组生成列表结构v-for经常与数组搭配使用语法:(item,index)in数组改变数组的内容会同步更新到页面上,是响应式的<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><h2>大数据男孩</h2><ul><liv-for="(item,index)inarr">{{index+1}}{{item}}</li></ul><h2>兴趣</h2><h3v-for="iininterest"v-bind:title="i.name">{{i.name}}</h3></div></body><script>varvue=newVue({el:"#app",data:{arr:["帅气","没钱","可爱","有趣","想了解吗?"],interest:[{"name":"摄影"},{"name":"网络"},{"name":"哲学"},]}})</script>v-model便捷设置和获取表单元素的值绑定的数据会和表单元素的值相关联绑定的数据<—->表单元素的值<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><inputtype="text"v-model="message"/><h2v-text="message"></h2></div></body><script>varvue=newVue({el:"#app",data:{message:"",}})</script>

2020-9-28 9 0
2020-9-27 7 0
编程杂谈

爬取难点HTML的canvas标签生成的图片,使用平常获取图片URL下载是行不通的。说明爬虫完整代码https://pan.bigdataboy.cn/#/s/wjHw网站csTimer-魔方竞速训练专用计时器爬取内容模仿公式公式对应的canvas图片工具选取Pythonselenium开始爬取爬取canvas的思路是执行canvas.toDataURL("image/png")方法获取图片的base64编码,再转码为bytes,然后保存在本地构造主类classMain:#图片保存路径IMG_PATH="./img/"#公式保存文件FILE="a.txt"#保存公式的个数COUNT=5000#保存速度SPEED=0.1#None:无限制。支持浮点数def__init__(self):#TODO打开网站defsave(self,i):#TODO保存公式及图片defrun(self):#TODO运行类构造类方法def__init__(self):options=ChromeOptions()options.add_experimental_option('excludeSwitches',['enable-automation'])#隐藏自动化测试#options.add_argument("--headless")#注释掉,就无需打开浏览器窗口#加载网站self.bro=webdriver.Chrome(executable_path="./chromedriver_win32/chromedriver.exe",options=options)self.bro.get(url="https://www.cstimer.net/")#检查网页是否加载完成WebDriverWait(self.bro,60).until(EC.presence_of_element_located((By.XPATH,'//div[@id="leftbar"]/div[@class="mybuttonc6"]/div/span[2]')))#判断图片框是否显示ifnotself.bro.find_element_by_id('toolsDiv').is_displayed():#点击显示图片self.bro.find_element_by_xpath('//div[@id="leftbar"]/div[@class="mybuttonc6"]/div/span[2]').click()保存类方法defsave(self,i):#保存公式formula=self.bro.find_element_by_xpath('//div[@id="scrambleTxt"]/div').textwithopen(self.FILE,mode='a+',encoding="UTF-8")asf:text=f"{formula}----{i}\n"logger.info(text)f.write(text)#保存图片JS='returndocument.getElementById("toolsDiv").childNodes[0].childNodes[0].childNodes[0].toDataURL("image/png");'img_base64=self.bro.execute_script(JS).split(',')[1]#执行js文件得到带图片的base64编码img_bytes=base64.b64decode(img_base64)#转为bytes类型path=f"{self.IMG_PATH}{i}.png"logger.info(path)withopen(path,'wb')asf:#保存图片到本地f.write(img_bytes)运行类方法defrun(self):i=1whileself.COUNT>=i:self.bro.find_element_by_xpath('//div[@class="title"]/nobr[2]/span[2]').click()self.save(i)ifself.SPEED:sleep(self.SPEED)logger.info(f"延迟:{str(self.SPEED)}中....")i+=1logger.info(f"爬取完成")使用if__name__=='__main__':mian=Main()mian.run()

2020-9-10 21 0