.stop

<div class="test" id="app">
    <div class="mouse" @mousemove="changeMouseMovePosition($event, 10)">マウスをのせてね<span @mousemove.stop>反応しない</span> 
    </div>
    <p class="position">X:{{x}}, Y:{{y}}</p>    
  </div>

 </div>

参照：Udemy

マウスがテキストに乗ったらその水平方向、垂直方向の位置をX,Yに入れるというやつ。
@mousemove.stopと書いてあげることで反応しなくなる
やっていることはevent.stopPropagation()と同じこと。

これで「反応しないという」テキスト上では反応しなくなる

Laravelで作成したアプリのデータを非同期通信したいと思って、Vueを使い始めた。
なかなか、理解が悪く先にすすんでいないが、とりあえずいつものごとく備忘録を書いていく。

やりたいこと

初期のみDBにあるデータをLaravelで静的に受け取って、
その後はVueで作成したコンポーネントを使用しながら、非同期通信でデータを操作する。

詰まった箇所

Laravelでデータの処理してから、どのようにして、Vueコンポーネントに渡していいかわからなかった。
Vueコンポーネント同士の親子でのデータ受け渡しについては記事をよく見かけたが、ララベルとVue間でのデータ受け渡しについては、調べてもよくわからなかった。理解が悪いだけかもしれないが。。。

結論

色々やってみて、以下の通りでうまく行った。

1. Laravelのコントローラで、app.jsが読まれているBladeテンプレート（これが親となる）へDBからデータ値を送る。
2. 上記Bladeテンプレート内の、Bodyタグ内の最下部にscriptタグを配置。その中に、コントローラから送られたDB値を格納する。例えば、DBから$data_hogeを受け取っているとしたら、<script>let dataHoge = @json($data_hoge)</script>と書く。@jsonとしているのはphpのデータをjson形式にしないと、vueで使えないので。
3. app.jsの、Vueインスタンスの中に、dataオプションを記述し、データを受け取る。
4. app.jsが読まれたBlade内で使われるVueコンポーネントは、子コンポーネント（Blade-app.jsが親）になる。Blade内に書いた、Vueコンポーネントタグ内に、v-bind:オプション値として、子コンポーネントに渡す準備をする。そして、子コンポーネント内では、それをpropsで受ける。子コンポーネント内でデータを動的に変更するには、dataプロパティにつけ直して、自由に使う（propsはそのまま使ってはいけない）。
5. 子コンポーネントから、親（Blade）に値を返したいときは、$emitでイベント発火して、値を受け取る。

考え方は、LaravelBlade-app.jsが親、Bladeに書かれたコンポーネントが子になる。
文章にしてみると、単にVueやJavaScriptの理解が浅いだけな気がしてきた。

後で、もうちょっと加筆するかも。

どうも　最近Vuejsを始めたので
アウトプットしていこうと思います

Vue CLIとは

VueCliはVue.jsで開発するための便利ツールであります
私の解釈で話しますと、
VueCLIはVueを使うときに最初にうつコマンドのところであり
プロジェクト生成するときに使います。
CLIはコマンドインターフェースであります。

なぜこんな説明をしたかと言いますと、
なんと私

Vue.jsと　Vue CLIって違うものなの？

とかなんかあたかも対等な関係的な感じで考えていました。
当たり前に違いました。

導入方法

１　Vue CLIをグローバルにインストール

 % npm install -g @vue/cli

2.これでバージョンを確認

 vue --version

3.プロジェクトを作成(hoge-appのところは自分の作りたいプロジェクトの名前）

 vue create hoge-app

4.プロジェクトを作るとこのようなものが出てきます
とりあえず初めてのかたであれば設定をカスタマイズできるManually select featuresを選択します

Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features 

1. これに関しては用途に合わせて選んでください 　　初めての方の場合は私と同じCSS Pre-processorsとbabelを選んどきましょう

Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

おそらくこの後に私と同じCSS Pre-processorsを選んだ方は
CSS Pre-processorsの具体的になんのライブラリを使用するか選ぶこととなるでしょう

その後。。。。

６.babelやESLintの記述をどのファイルに記述するか選びます
　専用の設定ファイルを使用する場合はIn dedicated config filesを選びます
私はIn dedicated config files選びます。

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 

７.今回の設定をプリセットするか選択します
yを選択すると今後今までの作業を省略することができます。

? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)


これでエンターキーを押したらおしまいです
お疲れ様でした