Skip to content

Vue 前端框架

渐进式 JavaScript 框架

中文官网

1、Vue 组件传值的几种方式

  • 父组件传值给子组件,子组件使用 props 进行接收

  • 子组件传值给父组件,子组件使用 $emit+事件 对父组件进行传值

  • 组件中可以使用 $parent$children 获取到父组件实例和子组件实例,进而获取数据

  • 使用 $attrs$listeners,在对一些组件进行二次封装时可以方便传值,例如 A->B->C

  • 使用 $refs 获取组件实例,进而获取数据

  • 使用 Vuex 进行状态管理

  • 使用 eventBus 进行跨组件触发事件,进而传递数据

  • 使用 provideinject,官方建议我们不要用这个,我在看 ElementUI 源码时发现大量使用

  • 使用浏览器本地缓存,例如 localStorage

2、路由的 2 种模式

  • hash 模式:通过 #号 后面的内容的更改,触发 hashchange 事件,实现路由切换

  • history 模式:通过 pushStatereplaceState 切换 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 指令可以在输入后去掉首尾空格
你觉得这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度