Vue 前端框架
渐进式 JavaScript 框架
1、Vue 组件传值的几种方式
父组件传值给子组件,子组件使用
props
进行接收子组件传值给父组件,子组件使用
$emit+事件
对父组件进行传值组件中可以使用
$parent
和$children
获取到父组件实例和子组件实例,进而获取数据使用
$attrs
和$listeners
,在对一些组件进行二次封装时可以方便传值,例如 A->B->C使用
$refs
获取组件实例,进而获取数据使用
Vuex
进行状态管理使用
eventBus
进行跨组件触发事件,进而传递数据使用
provide
和inject
,官方建议我们不要用这个,我在看 ElementUI 源码时发现大量使用使用浏览器本地缓存,例如
localStorage
2、路由的 2 种模式
hash 模式:通过
#号
后面的内容的更改,触发hashchange
事件,实现路由切换history 模式:通过
pushState
和replaceState
切换 url,实现路由切换,需要后端配合
3、设置动态 class、style
动态 class 对象:
<div :class="{ 'is-active': true, 'red': isRed }"></div>
动态 class 数组:
<div :class="['is-active', isRed ? 'red' : '' ]"></div>
动态 style 对象:
<div :style="{ color: textColor, fontSize: '18px' }"></div>
动态 style 数组:
<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>
4、父子组件生命周期顺序
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
5、v-if 和 v-show 区别
v-if
是通过控制 dom 元素的删除和生成来实现显隐,每一次显隐都会使组件重新跑一遍生命周期,因为显隐决定了组件的生成和销毁v-show
是通过控制 dom 元素的 css 样式来实现显隐,不会销毁频繁或者大数量显隐使用
v-show
,否则使用v-if
6、去首尾空格
v-model.trim
指令可以在输入后去掉首尾空格