1. 自定义组件使用v-model模拟input实现双向绑定
  2. 组件上v-model是v-bind和v-on的语法糖,默认绑定value值和input事件。自定义时可以利用model选项更改:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    props: {
    val: String
    },
    model: {
    prop: "val", //更改为绑定val
    event: "input"
    },
    methods: {
    changeVal() {
    //
    this.$emit("input", newVal)
    }
    }
  3. 如果是子组件又想通过input更改,可以将val转化为自己的data,用watch监听,一旦更改,就emit

  4. keep-alive缓存组件状态
    创意编辑涉及三个步骤,考虑到可能会返回上一步,需要缓存ID未变更情况下,小组件的状态,提升用户体验。但是问题当ID变化,小组件setOptions内容未更新,还是上次缓存的内容。解决是在路由变化到setOptions,组件激活前hook:activated时,根据ID刷新内容。

  5. 加载过渡
    vue自身有一个this.Loading.start()和this.Loading.end()
    iview有一个注入到vue原型上的:this.Spin.show()和this.Spin.hide()

  6. url-regex对象可以测试URL是否合格urlRegex().test(url)
  7. 父组件想要获取子组件里的函数:this.$refs.子组件的ref值 === 子组件本身this
  8. computed里创建的值会放到this.$data下面
  9. 事件想要传入事件对象:@click=”cutMove($event)”,想要传入值:@click=”cutMove(index)”
  10. 创建vue组件时,data必须是函数,保证每个组件(vue实例)都有自己独一的data
  11. 数组用includes代替以前indexOf判断是否存在。includes(ele)返回Boolean,indexOf(ele)返回index,没有返回-1,但是坑在-1判断为true: Boolean(-1) === true;
  12. 左右两个button,想按顺序排列在右下角,在结构上写成右左,父级display:flex,flex-direction:row-reverse;