vue让我恍然大悟的操作

226 阅读1分钟

前言

使用已经一年多了,最近又重新仔细的阅读vue的官方文档,又发现一些很有用但平时没有使用过的一些技巧和方法

1.动态组件

之前要根据条件渲染不同的组件常用v-if或者v-show, 其实官方还有一种方法就是动态组件

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

在上述示例中,currentTabComponent 可以包括

  • 已注册组件的名字
  • 一个组件的选项对象

2.绑定键盘事件keyup

<input type="text" v-model.trim="msg"  @keyup.enter="push">

3.data 初始化

props 要比 data 先完成初始化

export default {
  data () {
    return {
      buttonSize: this.size
    }
  },
 props: {
   size: String
 }
}

4. v-cloak 指令解决数据未加载页面闪烁问题

<div id="app" v-cloak>
    {{context}}
</div>
[v-cloak]{
    display: none;
}

结语

文章刚刚开始写,会不定期更新