每天几个前端小知识

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

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文件中使用


目录
相关文章
|
6月前
|
移动开发 前端开发 JavaScript
大前端时代
大前端时代
98 1
|
6月前
|
前端开发 JavaScript 测试技术
前端 (3)
前端 (3)
26 0
|
6月前
|
前端开发 程序员 数据处理
关于前端的一些
关于前端的一些
41 1
|
6月前
|
SQL 安全 前端开发
前端安全方面
前端安全方面
49 0
|
编解码 移动开发 前端开发
什么是前端?
一、什么是前端 前端是指网页开发中与用户交互直接相关的部分,包括网页的设计、布局、交互以及与后端进行数据交互的功能。前端开发主要使用HTML、CSS和JavaScript等技术来实现网页的展示和交互功能。前端开发人员通常负责将设计师提供的网页设计转化为网页代码,并与后端开发人员进行协作,实现网页的功能和数据交互。前端开发的目标是提供用户友好的界面和良好的用户体验。 二、前端的特点 前端开发具有以下几个特点: 1. 用户界面设计:前端开发主要负责网页的设计和布局,包括页面的样式、排版、色彩等,以及用户交互的设计。前端开发人员需要具备一定的美学和设计能力,以提供用户友好的界面和良好的用户体验。
284 0
|
6月前
|
资源调度 前端开发 JavaScript
前端 (4)
前端 (4)
32 0
|
编解码 移动开发 前端开发
什么是前端,前端是什么?
什么是前端,前端是什么?
179 0
|
缓存 小程序 前端开发
每天几个前端小知识
每天几个前端小知识
61 0
|
Web App开发 前端开发 JavaScript
纯前端实现视频混流
随着前端音视频技术的不断成熟越来越多的直播平台开始提供网页开播的直播方式,不需要再使用 OBS 或者各家的直播伴侣。
541 0
|
前端开发 JavaScript UED
关于前端的一些思考
前端开发作为Web前端的重要组成部分,越来越受到关注。为了在竞争激烈的市场中脱颖而出,我们需要不断创新并进行原创性的开发。
99 0