Question

如何在页面加载时在Vue.js上启动此回调？：

 lightGallery(document.getElementById('lightgallery'));

Answer 1

Vue的一个生命周期钩子是 beforeMount ，您的代码可以是：

beforeMount(){
   lightGallery(document.getElementById('lightgallery')); 
},

Answer 2

使用生命周期为vue的{{1}}组件中的初始化：

hooks

然后你可以使用组件：

Vue.component('lightGallery', function() {
  template: '<div>Place template markup here</div>',
  mounted: function() {
    $(this.$el).lightGallery(); 
  }
});

Vue提供了不同的生命周期钩子：

我列出的几个是：

beforeCreate ：刚刚初始化实例后，在数据观察和事件/观察者设置之前同步调用。
已创建：在创建实例后同步调用。在此阶段，实例已完成处理选项，这意味着已设置以下内容：数据观察，计算属性，方法，监视/事件回调。但是，安装阶段尚未开始，$ el属性尚不可用。
beforeMount ：在安装开始之前调用：渲染函数即将首次调用。
已安装：刚安装实例后调用，其中el由新创建的虚拟机替换。$ el。
beforeUpdate ：在重新渲染和修补虚拟DOM之前，在数据发生更改时调用。
已更新：数据更改后调用会导致虚拟DOM重新呈现和修补。

您可以查看完整列表here。

您可以选择最适合您的挂钩，并将其挂钩以调用您的功能，如上面提供的示例代码。

如何在Vue.js中启动标准Javascript回调

2 个答案: