前端(vue)草稿
1. VUE->js 中条件表达式什么情况下才为true呢,经过测试,如下
2. VUE->this 的指向问题
意思就是:() => {} ,箭头代表的函数没有this
3. VUE->let 与 const 的区别
let
声明的变量可以改变
,值和类型都可以改变,没有限制。
const
声明的变量不可改变
,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。
4. VUE-><template #prefix>让图标在输入框的前面
5. VUE->native、stop、prevent 的使用
native:
<router-link @click.native = "method"></router-link>
router-link会阻止click事件,如果不加 native,不会触发 method 方法
<input @dbclick.native="method"></input>
native阻止之前的双击效果(聚焦输入框),触发method方法
stop:
点击子组件时,想调用子组件上的footClick方法,实际上调用了父组件上的方法
prevent:
禁止使用原有的click方法,使用自己定义的方法
6. VUE->父组件向子组件传多个值(props)
7. VUE->el-row 与 el-col 布局
<el-row> 会将行平均分为24份,<el-col> 表示每列所占的份数
其中,返回按钮
占 6 份,其他按钮
占 13 份,并向右偏移 5 份(查看代码)(6+13+5=24)
8. CSS->css 渲染顺序
9. VUE-> scoped
<style scoped> </style>
scoped 作用:为了避免外部引入的css样式 污染 到本地的css样式
使用后:
- 父子任意一方使用,其一方的样式都不会渗透到另一方。但,子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
- import 引入的全局css 文件,不会影响不本地化css的样式。本地化的权重更高。
- sccoped 默认是局部的,且不会影响到插槽标签(
)的内容,但,我调整。
原理:
官网文档:https://cn.vuejs.org/api/sfc-css-features.html#scoped-css
Scoped 穿透: 通过穿透功能,可以修改深层的样式。比如,修改ElementUI
的样式
参考文章:vue---style scoped属性的作用和原理、scoped穿透
10. VUE->插槽 solt
插槽作用:父组件去 定义 子组件显示的地方
单独插槽使用
循环插槽使用
11. CSS->HTML 单位
单位 | 说明 |
---|---|
px | 相对长度单位。像素px是相对于显示器屏幕分辨率。 |
em | 根据其父元素的font-size来计算,默认1em=16px,特点是1. em的值并不是固定的; 2. em会继承父级元素的字体大小。 |
rem | 只是rem相对于根元素html。这样就意味着,我们只需要在根元素确定一个参考值,可以设计HTML为大小为10px,到时设置1.2rem就是12px.以此类推。 |
vh | 相对于视窗口的高度。1vh 等于1/100的视窗口高度。 |
vw | 相对于视窗口的宽度。1vw 等于1/100的视窗口宽度。 |
vm | 根据可视区宽度和高度最小的计算,1vm=1%可视区大小 |
12. CSS -> position
position有几种:
- static(默认属性),当没有给元素设置position时默认为static
- absolute(绝对定位),相对于父级第一个设置了position属性进行定位(没有则相对于body,static除外),top,left,bottom,right均是相对于这个父元素的偏移量
- relative(相对定位),在元素原来的位置上进行定位,top,left,bottom,right的值相当于原来位置的偏移量
- fixed(固定定位),相对于浏览器视口的定位,不会随着滚动条的滚动而滚动,top,left,bottom,right的值相当于浏览器窗口的定位
relative 与 absolute区别
absolute
和relative
都会使元素脱离文档流,但不同的是,absolute
脱离文档流后不会占用原来的位置,而relative
会在原来的位置上留下一个副本占用原来文档流的位置absolute
的父元素设有position
时,其top,left,bottom,right
会忽略父级元素的padding
值,即始终与父级元素的左上角进行定位,且其层级会始终比父级高,无论父级设置多大的z-index
,但relative
的定位会受父元素padding
值影响absolute
是以第一个设置了position
的父元素或祖先元素进行定位,而relative
定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式
注:absolute 的作用就是以 某个父元素或祖先元素进行定位。
13. CSS->CSS 选择器
√ CSS 选择器参考手册:https://www.w3school.com.cn/cssref/css_selectors.asp
14. VUE->Pinia 持久化插件(persist)
pinia-plugin-persist
服务于 pinia 功能,用于数据持久化。最初用于处理刷新后pinia数据重置的问题。
其中,enabled
代表用不用,
而strategies
不写的话,会将state
中的所有值进行存储,存储方式为sessionStorage
。
如果只是paths
不写也是默认将所有state
进行存储
strategies 字段说明
属性 | 描述 |
---|---|
key | 自定义存储的 key,默认是 store.$id |
storage | 可以指定任何 extends Storage 的实例,默认是 sessionStorage |
paths | state 中的字段名,按组打包储存。就是指定字段进行存储 |
persist的使用
参考文档:https://www.jianshu.com/p/c2990fc831ca
15. VUE->Cookie 、Sessionstorage 、Localstorage三者的区别
原文链接:https://blog.csdn.net/weixin_45541388/article/details/125367823
什么是cookie
什么是sessionstorage
什么是 localstorage
Cookie 、Sessionstorage 、Localstorage三者的区别
- 存储空间:
cookie
存储空间最小只有4kb、但是http请求中可以携带cookie
,loacalstorage
、sessionstorage
存储空间5m或更大 - 有效期:
cookie
不设置时间、关闭游览器销毁,sessionstorage
关闭游览器(窗口或者标签页)销毁,loacalstorage不手动清除一直保留 - 作用域:
sessionstorage
不在不同游览器窗口(标签页)共享、即使同源,cookie
、loacalstorage
在所有同源窗口之间共享 - 其他:
sessionstorage
属性允许你访问一个 session Storage 对象。它与localStorage
相似。- 不同之处在于
loacalstorage
里面存储的数据没有过期时间设置,而存储在sessionstorage
里面的数据在页面会话结束时会被清除。 - sessionStorage在页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。
- 不同tab之间就算相同url,
sessionstorage
也是不会共享的。sessionstorage
只存在于当前会话中。 - 使用window.open或者点击链接跳转的页面,新页面的
sessionstorage
会拷贝老页面的。但两者之间并无关联,还是两个会话。
16. JS->=== 与 ==
对于string、number等基础类型来讲,和=有很大的区别:
- 不同类型:== 是比较转化为同一类型后的值,看是否相同。=== 如果类型不同,它的结果就是不等。
- 同类型比较:两者直接进行值比较,结果一样。
对于Array和Object等高级类型来讲,== 和 === 没有区别,同为“指针地址”比较。
17. CSS->Html隐藏多余的文字
在写table
的td
时,发现写入大量汉字后,单元格的高度变大了,自动换行且自适应高度。死丑~~
参考文章: https://blog.csdn.net/lm1259032699/article/details/80820165
18. CSS->padding 四方渲染顺序
padding的顺序是顺时针方向,上-->右-->下-->左
19. VUE->父子组件生命周期执行顺
vue中父子组件挂载执行顺序为:
20. VUE->生命周期执行顺
很漂亮的一篇文章:Vue2.0 Vue生命周期 挂载的流程
-
Vue的初始化阶段:
- beforeCreate(此时无法 通过
vm
访问到data
数据、methods
的方法。Vue
实例对象根本还没收到,而且vm
身上没有vm.n
与add()
方法,大多数属性值为null
或者undefined
) - created(此时,有了
add()
方法,有了n
,有了_data
,并且n的get、set方法
都出现了。可以通过vm
访问到data
的数据、methods
的配置方法)此阶段会解析模板(1.有没有el
配置项 2. 有没有template
标签),生成虚拟DOM
(内存中),页面还不能显示解析好的内容
- beforeCreate(此时无法 通过
-
Vue的实例挂载阶段:
- beforeMount(此时,页面呈现的是未经
Vue
编译的DOM
结构,所有对真实DOM
的操作,最终都不奏效。)此阶段会将内存中的虚拟DOM
转为真实DOM
插入页面 - mounted(此时,页面中呈现的是经过Vue编译的
DOM
,对DOM
的操作均有效(尽可能避免))至此初始化过程结束,一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。
- beforeMount(此时,页面呈现的是未经
-
Vue的数据更新阶段:
- beforeUpdate(此时的数据已经是最新数据,但是界面还是旧数据) 在两个钩子之间根据新数据生成新的虚拟DOM,与旧的虚拟
DOM
进行对比最终完成页面更新 - Update(数据更新完成,此时data数据和界面数据都是最新数据。并且完成页面的渲染)
- beforeUpdate(此时的数据已经是最新数据,但是界面还是旧数据) 在两个钩子之间根据新数据生成新的虚拟DOM,与旧的虚拟
-
Vue的销毁阶段:
- beforeDestroy(销毁前收尾工作,取消订阅消息、关闭定时器、解绑自定义事件)
- destroyed(实例销毁完成,此时与视图已经解绑)
21. VUE->this.$nextTick的用法
测试代码
简单说:
this.$nextTick(function () {......}
内的代码会被稍后执行。
官方说辞:this.$nextTick
将回调延迟到下次DOM
更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。(可以做到二次修改)官方说辞:this.$nextTick
将回调延迟到下次DOM
更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。(可以做到二次修改)
简单描述原理:
- 在
dom更新
,你修改了data
的某一个值,并不会立即反应到该el
中。vue
将你对data
的更改放到watcher
的一个对列中(异步),只有在当前任务空闲时才会去执行watcher
队列任务。这就有一个延迟时间了。 - 当执行到
nextTick
的时候,这是一个异步事件,他也会把这个事件放到一个队列当中,异步事件是不会立即执行的代码,会被js
处理器放到一个队列里,按照队列的顺序优先级等一个个按次序执行,新添加的事件都会放在队列末尾。所以,当第一个也就是data
的修改执行渲染在页面之后,这个时候执行nextTick
的时候,这是一个异步事件,他也会把这个事件放到一个队列当中,异步事件是不会立即执行的代码,会被js
处理器放到一个队列里,按照队列的顺序优先级等一个个按次序执行,新添加的事件都会放在队列末尾。所以,当第一个也就是data
的修改执行渲染在页面之后,这个时候执行nextTick
的时候,这是一个异步事件,他也会把这个事件放到一个队列当中,异步事件是不会立即执行的代码,会被js
处理器放到一个队列里,按照队列的顺序优先级等一个个按次序执行,新添加的事件都会放在队列末尾。所以,当第一个也就是data
的修改执行渲染在页面之后,这个时候执行nextTick
,就肯定能获取dom
的东西了。 - 同理也是,创建一个
setTimeout
,他也会放到队列中,当上一个事件执行完之后,才会这个他这个事件,才会执行他里面的回调,也就能成功获取啦。
22. VUE-> setup 语法糖
非常棒的文章,可以让小白知道怎么使用。♥ ♥
23. VUE-> Mixin
Mixin
不是Vue
专属的,是一种思想,意思是混到一起,在很多开发框架中都实现了Mixin
(混入),可以视为一个可重复使用的公共文件。这样既可以减少代码冗余度,也可以让后期维护起来更加容易。
我们看一下mixin
文件内容:
须知:
- 在引入
Mixin
文件后,生命周期会先走Mixin
文件中对应的钩子,再走组件中对应的钩子。 实际在使用时,存在名称相同的情况,组件钩子内容会覆盖Mixin
文件中的内容。 - 不同组件中的
MiXin
是相互独立的。不同组件在调用同一个MiXin
文件,若存在修改动作,不会影响到其他组件的调用。 - 局部引入 与 全局引入效果相同。不过VUE官方不建议全局引入。
24. VUE-> process.env
process
process 是 nodejs 下的一个全局变量,它存储着 nodejs 中进程有关的信息。
process.env
env 是 environment 的简称,process.env 属性返回一个包含用户环境的对象。
console.log(process.env) 输出内容
dotenv
Dotenv 是一个零依赖的模块,它能将 .env 文件加载到 process.env 中,也就是加载到环境变量中。换句话说,自定义 process.env 内容。
一般VUE CLI
脚手架中,默认都引入了Dotenv
,可以在 package-lock.log
中查看引入版本。
脚手架的script
与process.env.NODE_ENV
也有进行对应。
- vue-cli service serve ,默认模式为 development 。可以自行创建 .env.development 文件后,手动修改该模式的 NODE_ENV。
- vue-cli service build ,默认模式为 production 。可以自行创建 .env.production 文件后,手动修改该模式的 NODE_ENV。
使用参考文档:解析vue中的process.env
25. VUE -> SCSS
26. VUE -> computed 与 watch
27. CSSS -> margin,background-color,background-image,padding,content,border
27. VUE -> Route中path的关系
26. VUE -> keep-alive
<keep-alive/>
标签是 VUE
内置标签,能够在组件切换过程中能将状态保存到内存中,防止重新渲染DOM
keep-alive
有两个属性,include 与 exclude ,且 exclude 的优先级大于 include
Õ
我们熟知的router
中也包含这个属性功能
调用方式: this.$route.meta.keep-alive = true
配置方式:
26. JS -> a 标签 herf
-
<a href="javascript:;" οnclick="javascript:alert('链接不会跳转.');">提交</a>
把javascript:;
加在超级链接上可以防止链接跳转从而执行 onclick 方法,并且返回的也是空或者false。 -
<a href="javascript:void(0)" οnclick="javascript:alert('链接不会跳转.');">一个没用的链接</a>
void(0) 表述方法无方法。也是说,不走链接,不走方法,仅仅是保留样式。IE中使用存在bug。 -
<a href="#" οnclick="javascript:alert('链接不会跳转.');">提交</a>
会刷新页面,也会传递参数,不会跳转链接。
会出现的问题:- 滚动条自动上滚至页面顶部
- 页面路径中出现 # 号
οnclick="javascript:方法;return false;"
可解决上面问题。****
27. JS-> console
写法 | 输出结果 |
---|---|
console.log('%c输出内容', 样式) | %c 是动态调整的样式 |
console.log('输出内容%o', 对象) | %o — 对象 |
console.log('输出字符串%s', 字符串) | %s — 字符串 |
console.log('输出数字%d', 数字) | %d — 数字 |
console.dir(obj) | 将 obj 强制按照json方式输出,感觉还是用 console.log 方便 |
console.count() | 显示console.count()执行的次数 |
console.assert(number/%2 === 0 ,{number:number,errorMsg: '断言失败'} ) | 断言 |
console.trace() | 打印此时的调用栈,在打印辅助调试信息时非常有用 |
console.time(this);二者之间是执行的代码;console.timeEnd(this); | 一对脚本,打印代码执行时间,性能优化和监控场景比较常见。this 是确定标识 |
console.clear( ) | 清空控制台输出 |
__EOF__

本文链接:https://www.cnblogs.com/zz-1q/p/16471121.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)