vue知识点记录

       1、子组件可以通过 this.$parent.xxx() 触发父组件的xxx方法。

       2、监听vuex中的状态变化

          computed: {

            getDemo() {

              return this .$store.state.xxx

              }

          },

          watch: {

            getDemo(val) {

              this .demo = val // demo : val

             }

         }

       3、vuex中的数据刷新浏览器会消失，可以采用  sessionStorage.setItem( key,'xxx')  sessionStorage.getItem(key)

       4、挂载完成时添加鼠标滚动事件 

                       mounted () {

                             window.addEventListener('scroll', this.handleScroll)

                           }

        5、纯前端导出致Excel，data需要自己配

       import XLSX from 'xlsx'
       import XLSX_SAVE from 'file-saver'

export (data) {
       data = [
               ['aaa', 'bbb']
               ['ccc', 'ddd']
               ]
       if (this.detailedList.length != 0) {
       for (var i = 0; i < this.detailedList.length; i++) {
       data[i] = JSON.stringify(this.$refs.detailed[i].innerText)
         }
        }
       // covert json to sheet
       const ws = XLSX.utils.aoa_to_sheet(data)
       const wb = XLSX.utils.book_new()
       XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
       // save
       const wbout = XLSX.write(wb, {type: 'binary', bookType: 'xlsx'})
       XLSX_SAVE.saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), 'detailedList.xlsx')
         }
   6、computed 计算属性，依赖缓存，适用于多个属性影响一个属性，比如计算总价钱需要每个商品价钱相加，总价钱就可以写到计算属性中去
   7、watch 监听属性，适用于一个属性影响多个动作  监听数组变化时vue只监听几种变异方法（官方文档有说），数组内部元素值改变监听不了，vue提供了两种解决方法，1.vue.set 2.array.splice('原元素'，‘新元素’)
   8、v-if  适用于组件切换次数少，只有条件为真时会渲染模板，切换时组件内时间监听等会销毁重建，重新渲染模板，切换时渲染开销大  v-show  适用于切换次数频繁，初始渲染时不管条件真假都会渲染，切换时属于纯css切换，初始渲染开销大

 

    

转载于:https://www.cnblogs.com/Mr-qiu/p/8031439.html