我的日常学习笔记 18.05.14（Vue-API/Vue组件）

1. 再讲一下过渡动画的要点：

   1. 想再加在哪个元素上面。
   2. 动画作用的属性。
   3. 使用类名的添加删除来过渡属性。

2. 继续看Vue的组件内容

   • 动态组件缓存状态<keep-alive></keep-alive>包裹组件

   • 注意：

     • 当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
     • 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。
     • 多个条件性的子元素， 要求同时只有一个子元素被渲染。
     • 三种方式结合include 和exclude属性

     <keep-alive include="a,b">//字符串
     <keep-alive :include="/a|b/">//正则
     <keep-alive :include="['a', 'b']">//数组
     复制代码

3. Vue-API

   • vm.$mount( [elementOrSelector] )未挂载的实例手动挂载
   • vm.$forceUpdate()强制实例重新渲染
   • v-on:
     • stop - 调用 event.stopPropagation()。
     • prevent - 调用 event.preventDefault()。
     • capture - 添加事件侦听器时使用 capture 模式。
     • self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
     • {keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
     • native - 监听组件根元素的原生事件。
     • once - 只触发一次回调。
     • left - (2.2.0) 只当点击鼠标左键时触发。
     • right - (2.2.0) 只当点击鼠标右键时触发。
     • middle - (2.2.0) 只当点击鼠标中键时触发。
     • passive - (2.3.0) 以 { passive: true } 模式添加侦听器
     • 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
   • 从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

   <!-- 对象语法 (2.4.0+) -->
   <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
   复制代码

   • v-bind

   <!-- 内联字符串拼接 -->
   <img :src="'/path/to/images/' + fileName">
   <!-- 绑定一个有属性的对象 -->
   <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
   复制代码

4. 解决键盘弹出后挡表单的问题

    window.addEventListener('resize', function() {
     if(
       document.activeElement.tagName === 'INPUT' ||
       document.activeElement.tagName === 'TEXTAREA'
     ) {
       window.setTimeout(function() {
         if('scrollIntoView' in document.activeElement) {
           document.activeElement.scrollIntoView();
         } else {
           document.activeElement.scrollIntoViewIfNeeded();
         }
       }, 0);
     }
   });
   
   document.querySelector('#inputId').scrollIntoView();
   //只要在input的点击事件，或者获取焦点的事件中，加入这个api就好了
   复制代码

5. 继续看Vue-API

   • 访问父子组件的应急方法$parent 和 $children
   • Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。（混入）
   • 根元素挂载：所有的挂载元素会被 Vue 生成的 DOM 替换。提供的元素只能作为挂载点。不做他用，不要挂在body和html上。
   • data：如果你为 data 属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。
   • 如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。
   • 删除vm.$delete( target, key )
   • 添加vm.$set( target, key, value )
   • 监听属性

     1. // 键路径vm.$watch('a.b.c', function (newVal, oldVal) {})

     2. // 函数vm.$watch(function () {return this.a + this.b },function (newVal, oldVal)})

     3. vm.$watch 返回一个取消观察函数，用来停止触发回调：

        var unwatch = vm.$watch('a', cb)
        // 之后取消观察
        unwatch()
        复制代码

     4. 为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。

     5. 在选项参数中指定 immediate: true将立即以表达式的当前值触发回调。

转载于:https://juejin.im/post/5afa806251882542b000a991