我已经搜索了几个小时，但没有找到任何接近我的用例的东西。
- 我有一个用 JAVA 制作的经典/多页/服务器渲染的电子商务网站
- 我有一个页面，服务器在其中呈现带有分页的产品列表
- 今天，我使用jQuery做分页，给用户更好的加载体验
- 在我的服务器上，如果请求是 AJAX 发送一个 json 响应，否则我呈现一个普通的 html 视图
- 使用 jQuery 和 vanilla 真的很简单，使用 Vue 似乎不起作用，因为 Vue 的 v-for 和其他模板绑定直接替换了服务器呈现的模板……</li>
- 服务器会渲染这个：
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
article {
margin: 8px 0;
background: #eee;
padding: 20px;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}<!-- server rendered -->
<div id="app">
<h2>Freelance list</h2>
<article>
<h3>louane</h3>
<p>
City : <strong>courbevoie</strong>
<br> Phone : <strong>05-36-23-51-89</strong>
</p>
</article>
<article>
<h3>indra</h3>
<p>
City : <strong>rheden</strong>
<br> Phone : <strong>(354)-415-2419</strong>
</p>
</article>
<article>
<h3>angelo</h3>
<p>
City : <strong>montpreveyres</strong>
<br> Phone : <strong>(883)-474-9314</strong>
</p>
</article>
<a href="/prev-link">prev</a>
<a href="/next-link">next</a>
</div>
<!-- server rendered -->- 我希望能够使用 Vue 做这样的事情：
// fake url link, normally this would be taken from the href or something
var url = 'https://randomuser.me/api/?seed=abc&results=3&page=';
var page = 1;
var $articles = $('.articles');
var tpl = $articles.children().eq(0).clone();
$('.prev').click(function(e) {
e.preventDefault();
if (page <= 1) {
return
}
page--;
$.getJSON(url + page)
.done(onReqDone);
});
$('.next').click(function(e) {
e.preventDefault();
page++;
$.getJSON(url + page)
.done(onReqDone);
});
function onReqDone(res) {
$articles.html('');
res.results.forEach(function(user) {
var $node = tpl.clone();
$node.find('h3').text(user.name.first);
$node.find('strong:eq(0)').text(user.location.city);
$node.find('strong:eq(1)').text(user.phone);
$articles.append($node);
window.scroll(0, 0);
});
}body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
article {
margin: 8px 0;
background: #eee;
padding: 20px;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- server rendered -->
<div id="app">
<h2>Freelance list</h2>
<div class="articles">
<article>
<h3>louane</h3>
<p>
City : <strong>courbevoie</strong>
<br> Phone : <strong>05-36-23-51-89</strong>
</p>
</article>
<article>
<h3>indra</h3>
<p>
City : <strong>rheden</strong>
<br> Phone : <strong>(354)-415-2419</strong>
</p>
</article>
<article>
<h3>angelo</h3>
<p>
City : <strong>montpreveyres</strong>
<br> Phone : <strong>(883)-474-9314</strong>
</p>
</article>
</div>
<a href="/prev-link" class="prev">prev</a>
<a href="/next-link" class="next">next</a>
</div>
<!-- server rendered -->关于如何做到这一点的任何想法？这是我的尝试： https ://jsfiddle.net/7270zft3/2/ ：问题，它不会删除旧的dom
PS：在有人用 Vue 谈论 SSR 之前，你只是在做一个 SPA，这就是为什么我不能：
- 这个电商网站不能用单页App完全改造，要花太多时间和金钱才能给我们带来好处
- 这个电子商务需要 SEO 来继续推动流量，就像任何电子商务 btw
- 如果 Vue 真的可以像 jQuery 一样使用（这就是我们押注 Vue 的原因），我们应该能够做到这一点而无需完全重写
- 如果我们有时间重写 SPA，我们不能使用 SSR，因为我们的后端是用 JAVA 制作的，而 SSR 似乎只能用于 node 和带有 v8js 模块的 PHP