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