随着互联网越来越发达，网站建设制作当中的前端技术也日益更新，最近大家都听过很流行的框架，叫做vue，vue其实对于后台的前端框架来说是比较有效率的，只要处理好所有数据，其他通过vue的特点来使用也是不错的选择。
Vue对于单页面应用程序来说是一个很棒的工具，但是尝试将它集成到用PHP学习或Python编写的现有CMS中是一项艰巨的任务（除非您使用的是Laravel）。当您面对捆绑包，入口点，块，资产，公共路径和资源根源时，尤其是在插件/插件驱动架构（a-la Wordpress）中，这一切都变得非常痛苦。
没有人想要再处理jQuery，特别是在基于数据突变重新渲染组件时。乍一看，对于从jQuery到现代前端堆栈的迭代迁移，Vue似乎是一个可行的候选者（比React或Angular更多）。然而，当你开始这个旅程时，你会遇到许多问题和难以做出的决定。由于内联脚本和属性绑定，通常无法将整个页面挂载为Vue组件，并且可能导致各种兼容性问题和冲突。尝试基于元素#id挂载多个Vue实例会导致大量重复的JS调用，并导致混乱的构建过程。如果项目使用RequireJS，则构建多个库目标还存在其他问题。痛点列表还在继续。
如果我们可以构建一个可作为调度程序的入口点，加载必要的Vue组件并将占位符转换为已安装的Vue实例，该怎么办？我们向他们介绍了他们采用的有趣方法，将他们的TYPO3模板与交互式Vue组件一起使用。我对这种方法很感兴趣，因为它似乎是我一直在努力的一段时间，并开始修补它，看看我能想出什么。
假设我们想在页面上显示的所有卡片上添加一个类似的按钮，因此我们会在卡片的Twig模板中添加类似的内容。如果您使用的是不同的模板语言或纯HTML，请确保将JSON数据正确编码为元素属性。
现在，让我们创建我们的LikeButtonVue组件。这只是一个例子，所以它有点愚蠢 - 我想要做的是为什么当有可变的内部组件状态时你不想使用jQuery。
{{ ` $ { likesCount }这样的人` }} div >
{{userLikes ？ '不像' ： '喜欢' }} div >
div >
template >
export default {
道具： {
喜欢： {
类型： 数组，
default（）{
return [];
}
}，
userLikes ： {
type ： Boolean，
默认值： false，
}
}，
data（）{
返回 {
likesCount ： 这个。喜欢。长度，
likeStatus ： 这个。userLikes，
}
}，
方法： {
toggleLike（）{
如果（此。likeStatus）{
//发送API请求
这个。likesCount - ;
这个。likeStatus = false ;
} else {
//发送API请求
这个。likesCount ++ ;
这个。likeStatus = true ;
}
}
}
}
script >
