每天几个前端小知识

简介: 每天几个前端小知识

Vue篇



1.Vue的核心是什么


Vue是一套构建用户界面的渐进式自底向上增量开发的MVVM框架,vue的核心只关注视图层,


核心思想:

数据驱动(视图的内容随着数据的改变而改变)

组件化(可以增加代码的复用性,可维护性,可测试性,提高开发效率,

方便重复使用,体现了高内聚低耦合)


2.请简述你对vue的理解


Vue是一套构建用户界面的渐进式的自底向上增量开发的MVVM框架,核心是关注视图层,vue的核心是为了解决数据的绑定问题,为了开发大型单页面应用和组件化,所以vue的核心思想是数据驱动和组件化,这里也说一下MVVM思想,MVVM思想是模型视图vm是v和m连接的桥梁,当模型层数据修改时,VM层会检测到,并通知视图层进行相应修改


3.请简述vue的单向数据流


父级prop的更新会向下流动到子组件中,每次父组件发生更新,子组件

所有的prop都会刷新为最新的值数据从父组件传递给子组件,只能单向绑定,子组件内部不能直接修改父组件传递过来的数据,(可以使用data和computed解决)


4.Vue常用的修饰符有哪些


修饰符:

.lazy改变后触发,光标离开input输入框的时候值才会改变

.number将输出字符串转为number类型

.trim自动过滤用户输入的首尾空格


事件修饰符:

.stop阻止点击事件冒泡,相当于原生js中的event.stopPropagation()

.prevent防止执行预设的行为,相当于原生js中

event.preventDefault()

.capture添加事件侦听器时使用事件捕获模式,就是谁有该事件修饰符,

就先触发谁

.self只会触发自己范围内的事件,不包括子元素

.once只执行一次


键盘修饰符:

.enter回车键

.tab键

.up向上键

.esc返回键

.space空格

.down向下键

.left向左建

.right向右键

系统修饰符:.ctrl.alt.shift.meta


5.v-text与{{}}与v-html区别


{{}}将数据解析为纯文本,不能显示输出html

v-html可以渲染输出html

v-text将数据解析为纯文本,不能输出真正的html,与花括号的区别是

在页面加载时不显示双花括号


v-text指令:

作用:操作网页元素中的纯文本内容。{{}}是他的另外一种写法


v-text与{{}}区别:

v-text与{{}}等价,{{}}叫模板插值,v-text叫指令。

有一点区别就是,在渲染的数据比较多的时候,可能会把大括号显示出

来,俗称屏幕闪动:


6.v-on可以绑定多个方法吗


可以如果绑定多个事件,可以用键值对的形式事件类型:事件名

如果绑定是多个相同事件,直接用逗号分隔就行


7.Vue循环的key作用


Key值的存在保证了唯一性,Vue在执行时,会对节点进行检查,如果没有key值,那么vue检查到这里有dom节点,就会对内容清空并赋新值,如果有key值存在,那么会对新老节点进行对比,比较两者key是否相同,进行调换位置或删除操作


8.什么是计算属性


计算属性是用来声明式的描述一个值依赖了其他的值,当它依赖的这个值发生改变时,就更新DOM当在模板中把数据绑定到一个计算属性上时,vue会在它依赖的任何值导致该计算属性改变时更新DOM每个计算属性都包括一个getter和setter,读取时触发getter,修改时触发setter


9.Vue单页面的优缺点


单页面spa

优点:前后端分离用户体验好一个字快内容改变不需要重新加载整个页面

缺点:不利于seo,初次加载时耗长(浏览器一开始就要加载htmlcssjs,所有的页面内容都包含在主页面中),页面复杂度提高了,导航不可用


10.Vuex是什么?怎么使用?在那种场景下使用


Vuex是一个专为vue.js应用程序开发的状态管理模式,通过创建一个集

中的数据存储,方便程序中的所有组件进行访问,简单来说vuex就是

vue的状态管理工具

Vuex有五个属性stategettersmutationsactionsmodules

State就是数据源存放地,对应一般vue对象的data,state里面存放的

数据是响应式的,state数据发生改变,对应这个数据的组件也会发生改

变用this.$store.state.xxx调用

Getters相当于store的计算属性,主要是对state中数据的过滤,用

this.$store.getters.xxx调用

Mutations处理数据逻辑的方法全部放在mutations中,当触发事件想

改变state数据的时候使用mutations,用this.$store.commit调用,给这个方法添加一个参数,就是mutation的载荷(payload)

Actions异步操作数据,但是是通过mutation来操作用

this.$store.dispatch来触发,actions也支持载荷

使用场景:组件之间的状态,登录状态,加入购物车,音乐播放


Vuex使用流程:

下载vuex

在src下创建store以及index.js

引入vue和vuex,使用vuex,导出实例对象在main.js中引入,在.vue文件中使用


目录
相关文章
|
4天前
|
弹性计算 运维 搜索推荐
三翼鸟携手阿里云ECS g9i:智慧家庭场景的效能革命与未来生活新范式
三翼鸟是海尔智家旗下全球首个智慧家庭场景品牌,致力于提供覆盖衣、食、住、娱的一站式全场景解决方案。截至2025年,服务近1亿家庭,连接设备超5000万台。面对高并发、低延迟与稳定性挑战,全面升级为阿里云ECS g9i实例,实现连接能力提升40%、故障率下降90%、响应速度提升至120ms以内,成本降低20%,推动智慧家庭体验全面跃迁。
|
4天前
|
数据采集 人工智能 自然语言处理
3分钟采集134篇AI文章!深度解析如何通过云无影AgentBay实现25倍并发 + LlamaIndex智能推荐
结合阿里云无影 AgentBay 云端并发采集与 LlamaIndex 智能分析,3分钟高效抓取134篇 AI Agent 文章,实现 AI 推荐、智能问答与知识沉淀,打造从数据获取到价值提炼的完整闭环。
375 91
|
5天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
5天前
|
SQL 人工智能 自然语言处理
Geo优化SOP标准化:于磊老师的“人性化Geo”体系如何助力企业获客提效46%
随着生成式AI的普及,Geo优化(Generative Engine Optimization)已成为企业获客的新战场。然而,缺乏标准化流程(Geo优化sop)导致优化效果参差不齐。本文将深入探讨Geo专家于磊老师提出的“人性化Geo”优化体系,并展示Geo优化sop标准化如何帮助企业实现获客效率提升46%的惊人效果,为企业在AI时代构建稳定的流量护城河。
385 156
Geo优化SOP标准化:于磊老师的“人性化Geo”体系如何助力企业获客提效46%
|
4天前
|
数据采集 缓存 数据可视化
Android 无侵入式数据采集:从手动埋点到字节码插桩的演进之路
本文深入探讨Android无侵入式埋点技术,通过AOP与字节码插桩(如ASM)实现数据采集自动化,彻底解耦业务代码与埋点逻辑。涵盖页面浏览、点击事件自动追踪及注解驱动的半自动化方案,提升数据质量与研发效率,助力团队迈向高效、稳定的智能化埋点体系。(238字)
267 156
|
12天前
|
机器人 API 调度
基于 DMS Dify+Notebook+Airflow 实现 Agent 的一站式开发
本文提出“DMS Dify + Notebook + Airflow”三位一体架构,解决 Dify 在代码执行与定时调度上的局限。通过 Notebook 扩展 Python 环境,Airflow实现任务调度,构建可扩展、可运维的企业级智能 Agent 系统,提升大模型应用的工程化能力。