js
大力pig
这个作者很懒,什么都没留下…
展开
-
Vue 21 - “v-pre“指令
在这个例子中,模板中的所有内容都会被视为静态内容,即使有 Vue.js 表达式和指令。这样,在编译时,Vue.js 将直接输出模板的原始代码,而不会对其进行任何处理。指令时,该元素及其子元素会被视为静态内容而直接输出。这意味着在编译时,Vue 不会对这些元素进行任何处理,包括指令和表达式,而是直接输出它们的原始代码。是 Vue.js 中的一个指令,它用于告诉 Vue 编译器不要解析指定的元素和它的子元素。例如,如果我们有一个包含大量静态内容的模板,我们可以通过在模板根元素上添加。原创 2023-04-08 20:06:22 · 671 阅读 · 0 评论 -
Vue 20 - “v-once“
指令将使元素或组件及其所有的子元素都只渲染一次。如果数据发生了变化,它们将不会被更新。是一个指令,它告诉Vue只渲染元素和组件一次,不管后续的数据变化如何。可以提高性能,因为它避免了不必要的重渲染。原创 2023-04-08 19:56:16 · 113 阅读 · 0 评论 -
Vue 19 v-html
可能会导致跨站脚本攻击(XSS),因为它会将数据中包含的 HTML 代码直接渲染到页面上,如果不对数据进行过滤或转义,可能会导致恶意代码的注入。是 Vue.js 模板语法中的一种指令,用于将数据渲染为HTML代码,并插入到指令所在的元素内部。是一个 JavaScript 表达式,其返回值应该是一段 HTML 字符串。时一定要谨慎,确保只插入可信的、经过安全过滤的 HTML 代码。然后在 HTML 模板中使用。原创 2023-04-08 13:18:41 · 107 阅读 · 0 评论 -
Vue 18 v-text
Vue的v-text指令用于在元素中插入纯文本内容。它类似于{{}}语法,但更为灵活和强大。它可以将绑定的表达式的值转换为字符串,并将其插入到元素的textContent中,从而更新视图。v-text在上面的代码中,v-text指令会将message变量的值插入到元素中。需要注意的是,v-text指令会替换元素的textContent,因此它会覆盖任何已有的文本内容。如果你希望在元素中插入HTML代码,应该使用v-html指令而不是v-text指令。原创 2023-04-08 13:08:23 · 330 阅读 · 0 评论 -
Vue 17 - 用过滤器实现时间戳转换
Vue.js 中的过滤器(Filter)是一种简单的功能,用于将输出数据按照特定的方式进行格式化。过滤器可以在输出数据之前对其进行转换,以便更好地呈现给用户。Vue.js 的过滤器使用方式非常简单,只需要在模板中使用管道符将数据传递到过滤器中,然后在过滤器中对数据进行处理,最后将处理后的数据返回即可。在上面的例子中,我们定义了一个名为。原创 2023-04-08 12:52:00 · 609 阅读 · 0 评论 -
Vue 16 - 收集表单数据
想在一个表单里做一些小功能实现用户数据收集,收集完毕之后在控制台打印这些信息即可。包含账号 ,密码(加密), 性别, 年龄(1-120), 爱好,多选。喜欢的城市。其他信息。阅读并接受用户协议,提交。原创 2023-04-07 21:01:30 · 72 阅读 · 0 评论 -
Vue 15 - 列表过滤和排序
在前一个章节的基础上,如果我们还想加一个排序的过程应该如何修改呢?要求:1. 添加升序,降序,原顺序按钮进行列表排序2. 过滤和排序可以结合使用。原创 2023-04-06 16:49:56 · 395 阅读 · 0 评论 -
Vue 14 - computed实现列表过滤
Vue列表过滤是Vue框架提供的一种列表过滤功能,可以让你轻松地过滤和显示特定的数据列表。Vue列表过滤的实现通常涉及以下几个步骤:首先,定义一个包含所有数据的列表,该列表可以是从API获取的数据,也可以是本地的静态数据。接下来,定义一个用于过滤数据的输入框或下拉框,让用户可以输入或选择要过滤的关键字或条件。然后,使用Vue的计算属性或过滤器来过滤列表数据。计算属性可以返回根据过滤条件过滤后的数据列表,而过滤器可以在模板中使用,对数据进行筛选并渲染到页面上。原创 2023-04-06 14:54:17 · 560 阅读 · 0 评论 -
Vue 13 - 列表渲染 v-for
当使用Vue.js框架时,可以使用v-for指令对数据进行循环遍历并渲染到模板中。v-for可以遍历数组、对象、字符串、指定次数等。1.遍历人员数组,放在人员列表中2. 遍历汽车信息,放在汽车信息中3. 遍历字符串,放在列表中。4. 遍历指定次数,放在列表中。要求,都使用v-for实现,结合Vue。原创 2023-04-06 12:02:53 · 681 阅读 · 0 评论 -
Vue 12 - 条件渲染 v-show v-if
v-show和v-if是Vue.js中用于控制元素显示的指令。v-show根据绑定的表达式的值来决定元素是否显示,如果表达式的值为真,元素将显示;如果为假,元素将隐藏。与v-if不同,v-show只是在元素上设置了display:none样式来隐藏元素,但是元素仍然存在于DOM中。当需要频繁切换元素的显示和隐藏时,v-show的性能更好。v-if也是根据绑定的表达式的值来决定元素是否显示,但是与v-show不同,如果表达式的值为假,元素将从DOM中移除,如果表达式的值为真,元素将被重新插入到DOM中原创 2023-04-05 20:42:45 · 704 阅读 · 0 评论 -
Vue 11 - 绑定css和style样式
1. 点击一个div区域,随机变化4中css样式。2. 将一个div模块绑定style样式3. 要求: 都需要交给vue托管。原创 2023-04-05 19:35:47 · 171 阅读 · 0 评论 -
VS Code好用的插件
VS Code是一个免费且开源的跨平台文本编辑器,由Microsoft开发和维护。它的主要优点和缺点如下:优点:跨平台支持:VS Code支持Windows、Linux和Mac OS等多个操作系统,使得它成为一个非常方便的跨平台文本编辑器。功能强大:VS Code支持代码补全、语法高亮、代码片段、调试器、Git集成等功能,使得开发者可以更加高效地编写代码。扩展性:VS Code有一个非常活跃的扩展生态系统,其中包含了各种语言和框架的插件,可以满足开发者的各种需求。原创 2023-04-05 11:41:00 · 569 阅读 · 0 评论 -
Vue 10 - 计算属性
Vue.js中的计算属性是一种可以根据已有的数据来计算并返回新的数据的属性。与简单的属性不同,计算属性不仅依赖于组件实例的数据状态,而且还可以根据其他计算属性的值进行计算。这使得我们能够通过组合现有的数据来派生出一些新的数据,而不必每次都手动更新它们。在Vue中定义一个计算属性很简单,只需要在组件中定义一个带有computed属性的对象,并将计算属性的名称作为键,计算属性的返回值作为值。在上面的代码中,我们定义了一个message属性和一个计算属性,该计算属性会根据message。原创 2023-04-05 11:18:22 · 422 阅读 · 0 评论 -
Vue 09 - 事件修饰符
Vue的事件修饰符可以用来处理DOM事件的行为。以下是Vue的事件修饰符.stop: 阻止事件冒泡。: 阻止事件的默认行为。: 使用事件捕获而不是事件冒泡。: 只有当事件是从当前元素本身触发时才触发处理函数,而不是从子元素冒泡上来的。: 事件将只会触发一次。: 指示浏览器不应该阻止事件的默认行为,这可以提高性能。.passive只能与touchstarttouchmove和wheel事件一起使用。原创 2023-04-04 02:00:59 · 68 阅读 · 0 评论 -
Vue 08 - 事件处理
当你创建一个 Vue 实例时,你可以在其选项对象中定义一个 methods 对象。该对象可以包含一组方法,这些方法可以在 Vue 实例中使用。如在这段html中,你需要在vue实力里的methods方法中定义一个incrementCounter的方法去处理事件。原创 2023-04-02 12:15:52 · 55 阅读 · 0 评论 -
Vue 07 - Object.defineProperty介绍
通过defineProperty去添加属性的时候,也可以更加灵活的用getter和setter的方法去读取和修改。这样在浏览器的控制台可以通过get和set的方法去操作数据。get(){console.log('有人读取age属性了')},//console.log('有人修改了age的属性值,且值是')原创 2023-04-01 21:00:02 · 90 阅读 · 0 评论 -
Vue 06 - el与data的两种用法
el两种写法. 1. 创建vue时候配置el属性。2.先创建vue实例,后通过vm.$mount(’#root')指定el的值。data两种写法. 1. 对象式. 2. 函数式.注意事项,由Vue管理的函数,不要写箭头函数,创建箭头函数之后,this就不是vue实例。原创 2023-04-01 16:22:47 · 690 阅读 · 0 评论 -
Vue - 05 数据单向和双向绑定
当我们尝试在浏览器中改变name的值的时候,root实例里不会改变name的值。在前一个章节我们学习了v-bind指令绑定,当我们有一个输入框的时候,我们来看一下指令绑定能否实现双向绑定。2. 双向绑定, v-model, 数据不仅能从data流向页面,,也能从页面流向data。页面如果把输入框的数据改变成为其他值时候,data里name2的值也可以随之改变。1. 单向绑定, v-bind, 数据只能从Vue实例的data里流向页面。v-model可以实现双向绑定,在页面输入数据之后可以存储到data里。原创 2023-03-30 20:51:09 · 116 阅读 · 0 评论 -
Vue 04 - Vue模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染 (render) 函数。原创 2023-03-30 20:09:42 · 411 阅读 · 0 评论 -
Vue 03 - Vue.js devtools插件介绍
Root是该HTML中的一个Vue实例,i.e.不是html里的div的#root,是一个Vue实例。data部分是在Html里定义的data数据源,在Vue开发者模式里可以自己编辑。原创 2023-03-30 00:57:21 · 273 阅读 · 0 评论 -
Vue 02 - 初识Vue
当搭建好Vue开发环境之后,想让Vue开始工作, 我们需要做如下步骤。原创 2023-03-30 00:13:36 · 57 阅读 · 0 评论 -
Vue 01 - 搭建Vue开发环境
Vue介绍就不多说啦,自行谷歌或者百度吧。接下去会介绍如何搭建Vue开发环境。原创 2023-03-29 21:17:30 · 843 阅读 · 0 评论 -
puppeteer执行javascript方法
【代码】puppeteer执行javascript方法。原创 2023-03-20 19:38:19 · 891 阅读 · 0 评论 -
puppeteer在新tab打开网页
在我们日常使用中,经常会碰到需要在新的tab打开一个网页。我们可以用broswer的waitForTarget方法去定位。原创 2023-03-19 20:25:42 · 669 阅读 · 0 评论 -
puppeteer读取iframe元素
本章会介绍puppeteer读取frame内的元素。在HTML中,iframe是一种标记语言元素,用于在一个网页中嵌入另一个网页。iframe的全称是Inline Frame,即内联框架。它可以显示一个独立的HTML文档,这个文档可以和包含它的文档有不同的域名和路径,可以通过设置iframe元素的src属性来指定要显示的网页地址。通过使用iframe,可以将一个网页分成多个区域,每个区域可以加载不同的网页内容,从而实现网页的分栏和多窗口功能。原创 2023-03-14 08:41:48 · 1647 阅读 · 0 评论 -
puppeteer爬取页面多个ul元素
本章会介绍使用puppeteer api获取页面多个ul元素,以及css选择器如何定位ul类元素。原创 2023-03-12 18:30:55 · 386 阅读 · 0 评论 -
css选择器定位元素
属性选择器:选择带有指定属性的元素。语法:[属性名称=“属性值”] {样式属性:属性值}例如:h1 + p选择紧接着h1元素后的p元素。语法:前一个兄弟元素 + 后一个兄弟元素 {样式属性:属性值}元素选择器:选择所有指定元素类型的元素。例如:p选择所有的段落元素,div选择所有的div元素。语法:元素名称 {样式属性:属性值}后代选择器:选择一个元素的后代元素。语法:父元素 子元素 {样式属性:属性值}语法:#ID名称 {样式属性:属性值}语法:.类名称 {样式属性:属性值}通用选择器:选择所有元素。原创 2023-03-12 17:51:24 · 476 阅读 · 0 评论 -
puppeteer在浏览器中上传文件
本节有一个通过puppeteer在浏览器中上传文件的小演示。css定位元素标签介绍, 可以通过document.querySelector定位元素。span.soutu-btn : span类型的按钮input.upload-pic : input类型的按钮方法介绍: page方法里的一个keyboard()方法,可以调用Keyboard对象, 模拟键盘的各种操作。// 模拟按下键盘上的某个按键// 模拟释放键盘上的某个按键// 输入文本// 使用修饰键。原创 2023-03-11 17:59:18 · 768 阅读 · 0 评论 -
puppeteer登录网站获取页面元素
puppeteer的介绍就不说了,自己baidu/chrome吧, 在这里会放一个小小的登陆功能,涉及到输入框定位,button的点击,爬取div内的页面元素。2. defaultViewport: 窗口分辨率,如果不设置默认是8xx * 6xx,个人感觉页面内容不太友好。3. page.& 相当于find element, 寻找和匹配某元素,如果有多个则默认返回第一个。1. headless:无痕模式,如果不设置就默认是true,不会显示浏览器。ext, 获取元素的文本内容。原创 2023-03-11 01:58:26 · 1084 阅读 · 0 评论 -
npm安装typescript
在npm安装typescript时候,最初尝试用npm install -g typescript命令。但是最后都没有找到,安装失败。后来尝试npm i typescript安装之后成功。原创 2023-03-10 23:52:22 · 446 阅读 · 0 评论