Question

我是这两个框架的新手，发现的第一件事是冲突。因此，因为双大括号是Tornado保留的，所以我将Vue的默认大括号更改为单大括号：

      new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    message: 'Hello Vue.js!'
  }

模板：

<td>${ message }</td>

但是现在它还没有被渲染，我在浏览器中看到的是：

${ message }

如何解决此冲突？难道我做错了什么？谢谢！

UPD我知道了。我做错了几件事： 1）我将脚本放在“ head”部分而不是结尾处。 2）我没有将id =“ app”属性添加到某些父元素来指定app对象。更改代码后，所有内容都开始工作。

Answer 1

将Tornado与使用双花括号的另一个模板系统结合在一起的另一种方法是使用{{!来逃避JavaScript处理的对象：

<h1>This variable comes from Tornado: {{ x }}</h1>
<p>This one comes from Vue: {{! y }}</p>

龙卷风的渲染将删除感叹号，并保留双括号以供Vue使用。

Answer 2

我也遇到了。这就是对我有用的。

将其放在您的main.js中。 N.B，您可以指定分隔符以满足您的需求

  Use Try and catch 

      String  values=Util.getStringFromSP(getActivity(),"time");
        try {
        PERIOD_MS = Long.parseLong(values);
    } catch (Exception e) {

        Log.d("time", "" + values);
        if (PERIOD_MS == 0) {
            PERIOD_MS = 1000;
        }

您可以在HTML中直接使用它。例如

Vue.mixin({ delimiters: ['[[',']]'] })

关于龙卷风和Vue模板的冲突

2 个答案: