Laravel+Vue.jsでコンポーネントを使わずにバインドするには

Laravelのbladeでvueコンポーネントを使わずに直接vueをバインドしたいなぁ。
けど、bladeで{{ xxxx }}を書くと、phpの変数参照でエラーになるので、その解決方法です。

Laravel+Vue.jsでコンポーネントを使わずにバインドするには

その1

頭に@ つける

@{{ xxxx }}

参考サイト
https://blog.capilano-fw.com/?p=8367#BladeVue

その2

”Mustache” 構文(二重中括弧) {{ xxxx }} を変更する

Vue.jsでマスタッシュ記法で記述するデリミタを変更する方法

Vue.js 2系の場合

new Vue({
    el: '#app',
    data: data,
    delimiters: ["<%","%>"]
});

その3

v-text属性でバインドする。
<span v-text="xxxx"></span>

参考サイト
https://blog.capilano-fw.com/?p=8367#Vue

おまけ：非同期の値が再描画されない

JavaScript - axiosでポストして帰ってきたデータがVueのv-modelに再描画されない｜teratail

原因

原因としてはthen内でthisが指しているのは Vue instance ではないからです。console.logしてみると確かめられます。
解決策としては、3つぐらいあります。

対応

arrow function

.then(response => {
  // "this" points to the vue instance
})

bind

.then(function (response) {
  // "this" points to the vue instance
}.bind(this))

this の退避

const self = this

// ...
.then(function (response) {
  // "self" points to the vue instance
})

おまけ２：Laravelではaxiosで非同期通信するとCSRFトークンは自動でセットしてくれる

LaravelのBladeにVueコンポーネントを組み込む - やんばるテック

なお、axiosによる非同期通信のリクエストヘッダのX-XSRF-TOKENには、Laravelのクッキーから取得したCSRFトークンの値が自動でセットされます。

参考URL

• テンプレート構文 — Vue.js