Vue 前端框架

更新: 2024-03-20 13:47:37   字数: 0 字   时长: 0 分钟

渐进式 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 指令可以在输入后去掉首尾空格