從數據庫到JS到Vue

建議在內聯腳本中傳遞一些不敏感的數據給vue嗎？從數據庫到JS到Vue

HTML

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

Vue.js

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

2016-04-29 Kristo

是的，這很好，你甚至可以直接將PHP回聲直接放入Vue數據中。確保你的變量不是一個通用的名字，但是，全局命名空間和所有的 – Jeff

這可能是有點自以爲是，但我會避免使用這樣的一個全局變量的應用程序。相反，我會利用HTML5 data-屬性並存儲前端需要的有用數據位。

你可以做這樣的事情：

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

上面的例子使用JSON，我會怎麼做，通常是在控制器或視圖作曲家使用json_encode，只是呼應了像這樣的字符串（因爲我們「再在這裏使用巴爾德的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'));

2016-04-29 07:31:16 edcs

你可能會想'htmlspecialchars（）'這種方式使用JSON。 – ceejayoz

有沒有必要在刀片模板中使用htmlspecialchars - 一切都會自動轉義。 – edcs

我用data-屬性來引導數據，但我一直運行到的涉及報價的問題。

這不能不說：

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

計算結果是此：

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

沒什麼大不了的。如果你的數據看起來像這樣呢？

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

突然，你有一個問題。這就是爲什麼我使用上述原始海報的腳本解決方案。

2016-04-29 18:46:29

'htmlspecialchars（）'是爲了解決這個問題。 – ceejayoz

你介意發佈一個解決方案嗎？我不是來自PHP世界，所以我的經驗更一般。（雖然我上面提到的問題讓我在生產中遇到了麻煩。） –

回答