Php/laravel/laravel5/laravelmix/vue
提供: 初心者エンジニアの簡易メモ
vue動作確認
laravel5.4以上にデフォで入ってるvueのexampleコンポーネントを表示
routes/web.php
Route::get('/vue1', function () { return view('vue1'); });
resources/views/vue1.blade.php
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Hello Vue</title> <link rel="stylesheet" href="css/app.css"/> <script type="text/javascript"> window.Laravel = window.Laravel || {}; window.Laravel.csrfToken = "{{csrf_token()}}"; </script> </head> <body> <div id="app"> <example></example> </div> <script src="js/app.js"></script> </body> </html>
"ttp://~/vue1"を表示し以下のように表示されれば成功
Example Component I'm an example component!
出ない場合はapp.jsがvueのタグよりも下にあるか確認する
example.vue定義場所
resources/assets/js/app.js
Vue.component('example', require('./components/Example.vue'));
resources/assets/js/components/Example.vue
<template> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-heading">Example Component</div> <div class="panel-body"> I'm an example component! </div> </div> </div> </div> </div> </template> <script> export default { mounted() { console.log('Component mounted.') } } </script>
クリック処理など
<template> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-body"> <input type="text" v-model="name" /> {{ name }} <p>{{ age }}</p> <input type="button" @click="click1" /> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { name: 'taro', age: 20 } }, mounted() { this.init() }, methods: { init() { this.age = 21 }, click1() { this.name = 'jiro' } } } </script> <style lang='scss' scoped> p { font-size: 10px; text-align: center; } </style>
参照
vue基本について
javascript/vue [ショートカット] を確認する