如何将 PHP smarty 模板与 Vue.js 集成? [英] How to integrate PHP smarty template with Vue.js?

查看：26
本文介绍了如何将 PHP smarty 模板与 Vue.js 集成?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 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>测试标题</h2>{{ 信息 }}

{include file="partials/footer.tpl"}

<块引用>

footer.tpl

<script src="resource/js/app.js"></script>

<块引用>

app.js

var app = new Vue({el: '#app',数据: {消息:你好，Vue！"}})

<块引用>

错误信息:

致命错误:未捕获 -->Smarty 编译器:第 11 行模板file:\resource\html\templates\home.tpl"中的语法错误{{ message }}" - 意外的{" <-- throw in vendor\smarty\smarty\libs\第 11 行的 sysplugins\smarty_internal_templatecompilerbase.php

感谢任何帮助.谢谢

解决方案

在你的 app.js 中使用 delimiters

var app = new Vue({分隔符:['%%', '%%'],el: '#app',数据: {消息:你好，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>测试标题</h2>％％ 信息 ％％

{include file="partials/footer.tpl"}

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)

Code Below:

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

<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!'
  }
})

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

解决方案

In your app.js use delimiters

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

and then in home.tpl wrap message with %%

{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 集成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆