php - Laravel5.4+Vue kann die einfachsten Daten nicht binden

Question

JS-Code:

neues Vue({

    el : '#app',
    data : {
        aa : 1
    }
})

Auf Seite drucken:
@{{ aa }}

Normalerweise sollte „1“ auf der Seite gedruckt werden, es werden jedoch weiterhin Fehler gemeldet: Die Eigenschaft oder Methode „aa“ ist in der Instanz nicht definiert, wird aber beim Rendern referenziert Datenoption .

Das referenzierte VUE ist app.js, das nach der npm-Installation unter dem Laravel-Framework generiert wird. Wenn Sie zu den unabhängigen vue.js wechseln, die von der offiziellen Website heruntergeladen wurden, wird der Fehler nicht gemeldet und „1“ wird auf der Seite gedruckt. Warum ist das so? Für Anfänger verstehe ich es nicht ganz. Stimmt etwas mit der generierten app.js nicht? Oder stimmt etwas mit meiner package.json-Konfiguration nicht
package.json:
{
"private": true,
"scripts": {

"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

},
"devDependencies": {

"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "0.*",
"lodash": "^4.17.4",
"vue": "^2.1.10"

}
}

Könnten Sie mir bitte bei der Lösung helfen? Vielen Dank

Answer 1

el: '#app',
    data() {
        return {
            aa:1
        }
    }

Answer 2

使用vue-cli跟引用vue.js有点不一样，在vue-cli里面data是一个方法，不是一个对象，应该写成

data(){
  return{
     aa:11
   }
}