vue进阶学习

此篇主要是个人对vue教程上第一遍未吃透的概念的理解

1 原生事件绑定到组件

在 Vue 中，对于原生元素（

、 等）只能监听原生事件（也就是 HTMLElement.addEventListener() 实现的效果）；而对于 Vue 自定义组件，默认只能监听那个组件主动 $emit() 出来的自定义事件。
而使用native可以直接监听组件根元素的原生事件(强调：监听的是根元素的事件)；
所以如果组件的根元素不包含组件上原生事件(比如label标签就没有input事件)时就会出现静默失败，也就是官方引入$listeners属性(包含该组件上所有监听器)作为替换native绑定的第二套方案的原因：
1）在子组件模板上使用 v-on=“xxx” 将所有的事件监听器指向这个组件的某个特定的子元素
2）创建xxx的计算属性：

computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }

2 sync修饰符

用于父子组件某个数据的同步更新

等价于：

this.$emit('update:title', newTitle)

tips: 数据不能使用表达式；v-bind.syns="doc"可以将对象doc的属性拆散分别传入，但不能直接字面量对象{title:doc.title}

3 Vue-Cli 3.0从0 开始搭建项目

https://juejin.im/post/5ccd4580f265da038932a461