在Vue.js2中使用哪个生命周期钩子来调用页面加载时的函数？

Question

我有一个表可能填充任意数量的行（例如3,3800等），所以在填充数据之前，我想应用一个叠加（我已经有一个函数{{1} } 为了那个原因）。这是我的HTML：

applyOverlay()

这是我的JavaScript：

<table id="table" class="datatable" style="width:100%">
    <thead>
        /* table header */
    </thead>
    <tbody>
        <tr v-for="(item, index) in items" item="item">
            <td v-text="item.Name"></td>
            /* more <td> */
        </tr>
    </tbody>
</table>

我尝试使用jQuery的var tblItems = [ /* items */ ]; var app = new Vue({ el: '#table', data: { items: tblItems } }); ，但我看到页面已加载（表格尚未填充），并且我的叠加层直到几秒后才会应用（并填充表格）。我想在html完成加载后立即应用叠加层。我读到了他们的lifecycle，但我不确定应该使用哪个钩子。我的$(document).ready是vanilla JavaScript，不依赖于Vue。

编辑：我尝试过使用applyOverlay()，mounted，beforeMount和created，但没有任何效果。我想知道它是否与jQuery有关。但是，我的jQuery在加载Vue之前会先加载。

Answer 1

您可以使用created，mounted生命周期挂钩或beforeMount挂钩，如下所示：

var app = new Vue({ 
    el: '#table',
    data: {
        items: tblItems
    },
    mounted () {
      // Your code needed to be executed on page load
    }
});

Answer 2

我认为你正在寻找＆＃34;已安装＆＃34; ：

var tblItems = [ /* items */ ];

var app = new Vue({ 
    el: '#table',
    data: {
        items: tblItems
    },
    mounted: function() {
        //init table here because table template is available
    }
});

Answer 3

可以将函数 applyOverlay（）添加到Vue对象的方法属性中。然后使用类似beforeMount的生命周期钩子来调用该方法。为了更全面地解释可用的钩子，Saurabh有一个很好的列表here。

var app = new Vue({ 
    el: '#table',
    data: {
        items: tblItems
    },
    methods: {
        applyOverlay: function() {
             //code for applying overlay
        }
    }
    beforeMount: function() {
        this.applyOverlay();
    }
});

见下面演示的内容。该示例使用HTML class bindings添加叠加层。

var tblItems = [ /* items */ ];

var app = new Vue({
  el: '#table',
  data: {
    items: tblItems,
    status: '',
    overlay: false
  },
  beforeMount() {
    this.applyOverlay();
    setTimeout(this.setUnits, 1500);
  },
  methods: {
    applyOverlay: function() {
      this.overlay = true;
      this.status = "overlay applied";
    },
    setUnits: function() {
      this.overlay = false;
      this.items = [{
        Name: "A",
        status: "done"
      }, {
        Name: "B",
        status: "in transit"
      }];
      this.status = 'set items, overlay removed';
    }
  }
});

.datatable {
  text-align: center;
}

tfoot {
  font-size: small;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  /*dim the background*/
  background-color: rgba(0, 0, 0, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<table id="table" class="datatable" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in items" item="item">
      <td v-text="item.Name"></td>
      <td v-text="item.status"></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Status: {{ status }}
        <div v-bind:class="{overlay: overlay}"></div>
      </td>
    </tr>
  </tfoot>
</table>