首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何将PHP智能模板与Vue.js集成?

如何将PHP智能模板与Vue.js集成?
EN

Stack Overflow用户
提问于 2017-06-09 06:02:17
回答 1查看 5.5K关注 0票数 3

我正在使用PHP中的智能模板引擎,并希望将VUE.js集成到我的应用程序中,但似乎Smarty不懂Vue.js语法(双大括号)

代码如下:

home.tpl

代码语言:javascript
复制
{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

代码语言:javascript
复制
<script src="https://unpkg.com/vue"></script>
<script src="resource/js/app.js"></script>

app.js

代码语言:javascript
复制
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

错误信息:

代码语言:javascript
复制
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

任何帮助都是非常感谢的。谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-01 09:19:53

在您的app.js中使用delimiters

代码语言:javascript
复制
var app = new Vue({
    delimiters: ['%%', '%%'],
    el: '#app',
    data: {
        message: 'Hello Vue!'
    },
});

然后在home.tpl中用%%包装message

代码语言:javascript
复制
{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"}
票数 14
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44450342

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档