Ant Design Vue

• popover组件内容如果包裹的不是一个块级标签，第一次隐藏动画会变的不正常

• 实现hover效果可以使用css

/* B元素默认不显示 */
.B {
    display: none;
}
/* A元素hover时显示B */
.A:hover .B {
    display: block;
}

• tree组件获取选中节点

onSelect (selectedKeys, e) {
    this.selectedNode = e.node.$vnode.data.props.dataRef
}

• VUEX中的dispatch()异步操作和commit()同步操作

commit: 同步操作
存储this.$store.commit('changeValue',name)
取值this.$store.state.changeValue

dispatch: 异步操作
存储this.$store.dispatch('getlists',name)
取值this.$store.getters.getlists

• 父子组件传递对象或者数组

props: {
      dataSource: {
        type: Array,
        default: () => {
          return []
        }
      }
    },

• 子组件监听父组件数据变化

watch: {
      dataSource: {
        handler (newValue, oldValue) {
          this.data = newValue ? [...newValue] : []
        },
        deep: true,  // 深度监听
        immediate: true // 初次绑定就执行
      }
    },

• Vue.nextTick()

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。  
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，  
在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；
通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

• Axios不支持通过GET请求的body来传参数
• VUE过滤器 utils/filter.js

{{ message | filterA('arg1', arg2) }}
这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，
普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

日期格式化
<a-table-column key="createTime" title="创建时间" data-index="createTime" width="20%" align="center">
    <template slot-scope="text">
      {{ text | moment }}
      {{ text | moment('YYYY-MM-DD HH:mm:ss') }}
    </template>
</a-table-column>

• 通用Mapper的insertList要求实体类有且只有一个@Id 或者没有@Id

• 阻止事件冒泡

<a @click.stop="handleEdit(row)">编辑</a>
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。

vue ant popconfirm 阻止事件冒泡
<a-popconfirm>
  <a-icon type="minus-circle-o" @click.stop/>
</a-popconfirm>

• vue在DOM渲染完成后执行一些代码

{
  created () {
    this.$nextTick(() => {
      // 可以使用回调函数的写法
      // 这个函数中DOM必定渲染完成
    })

    this.$nextTick().then(() => {
      // 也支持promise
      // 这个函数中DOM必定渲染完成
    })
  }
}

• VUE 组件实现双向绑定

props: {
  // 值
  value: {
    type: String,
    default: ''
  }
},
this.$emit('input',value)

• 接口上的注解 AOP无法拦截
  https://www.cnblogs.com/yihuihui/p/14864158.html

标签：nextTick,Vue,DOM,Ant,hover,Design,组件,store
来源： https://www.cnblogs.com/ranger-dev/p/15937604.html