刷新并检索源代码

Question

为了帮助我解释我想要实现的目标，我将首先展示一张图片：

在右侧我有一个<div>，在其中，jquery和ajax正在用css注入一个html页面。

我有两个问题。

1. 当我更改div中的文本时，例如我将This text can be edited by the user编辑为hello，该页面的源代码未更新，可能是因为它注入。我该怎么做才能解决这个问题？也许以某种方式在用户交互时动态刷新页面？请举个例子。

2. 第二个问题只会在第一个问题解决后出现，也就是说，如何检索“更新的”源代码并更新/保存该文件，以便在重新加载页面时应用更改？

在我的数据库中，我有一个文件位置，即example.html，我正在把它注入页面，但我不知道是否可以更新该文件，或者在该表中注入源代码页面和更改时，更新源代码而不是更新文件。

Answer 1

不确定这是否是你想要实现的目标，但这是一个快速的例子，你可以利用Vue直接将html插入div中，如果这就是你想要的

注意使用{{{input}}}取消对html的访问

new Vue({
  el: '#app',
  data: {
    input: '# <div>This can be edited by the user</div>'
  }
});

.box{
  height: 200px;
  width: 200px;
  background: #cecece;
}

input{
   width: 100%;
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<div id="app">

  <textarea>Comment stuff</textarea>
  <button>Button</button>
  <br>
  <input v-model="input">
  
  <div class="box">
    {{input}}
  </div>

</div>