如何将PHP smarty模板与Vue.js集成？

Question

Am working with Smarty templating engine in PHP and want to integrate VUE.js into my application but seems like Smarty doesn't understand Vue.js syntax (double curly braces) 我在PHP中使用Smarty模板引擎，并希望将VUE.js集成到我的应用程序中，但似乎Smarty不理解Vue.js语法（双花括号）

Code Below: 代码如下：

home.tpl 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"}

footer.tpl footer.tpl

<script src="https://unpkg.com/vue"></script>
<script src="resource/js/app.js"></script>

app.js app.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Error Message: 错误信息：

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

Any help is appreciated. 任何帮助表示赞赏。 Thanks 谢谢

Answer 1

In your app.js use delimiters 在你的app.js使用delimiters

var app = new Vue({
    delimiters: ['%%', '%%'],
    el: '#app',
    data: {
        message: 'Hello Vue!'
    },
});

and then in home.tpl wrap message with %% 然后在带有%% 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集成？

问题描述

1 个解决方案

解决方案1
12 已采纳 2017-07-01 09:19:53

如何将PHP smarty模板与Vue.js集成？

问题描述

1 个解决方案

解决方案1 12 已采纳 2017-07-01 09:19:53

解决方案1
12 已采纳 2017-07-01 09:19:53