Javascript 使用Vue增强现有多页/服务器呈现/经典web应用

我已经搜索了几个小时，没有找到任何与我的用例相近的东西

• 我有一个用JAVA制作的经典/多页/服务器呈现的电子商务网站
• 我有一个页面，服务器在其中呈现带有分页的产品列表
• 今天，我使用jQuery进行分页，为用户提供更好的加载体验
• 在我的服务器上，如果请求是AJAX，则发送一个json响应，否则我将呈现一个普通的html视图
• 使用jQuery和vanilla非常简单，使用Vue它似乎不起作用，因为Vue的v-for和其他模板绑定直接替换服务器呈现的模板
• 服务器将呈现以下内容：

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}
文章{
利润率：8px0；
背景：#eee；
填充：20px；
}
氢{
字体大小：粗体；
边缘底部：15px；
}
德尔{
颜色：rgba（0,0,0,0.3）；
}

自由职业者名单

您可以将DOM引用附加到服务器呈现的内容，然后就像在jQuery中一样，只需将内容清除到DOM元素

您只需要执行此操作一次，因此如果

page==1

newvue({
el:“应用程序”，
数据：{
用户：空，
页码：1
},
方法：{
loadData:函数（上一个）{
var page=this.page
如果（上一个）{
页面--
}否则{
页面++
}
取（'https://randomuser.me/api/?seed=abc&results=3&page="(附页)
.then（res=>res.json（））
。然后（数据=>{
这。$refs.serverContent.innerHTML=''；
this.users=data.results
this.page=第页
窗口。滚动（0，0）
})
}
}
})

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}
文章{
利润率：8px0；
背景：#eee；
填充：20px；
}
氢{
字体大小：粗体；
边缘底部：15px；
}
德尔{
颜色：rgba（0,0,0,0.3）；
}

自由职业者名单
卢昂

城市：courbevoie

电话：05-36-23-51-89

因陀罗

城市：莱登

电话：354-415-2419

安杰洛

城市：montpreveyes

电话：（883）-474-9314

{{user.name.first}

城市：{{user.location.City}

电话：{{user.Phone}}

上
下一个

一个示例。我无法让Vue停止警告我生成的HTML与原始HTML不匹配；这并不重要。在开发过程中，Vue将“退出并进行完整渲染”，但在生产过程中，它将保留预渲染。您只需要确保它们匹配，这样当它确实更新时，它就是您所期望的

我将jQuery留在了

getJSON

中。除此之外，它是jQuery免费的

//假url链接，通常从href或其他内容获取
var url='1〕https://randomuser.me/api/?seed=abc&results=3&page=';
var-page=1；
$.getJSON（url+页面）.done（（res）=>{
const articles=res.results；
新Vue({
el:“#应用程序”，
模板：`
自由职业者名单
`,
数据：{
页
网址，
文章
},
方法：{
getPage（）{
$.getJSON（this.url+this.page）
.完成（（res）=>{
this.articles=res.results；
});
}
},
观察：{
第（）页{
这个是.getPage（）；
}
}
});
});
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}
文章{
利润率：8px0；
背景：#eee；
填充：20px；
}
氢{
字体大小：粗体；
边缘底部：15px；
}
德尔{
颜色：rgba（0,0,0,0.3）；
}

自由职业者名单
Vue论坛上有人找到了一个很好的方法，接近此处发布的内容，但更适合我的需要：
它正在为我删除旧的dom元素。除了前三个你已经硬编码。“除了前三个你已经硬编码”-这是旧的dom lol，检查jQuery版本以了解我的期望。我想你基本上是在寻找@RoyJ。你能详细说明一下吗。需要明确的是，我需要的是服务器为google bot提供实际数据，以便继续我的SEO，但因为我不希望用户在每次分页时都能体验到完全重新加载，我用AJAXSI处理分页，我看不出水合作用从何而来。水合作用就是：从一个包含数据的服务器呈现页面开始。Vue的初始状态与呈现的页面匹配，而不是替换页面，但所有Vue操作都处于活动状态，因此它可以根据用户输入更新页面。在你的情况下，这只会使分页变得有效。我想你没有读够我的帖子，如果我用Vue风格，那么当一个机器人出现时，他看到没有数据，所以没有SEO，没有流量，这是我在使用jQuery时没有遇到的问题。我们的目标是让服务器为机器人呈现初始数据，然后继续使用ajaxgood解决方案尽管ta添加了一个ref并清空了它，但我会等着看是否有人看到其他东西。这增加了大量的模板复制。嗯，因为这里的标记当然不是真正的标记，所以对于真正的标记，这看起来真的很混乱。。。嗯，没有那么多可维护性，你只有一个模板。您还拥有服务器生成的HTML。他们必须匹配。没有办法，阿罗