如何将 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 集成?的主要内容,如果未能解决你的问题,请参考以下文章

PHP模板引擎,Smarty定义

smarty基础与实例

Smarty模板引擎

PHP模板引擎smarty详细介绍

Smarty 模板引擎简介

smarty模板基础知识