Vue学习日记34

1.Button属性
解析：
[1]size：尺寸
[2]type：类型
[3]plain：是否朴素按钮
[4]round：是否圆角按钮
[5]circle：是否圆形按钮
[6]loading：是否加载中状态
[7]disabled：是否禁用状态
[8]icon：图标类名
[9]autofocus：是否默认聚焦
[10]native-type：原生type属性

2.解决vue的{__ob__: observer}取值问题
解析：将返回的数据data先转换为JSON字符串形式，然后再从字符串形式转换成JSON格式JSON.parse(JSON.stringify(data))：

let resdata=JSON.parse(JSON.stringify(that.runlogData));  
console.log("运行记录组件接到的数据",resdata);

3.v-bind:key
解析：为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一key属性：

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

因为它是Vue识别节点的一个通用机制，key并不仅与v-for特别关联。

4.Provide与Inject
解析：Provide以及Inject是Vue中用于祖先元素向其所有后台元素注入依赖的接口：
[1]当父组件不便于向子组件传递数据，就把数据通过Provide传递下去，然后子组件通过Inject来获取
[2]以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效
[3]一旦父级注入的属性修改，子组件无法获取变化

5.npm i -S vue-property-decorator
解析：@Prop、@PropSync、@Model、@ModelSync、@Watch、@Provide、@Inject、@ProvideReactive、@InjectReactive、@Emit、@Ref、@VModel、@Component、Mixins

6.@Prop(options: (PropOptions | Constructor[] | Constructor) = {})修饰符
解析：

import { Vue, Component, Prop } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined
}

等价于：

export default {
  props: {
    propA: {
      type: Number,
    },
    propB: {
      default: 'default value',
    },
    propC: {
      type: [String, Boolean],
    },
  },
}

7.@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})修饰符
解析：

import { Vue, Component, PropSync } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
  @PropSync('name', { type: String }) syncedName!: string
}

等价于：

export default {
  props: {
    name: {
      type: String,
    },
  },
  computed: {
    syncedName: {
      get() {
        return this.name
      },
      set(value) {
        this.$emit('update:name', value)
      },
    },
  },
}

8.@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})修饰符
解析：

import { Vue, Component, Model } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
  @Model('change', { type: Boolean }) readonly checked!: boolean
}

等价于：

export default {
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
    checked: {
      type: Boolean,
    },
  },
}

9.@ModelSync(propName: string, event?: string, options: (PropOptions | Constructor[] | Constructor) = {})修饰符
解析：

import { Vue, Component, ModelSync } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
  @ModelSync('checked', 'change', { type: Boolean })
  readonly checkedValue!: boolean
}

等价于：

export default {
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
    checked: {
      type: Boolean,
    },
  },
  computed: {
    checkedValue: {
      get() {
        return this.checked
      },
      set(value) {
        this.$emit('change', value)
      },
    },
  },
}

10.@Watch(path: string, options: WatchOptions = {})修饰符
解析：

import { Vue, Component, Watch } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {}
  @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val: Person, oldVal: Person) {}
  @Watch('person')
  onPersonChanged2(val: Person, oldVal: Person) {}
}

等价于：

export default {
  watch: {
    child: [
      {
        handler: 'onChildChanged',
        immediate: false,
        deep: false,
      },
    ],
    person: [
      {
        handler: 'onPersonChanged1',
        immediate: true,
        deep: true,
      },
      {
        handler: 'onPersonChanged2',
        immediate: false,
        deep: false,
      },
    ],
  },
  methods: {
    onChildChanged(val, oldVal) {},
    onPersonChanged1(val, oldVal) {},
    onPersonChanged2(val, oldVal) {},
  },
}

11.@Provide(key?: string | symbol) / @Inject(options?: { from?: InjectKey, default?: any } | InjectKey)修饰符
解析：

import { Component, Inject, Provide, Vue } from 'vue-property-decorator'
const symbol = Symbol('baz')
@Component
export class MyComponent extends Vue {
  @Inject() readonly foo!: string
  @Inject('bar') readonly bar!: string
  @Inject({ from: 'optional', default: 'default' }) readonly optional!: string
  @Inject(symbol) readonly baz!: string
  @Provide() foo = 'foo'
  @Provide('bar') baz = 'bar'
}

等价于：

const symbol = Symbol('baz')
export const MyComponent = Vue.extend({
  inject: {
    foo: 'foo',
    bar: 'bar',
    optional: { from: 'optional', default: 'default' },
    baz: symbol,
  },
  data() {
    return {
      foo: 'foo',
      baz: 'bar',
    }
  },
  provide() {
    return {
      foo: this.foo,
      bar: this.baz,
    }
  },
})

12.@ProvideReactive(key?: string | symbol) / @InjectReactive(options?: { from?: InjectKey, default?: any } | InjectKey)修饰符
解析：

const key = Symbol()
@Component
class ParentComponent extends Vue {
  @ProvideReactive() one = 'value'
  @ProvideReactive(key) two = 'value'
}
@Component
class ChildComponent extends Vue {
  @InjectReactive() one!: string
  @InjectReactive(key) two!: string
}

13.@Emit(event?: string) decorator修饰符
解析：

import { Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
  count = 0
  @Emit()
  addToCount(n: number) {
    this.count += n
  }
  @Emit('reset')
  resetCount() {
    this.count = 0
  }
  @Emit()
  returnValue() {
    return 10
  }
  @Emit()
  onInputChange(e) {
    return e.target.value
  }
  @Emit()
  promise() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(20)
      }, 0)
    })
  }
}

等价于：

export default {
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    addToCount(n) {
      this.count += n
      this.$emit('add-to-count', n)
    },
    resetCount() {
      this.count = 0
      this.$emit('reset')
    },
    returnValue() {
      this.$emit('return-value', 10)
    },
    onInputChange(e) {
      this.$emit('on-input-change', e.target.value, e)
    },
    promise() {
      const promise = new Promise((resolve) => {
        setTimeout(() => {
          resolve(20)
        }, 0)
      })

      promise.then((value) => {
        this.$emit('promise', value)
      })
    },
  },
}

14.@Ref(refKey?: string)修饰符
解析：

import { Vue, Component, Ref } from 'vue-property-decorator'
import AnotherComponent from '@/path/to/another-component.vue'
@Component
export default class YourComponent extends Vue {
  @Ref() readonly anotherComponent!: AnotherComponent
  @Ref('aButton') readonly button!: HTMLButtonElement
}

等价于：

export default {
  computed() {
    anotherComponent: {
      cache: false,
      get() {
        return this.$refs.anotherComponent as AnotherComponent
      }
    },
    button: {
      cache: false,
      get() {
        return this.$refs.aButton as HTMLButtonElement
      }
    }
  }
}

15.@VModel(propsArgs?: PropOptions)修饰符
解析：

import { Vue, Component, VModel } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
  @VModel({ type: String }) name!: string
}

等价于：

export default {
  props: {
    value: {
      type: String,
    },
  },
  computed: {
    name: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      },
    },
  },
}

16.Vue中provide和inject用法
解析：
[1]成对出现：provide和inject是成对出现的
[2]作用：用于父组件向子孙组件传递数据
[3]使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据
[4]使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

17.lodash
解析：数组、集合、函数、语言、数学、数字、对象、Seq、字符串、实用函数、Properties、Methods：
[1]遍历array、object和string
[2]对值进行操作和检测
[3]创建符合功能的函数

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');
// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');
// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

18.futil-js
解析：futil-js是一套用来补足lodash的实用工具集。

19.Table表格
解析：

[1]基础表格：基础的表格展示用法。当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。
[2]带斑马纹表格：使用带斑马纹的表格，可以更容易区分出不同行的数据。stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。
[3]带边框表格：默认情况下，Table组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。
[4]带状态表格：可将表格内容highlight显示，方便区分「成功、信息、警告、危险」等内容。可以通过指定Table组件的row-class-name属性来为Table中的某一行添加class，表明该行处于某种状态。
[5]固定表头：纵向内容过多时，可选择固定表头。只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。
[6]固定列：横向内容过多时，可选择固定列。固定列需要使用fixed属性，它接受Boolean值或者leftright，表示左边固定还是右边固定。
[7]固定列和表头：横纵内容过多时，可选择固定列和表头。固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。
[8]流体高度：当数据量动态变化时，可以为Table设置一个最大高度。通过设置max-height属性为Table指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
[9]多级表头：数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。只需要在el-table-column里面嵌套el-table-column，就可以实现多级表头。
[10]单选：选择单行数据时使用色块表示。Table组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从1开始的索引号。
[11]多选：选择多行数据时使用Checkbox。实现多选非常简单：手动添加一个el-table-column，设type属性为selection即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在hover时以tooltip的形式显示出来。
[12]排序：对表格进行排序，可快速查找或对比数据。在列中设置sortable属性即可实现以该列为基准的排序，可以通过Table的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。
[13]筛选：对表格进行筛选，可快速查找到自己想看的数据。在列中设置filtersfilter-method属性即可开启该列的筛选，filters是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value,row和column。
[14]自定义列模板：自定义列的显示内容，可组合其它组件使用。通过Scopedslot可以获取到row,column,$index和store[table内部的状态管理]的数据。
[15]展开行：当行内容过多并且不想显示横向滚动条时，可以使用Table展开行功能。通过设置type="expand"和Scoped slot可以开启展开行功能，el-table-column的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的Scoped slot相同。
[16]树形数据与懒加载：支持树类型的数据的显示。当row中包含children字段时，被视为树形数据。children与hasChildren都可以通过tree-props配置。
[17]自定义表头：表头支持自定义。通过设置Scoped slot来自定义表头。
[18]合并行或列：多行或多列共用一个数据时，可以合并行或列。入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。
[19]自定义索引：自定义type=index列的行号。通过给type=index的列传入index属性，可以自定义索引。

20.Table属性
解析：

[1]data：显示的数据
[2]height：Table的高度，默认为自动高度。如果height为number类型，单位px；如果height为string类型，则这个高度会设置为Table的style.height的值，Table的高度会受控于外部样式
[3]max-height：Table的最大高度。合法的值为数字或者单位为px的高度
[4]stripe：是否为斑马纹table
[5]border：是否带有纵向边框
[6]size：Table的尺寸
[7]fit：列的宽度是否自撑开
[8]show-header：是否显示表头
[9]highlight-current-row：是否要高亮当前行
[10]current-row-key：当前行的key，只写属性
[11]row-class-name：行的className的回调方法，也可以使用字符串为所有行设置一个固定的className。
[12]row-style：行的style的回调方法，也可以使用一个固定的Object为所有行设置一样的Style。
[13]cell-class-name：单元格的className的回调方法，也可以使用字符串为所有单元格设置一个固定的className。
[14]cell-style：单元格的style的回调方法，也可以使用一个固定的Object为所有单元格设置一样的Style。
[15]header-row-class-name：表头行的className的回调方法，也可以使用字符串为所有表头行设置一个固定的className。
[16]header-row-style：表头行的style的回调方法，也可以使用一个固定的Object为所有表头行设置一样的Style。
[17]header-cell-class-name：表头单元格的className的回调方法，也可以使用字符串为所有表头单元格设置一个固定的className。
[18]header-cell-style：表头单元格的style的回调方法，也可以使用一个固定的Object为所有表头单元格设置一样的Style。
[19]row-key：行数据的Key，用来优化Table的渲染；在使用reserve-selection功能与显示树形数据时，该属性是必填的。类型为String时，支持多层访问：user.info.id，但不支持user.info[0].id，此种情况请使用Function。
[20]empty-text：空数据时显示的文本内容，也可以通过slot="empty"设置
[21]default-expand-all：是否默认展开所有行，当Table包含展开行存在或者为树形表格时有效
[22]expand-row-keys：可以通过该属性设置Table目前的展开行，需要设置row-key属性才能使用，该属性为展开行的keys数组。
[23]default-sort：默认的排序列的prop和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序
[24]tooltip-effect：tooltipeffect属性
[25]show-summary：是否在表尾显示合计行
[26]sum-text：合计行第一列的文本
[27]summary-method：自定义的合计计算方法
[28]span-method：合并行或列的计算方法
[29]select-on-indeterminate：在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为true，则选中所有行；若为false，则取消选择所有行
[30]indent：展示树形数据时，树节点的缩进
[31]lazy：是否懒加载子节点数据
[32]load：加载子节点数据的函数，lazy为true时生效，函数第二个参数包含了节点的层级信息
[33]tree-props：渲染嵌套数据的配置选项

21.arrayObject.splice(index,howmany,item1,…,itemX)
解析：
[1]index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置
[2]howmany：必需。要删除的项目数量。如果设置为0，则不会删除项目
[3]item1,…,itemX：可选。向数组添加的新项目

22.Table事件
解析：

[1]select：当用户手动勾选数据行的Checkbox时触发的事件
[2]select-all：当用户手动勾选全选Checkbox时触发的事件
[3]selection-change：当选择项发生变化时会触发该事件
[4]cell-mouse-enter：当单元格hover进入时会触发该事件
[5]cell-mouse-leave：当单元格hover退出时会触发该事件
[6]cell-click：当某个单元格被点击时会触发该事件
[7]cell-dblclick：当某个单元格被双击击时会触发该事件
[8]row-click：当某一行被点击时会触发该事件
[9]row-contextmenu：当某一行被鼠标右键点击时会触发该事件
[10]row-dblclick：当某一行被双击时会触发该事件
[11]row-click：当某一行被点击时会触发该事件
[12]row-contextmenu：当某一行被鼠标右键点击时会触发该事件
[13]row-dblclick：当某一行被双击时会触发该事件
[14]header-click：当某一列的表头被点击时会触发该事件
[15]header-contextmenu：当某一列的表头被鼠标右键点击时触发该事件
[16]sort-change：当表格的排序条件发生变化的时候会触发该事件
[17]filter-change：当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的key是column的columnKey，对应的value为用户选择的筛选条件的数组。
[18]current-change：当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的highlight-current-row属性
[19]header-dragend：当拖动表头改变了列的宽度的时候会触发该事件
[20]expand-change：当用户对某一行展开或者关闭的时候会触发该事件[展开行时，回调的第二个参数为expandedRows；树形表格时第二参数为expanded]

23.Table方法
解析：

[1]clearSelection：用于多选表格，清空用户的选择
[2]toggleRowSelection：用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否[selected为true则选中]
[3]toggleAllSelection：用于多选表格，切换所有行的选中状态
[4]toggleRowExpansion：用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否[expanded为true则展开]
[5]setCurrentRow：用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态
[6]clearSort：用于清空排序条件，数据会恢复成未排序的状态
[7]clearFilter：不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件
[8]doLayout：对Table进行重新布局。当Table或其祖先元素由隐藏切换为显示时，可能需要调用此方法
[9]sort：手动对Table进行排序。参数prop属性指定排序列，order指定排序顺序

24.Table Slot
解析：
[1]append：插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个slot。若表格有合计行，该slot会位于合计行之上。

25.<template slot-scope=“scope”>
解析：
[1]通过Scoped slot可以获取到row、column、$index和store[table内部的状态管理]的数据
[2]只是能通过scope.row获得当前的行数据

参考文献：
[1]kaorun343/vue-property-decorator：https://github.com/kaorun343/vue-property-decorator