Laravel でVue.jsを使ってみたかった

こんにちは

突然ですがLaravelでVue.jsを使ってみたいのです

javascriptのフレームワークは初めての挑戦です

Vue.jsとは

Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

jp.vuejs.org

さっそくnpm installを実行しますがエラーになってしましました

いつもならここでだいたい諦めてしまうんですが、

今回はCDNで読み込んでやってみます

参考：

scrimba.com

CDN 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

main.blade.php

<div class="container">
  <div id="vue_field">
    <h3>@{{ message }}</h3>
    <div id="response_view_field"></div>
    <p v-if="seen"><b>click button!</b></p>
    <input type="text" id="text" value="" name="text"><br>
    <button type="button" id="button">Submit</button>
  </div>
</div>
<hr>
<script type="text/javascript src="/js/index.js"></script>
<script>
(function(){
    $('#button').click(function(){
        const text = document.getElementById("text").value;
        if(text !== ""){
            $.ajax({
                type: "POST",
                url: "{{ url('/post') }}",
                data: {text: text},
                dataType: 'text',
                timeout: 10000,
                success: function(response){
                    app.seen = false;
                    $('#response_view_field').html(response).css({
                        "width": "500px",
                        "height": "40px",
                    });
                }
            });
        }else{
            alert("入力は必須です");
        }
    });

    $('#text').change(function(){
        let p = document.getElementById('response_view_field').innerHTML;
        if(!p){
            app.seen = true;
        }
    });

</script>

index.js

const app = new Vue({
    el: '#vue_field',
    data: {
        message: "Hello Vue!!!",
        seen: false,
    },
});

Controller

/**
 * @param Request $request
 * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
 */
public function returnViewFile(Request $request)
{
    $results = "入力されたのは{$request->text}です";
    return view('responseView', ['results' => $results]);
}

responseView.blade.php

@if(isset($results))
<p>{{ $results }}</p>
@endif

テキストを入力してカーソルがボックスら外れると

app.seen = true;

となり、pタグが表示されます

<p v-if="seen"><b>click button!</b></p>

ボタンを押すと非同期通信がされ、

通信が成功したらコールバック関数で

app.seen = false;

となり、

<p v-if="seen"><b>click button!</b></p>

は表示されなくなります

そして{{ $results }}にControllerで定義した$results

入力されたのはhelloです

が入ったresponseView.blade.php

<p>入力されたのはhelloです</p>

を

$('#response_view_field').html(response).css({
  "width": "500px",
  "height": "40px",
});

で

<div id="response_view_field"></div>

に表示したら終了です

<div id="response_view_field"><p>入力されたのはhelloです</p></div>

とりあえずLaravelでVueを使ってみたくて、

しょうもないものを作ってしまいましたが私は満足です