Question

建议在内联脚本中将一些非敏感数据传递给vue吗？

HTML

<script>
    var foo = <?php echo $foo ?>
</script>

Vue.js

new Vue({
    data: { 
        foo: foo 
    }
});

Answer 1

这可能有点自以为是，但我避免在应用程序中使用这样的全局变量。相反，我使用HTML5 data-属性并存储前端需要的有用数据位。

您可以这样做：

<body data-my-thing='{"foo": "bar", "baz": true}'>

上面的例子使用JSON，我通常做的是在控制器或视图编辑器中使用json_encode，然后像这样回显字符串（因为我们在这里使用Balde， JSON会自动转义）：

<body data-my-thing='{{ $myJson }}'>

如果您只是使用普通的PHP，那么您应该像这样转义JSON：

<body data-my-thing='<?=htmlspecialchars($myJson) ?>'>

当然，你不需要JSON，如果它更合适，你可以在那里存储一个普通的字符串或数字。这取决于您的应用程序的需求。

要从您的数据属性中获取值，您只需使用以下JavaScript：

document.body.getAttribute('data-my-thing');

如果你已经使用了JSON，请不要忘记解码它！

JSON.parse(document.body.getAttribute('data-my-thing'));

Answer 2

我曾经使用data-属性来引导数据，但我一直遇到涉及引号的问题。

说这个：

<body data-my-thing='{{ $myJson }}'>

评估：

<body data-my-thing='{"foo": "bar", "baz": true}'>

没什么大不了的。如果您的数据看起来像这样怎么办？

<body data-my-thing='{"foo": "bar's", "baz": true}'>

突然间你遇到了问题。这就是为什么我使用了上面提到的原始海报的脚本解决方案。