什麼是拉出部分jQuery應用程序並將其功能重構爲Vue的最佳方式？

Question

我有一個應用程序。這是一個「簡單」編輯器，您可以在其中選擇項目列表（例如電影）。當你編輯一個項目時，打開一個jQuery對話框可以輸入數據。

我想慢慢地將一些功能分解成更小的Vue組件。這樣，每個項目（例如電影或遊戲）都可以是它自己獨立的Vue應用程序。

我現在想這樣做的方式是繼續使用jQuery.dialog，但是當對話框打開時，要將Vue的新實例掛載到對話框的內容中以呈現要顯示的信息編輯。

我的小提琴： https://jsfiddle.net/uL34Lq2e/1/

（代碼複製波紋管）：

<script src="https://unpkg.com/vue"></script> 
<script src="https://unpkg.com/jquery"></script> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

<button class="btn" data-item="7"> 
Edit item #7 - Click here to show dialog box! 
</button> 

<div id="dialog-form" title="Create new user"> 
    <div id="app-template" style="display:none"> 
    {{ message }}.<br /> 
    I have been clicked {{ runTimes }} {{ runTimes == 1 ? "time" : "times" }} 
    </div> 
</div> 

<script> 
var externalData = { 
    "7": { 
    "runTimes": 0 
    } 
} 


$(".btn").click(function() { 

    var item = $(this).data('item') 
    externalData[item].runTimes++; 

t = document.querySelector("#app-template") 
y = t.cloneNode(true); 
y.style.display="block"; 
y.id="app"; 
t.parentElement.append(y) 

    tim = new Vue({ 
    el: '#app', 
    data: { 
     message: 'Hello Vue.js!', 
     runTimes: externalData[item]['runTimes'] 
    } 
    }) 


    $("#dialog-form").dialog({ 
    width: 600, 
    close: function() { 
      document.querySelector("#app").remove() 
      tim.$destroy() 
    }, 
    buttons: { 
     "Click to increase counter": function() { 
      externalData[item].runTimes++; 
      tim.$data.runTimes++; 
      //$(this).dialog("close"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    } 
    }) 
}); 
</script> 

Answer 1

從jQuery的您的應用程序重構到Vue.js看起來一個良好的開端。

但是，最好使用Vue.js組件來封裝整個對話框。 Vue.js的優勢恰恰是組件定位。找到父節（例如，<div id="app">...</div>可以用Vue.js和Vue.js生命週期編寫JavaScript邏輯（例如：mounted），使用jQuery作爲補充。在重構中，最好總是嘗試用Vue.js.

https://jsfiddle.net/t49Lx31k/

[HTML]

<script src="https://unpkg.com/vue"></script> 
<script src="https://unpkg.com/jquery"></script> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

<div id="app"> 
    <dialog-component></dialog-component> 
</div> 

[JavaScript的]

externalData = { 
    "7": { 
    "runTimes": 0 
    } 
} 

Vue.component("dialog-component", { 
    template: ` 
    <div> 
     <button v-on:click="open" data-item="7"> 
     Edit item #7 - Click here to show dialog box! 
     </button> 

     <div id="dialog-form" title="Create new user"> 
     <div id="app"> 
      {{ message }}.<br /> 
      I have been clicked {{ runTimes }} {{ runTimes == 1 ? "time" : "times" }} 
     </div> 
     </div> 
    </div> 
    `, 
    data() { 
    return { 
     message: 'Hello Vue.js!', 
     runTimes: 0 
    } 
    }, 
    methods: { 
    open() { 
     $("#dialog-form").dialog("open") 
    } 
    }, 
    mounted() { 
    $("#dialog-form").dialog({ 
     autoOpen: false, 
     width: 600, 
     buttons: { 
     "Click to increase counter": function() { 
      externalData[item].runTimes++; 
      //$(this).dialog("close"); 
     }, 
     Cancel: function() { 
      tim.$destroy() 
      $(this).dialog("close"); 
     } 
     } 
    }) 
    } 
}) 

new Vue({ 
    el: '#app' 
})