从数据库到 JS 再到 Vue

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

我曾经对 bootstrap 数据使用 data- 属性，但我将运行保留在涉及引号的问题中。

这么说：

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

评价为：

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

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

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

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

From Database to JS to Vue