拉出jQuery应用程序的一部分并将其功能重构到Vue中的最佳方法是什么？

我有一份申请。这是一个简单的编辑器，您可以在其中选择项目列表，例如电影。编辑项目时，会打开一个jQuery对话框，可以在其中输入数据

我想开始慢慢地将一些功能分离成更小的Vue组件。这样，每个项目（如电影或游戏）都可以是它自己单独的Vue应用程序

目前我考虑的方法是继续使用jQuery.dialog，但当对话框打开时，将Vue的新实例装载到对话框内容中，以显示要编辑的信息

我的小提琴：

以下代码重复：

<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>

---

从jQuery重构到Vue.js的应用程序看起来是一个良好的开端

不过，最好使用Vue.js组件来封装整个对话框。Vue.js的优势正是组件的方向。查找父节，如。。。它可以用Vue.js组成JavaScript逻辑，在Vue.js生命周期中，例如：mounted，使用jQuery作为补充。在重构过程中，最好始终尝试使用Vue.js包装组件

[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'
})

---

这是一个很好的答案，唯一的问题是，我希望更改externalData变量会更新对话框的内容。我也能修好吗？你当然能！很抱歉，原版只是我想做的一个简单的模型。