SpiderBasic

Code: Select all

DeclareModule Vue
  EnableExplicit
  Declare Init(Callback)
EndDeclareModule

Module Vue
  EnableExplicit
  Procedure Init(Callback)
    ! require(["https://cdn.jsdelivr.net/npm/vue/dist/vue.js"], function(V) {
    !   window.Vue = V;
    !   v_callback();
    ! });
  EndProcedure
EndModule

Enumeration
  #Window1
  #TextGadget1
  #StringGadget1
EndEnumeration

Procedure Main()
  
  OpenWindow   (#Window1,        0,   0, 270, 160, "Vue.js-Example", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  StringGadget (#StringGadget1, 10,  10, 250,  20, "{{message}}")
  TextGadget   (#TextGadget1,   10,  40, 250,  20, "You typed: '{{message}}'")
  
  GID = GadgetID(#StringGadget1)
  
  ! $(v_gid.div).find("input").attr("v-model", "message");
  
  WID = WindowID(#Window1)
  
  ! var win1 = new Vue({
  !   el: $(v_wid.element).find(".spiderwindow-content")[0],
  !   data: {
  !     message: 'SB & Vue.js: I like it! :-)'
  !   }
  ! });
  
EndProcedure

Vue::Init(@Main())