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)
上一篇:vue day02


下一篇:DOM的事件传播机制