如何将 PHP smarty 模板与 Vue.js 集成?
Posted
技术标签:
【中文标题】如何将 PHP smarty 模板与 Vue.js 集成?【英文标题】:How to integrate PHP smarty template with Vue.js? 【发布时间】:2017-11-11 00:45:52 【问题描述】:我正在使用 php 中的 Smarty 模板引擎并希望将 VUE.js 集成到我的应用程序中,但似乎 Smarty 不理解 Vue.js 语法(双花括号)
代码如下:
home.tpl
include file="partials/header.tpl" title="Home"
<body data-spy="scroll" data-target=".navbar">
<div class="se-pre-con"></div>
include file="partials/navbar.tpl"
<div class="container container-body">
<div class="row">
<div class="col-md-12" id="app">
<h2>Test Heading</h2>
message
</div>
</div>
</div>
include file="partials/footer.tpl"
页脚.tpl
<script src="https://unpkg.com/vue"></script>
<script src="resource/js/app.js"></script>
app.js
var app = new Vue(
el: '#app',
data:
message: 'Hello Vue!'
)
错误信息:
Fatal error: Uncaught --> Smarty Compiler: Syntax error in template "file:\resource\html\templates\home.tpl" on line 11 " message " - Unexpected " " <-- thrown in vendor\smarty\smarty\libs\sysplugins\smarty_internal_templatecompilerbase.php on line 11
感谢任何帮助。谢谢
【问题讨论】:
你应该检查这个***.com/a/12738181/6611700 虽然链接的答案是角度的,同样的事情适用于任何JS渲染/解析库 太棒了!感谢@riyaz_ali,它成功了。 【参考方案1】:在您的app.js
中使用delimiters
var app = new Vue(
delimiters: ['%%', '%%'],
el: '#app',
data:
message: 'Hello Vue!'
,
);
然后在home.tpl
中用%%
包裹message
include file="partials/header.tpl" title="Home"
<body data-spy="scroll" data-target=".navbar">
<div class="se-pre-con"></div>
include file="partials/navbar.tpl"
<div class="container container-body">
<div class="row">
<div class="col-md-12" id="app">
<h2>Test Heading</h2>
%% message %%
</div>
</div>
</div>
include file="partials/footer.tpl"
【讨论】:
以上是关于如何将 PHP smarty 模板与 Vue.js 集成?的主要内容,如果未能解决你的问题,请参考以下文章