- 博客(39)
- 收藏
- 关注
原创 盒子模型和margin 、 padding
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的“补白”(或者叫“留白”),因为他很形象。当我们指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大小的元素,你还必须添加内边距,边框和外边距。为了正确设置元素在所有浏览器中的宽度和高度,你需要知道的盒模型是如何工作的。总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距。
2023-03-07 22:29:00 252
原创 【无标题】
你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:撤销:Ctrl/Command + Z重做:Ctrl/Command + Y加粗:Ctrl/Command + B斜体:Ctrl/Command + I标题:Ctrl/Command + S
2023-03-02 19:34:41 99
原创 key属性的作用
但是,如果数据模型在数组的开头插入了一个元素,那么默认情况下,Vue.is 依然会在数组的最后添加一个元素,然后从第一个元素开始逐个更新,以保持与数据模型的一致。Vue.js 这样做的原因是,如果没有为每一个列表元素指定可以唯一识别这个列表元素的“标识”的话,列表元素和数据模型就无法形成一一对应的关系,Vue.js 的引擎也就无法识别出新加入的列表元素应该插人的位置,因此默认采用的办法就是把新加人的元素放到最后,然后从开头依次更新到与数据模型一致的状态,此时用户选中的复选框的位置将不会发生变化。
2022-12-02 08:48:28 287
原创 v-if和v-show的区别
他们的区别在于,v-if的操作是DOM元素,而v-show操作的是元素的CSS属性(display属性),v-show不能与v-else配合使用。Vue.js还提供了一个与v-if类似的指令 v-show,v-show也可以用于根据条件展示元素,且用法与v-if一致。只是基于css进行切换。1.动态的向DOM树内添加或者删除DOM元素。3.v-if适合运行条件很少改变的情况。2.v-show有更高的初始渲染消耗。3.v-show适合频繁切换的情况。2.v-if有更高的切换消耗。
2022-12-02 08:48:08 164
原创 v-for与v-if 同使用的注意事项
当它们处于同一节点时,v-for 的优先级比 v-if 高,v-for 每次迭代时都会执行一次 v-if,这会造成不必要的计算开销,影响性能,尤其是当只需要渲染很小一部分的时候,表现尤为明显。例如,在一个电商网站的产品列表页面中,通常会先判断一下这个列表中的产品数量。Vue.js 的两个关键指令V if 指令和 v-for 指令,它们分别用于条件渲染和列表渲染。v-for 指令需要 key 属性的配合,此外还要留意数组元素更新时的限制情况。除非必要,否则不要将 v-if和 v-for 用在同一个元素上。
2022-12-02 08:47:34 121
原创 父子组件之间传递数据的方法
档子组件向父组件传递数据时,需要通过$emit()方法向父组件暴露一个事件,然后父组件在处理这个事件的方法中获取子组件传来的数据。解释:当子组件里面点了这个按钮,就会触发一个叫sb的事件,那个父组件如果监听了sb就会调用。从父组件向子组件传递数据是最主要的方式,可通过组件的props(属性)和slot(插槽)来实现。当子的$emit执行时,就会自动调用父里绑定的函数,函数的参数就是子传递过来的数据。概念:父组件的数据改变了会自动流动到自组件,但是子不允许修改由props流过来的数据。
2022-12-02 08:36:39 192
原创 单页应用 (SPA)
单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。单页应用的说法是在JavaScript和AJAX技术比较成熟以后才出现的,指的是通过浏览器访问一个网站时,只需要加载一个入口页面,此后显示的内容和数据都不会再刷新浏览器页面。有了单页应用之后,传统的网站就被称为多页应用了。
2022-12-02 08:35:48 244
原创 v-model修饰符
对于文本输入框,默认情况下,v-model 推指令在每次 input 事件触发后,都会对文本输入框的值与数据进行同步。通过添加.lazy 修饰符,可以将上述行为改为在 change 事件触发之后进行同步,这样就只有在文本框失去焦点后才会改变对应的模型属性的值,因此称为“惰性”绑定。如果希望用户输入的值能够自动转换为数值类型,那么可以给v-model指令添加.number修饰符。如果要自动过滤用户输入的首位空白字符,可以给v-model指令添加.tirm修饰符。
2022-11-27 11:59:41 257
原创 事件修饰符
event.preventDefault()/阻止默认行为或者event.stopPropagation()/阻止事件冒泡。为了解决这个问题,Vue.js提供了事件修饰符。以上方法需要处理DOM事件细节,代码繁琐。修饰符是以点开头的指令后缀来表示的。
2022-11-27 11:56:34 76
原创 事件对象属性
不同的事件对应的事件属性也不一样,例如鼠标移动相关的事件就有坐标信息,而其他事件就不会包含坐标信息。但是,有些属性和方法是所有事件都会包含的。clientX Integer 只读 鼠标在客户端区域(当前窗口)的水平坐标,不包括工具栏,滚动条等。浏览器中的事件都是以对象的形式存在的, 在标准的 DOM 中,规定事件对象必须作为唯一的参。浏览器支持的事件种类非常多,可以分为好几类,每一类里面又有很多事件。当然,随着浏览器的发展,事件也会不出新变化,例如移动设备出现以后,就增加了“触摸”事件。
2022-11-27 11:51:31 176
原创 数组侦听
一、.侦听器的基本结构作用:用来侦听数据有没有变化,一旦有变化就调用函数语法:在和data、methods这些平级的位置写一个watch对数组进行侦听数组是应用类型,存在比较复杂的侦听规则。从理论上说,修改一个数组的内容,比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。为此.Vue.is对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。
2022-11-27 11:43:08 122
原创 生命周期·钩子
在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子 在服务器端渲染期间不被调用。在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据。这个钩子会在组件的任意 DOM 更新后被调用,这些更新可能是由不同的状态变更导致的。在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用。
2022-11-27 11:37:39 97
原创 模板字符串
多行字符串的作用是用来提高源代码的可读性。尤其是当你处理预定义好的较长字符串时,把这种字符串分成多行书写更有助于提高代码的可读性和可维护性。在一些语言中,多行字符串还可以用来做代码注释。大部分动态脚本语言都支持多行字符串,比如Python,Ruby,PHP.缺点:每一行的\后必须不可以有空格,否则之间脚本错误。同样不是真正意义上的多行字符串。1.字符串相加(最容易理解也最常用的一种形式)// 优点:易理解,简单,可靠。缺点:并不是真正意义上的多行字符串;大量的+号看上去像满天星。优点:易理解,简单,可靠。
2022-11-27 11:33:01 957
原创 CDN(内容分布式网络)
CDN的全称是Content Delivery Netword,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
2022-11-27 11:17:12 539
原创 CMD命令操作
Windows 命令提示符(即 cmd)是 Windows 系统的一种命令行操作工具,用户可以通过输入命令来完成各种各样的系统或程序操作。方法四:在资源管理器的地址栏输入 cmd 并回车,cmd 打开后会自动定位到当前目录。每条命令输入后,回车运行。方法二:按下快捷键 Win + R 打开运行,输入 cmd 回车。方法一:开始菜单 -> Windows 系统 -> 命令提示符。方法五:右键点击开始菜单的 Win 图标 -> 命令提示符。方法三:点击任务栏搜索按钮,搜索 cmd 并打开。
2022-11-27 11:12:38 5466
原创 MVVM模式
2.View的功能进一步的强化,具有控制的部分功能,若想无限增强它的功能,甚至控制器的全部功几乎都可以迁移到各个View上(不过这样不可取,那样View干了不属于它职责范围的事情)。客户端开发最常用的重用是View,但是数据双向绑定技术,让你在一个View都绑定了一个model,不同模块的model都不同。2.一个大的模块中model也会很大,虽然使用方便了也很容易保证了数据的一致性,当时长期持有,不释放内存就造成了花费更多的内存。视图模型 是mvvm模式的核心,它是连接view和model的桥梁。
2022-11-27 11:08:32 298
原创 全局作用域与this指向
在代码中任意地方都能访问到的对象拥有全局作用域 (即在全局作用域中定义的变量可以在任何地方使用。) 全局作用域在页面打开时创建,在页面关闭时销毁。【所有未定义直接赋值的变量自动声明为拥有全局作用域】如果一个变量在声明的时候没有使用关键字。例如:num=10,此时这个变量无论写在哪里都是全局变量。但是这是非常不规范的,千万不要这么写,否则以后代码可能会出现bug。【最外层函数和最外层函数外面定义的变量拥有全局作用域】【所有window对象的属性拥有全局变量】
2022-10-12 19:48:12 241
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人