Vuejsについて調べてみた

# はじめに
LaravelとVuejsについて調べてみた

# まとめ
* new app Vueの中で**data:でbindの設定をする**
* bind設定したデータをHTMLの中で**{{}}**で表示
* bind設定したデータをJavaScriptの中で書き換えると**すぐに変更が反映される**

# Vueのファイル構造
* index.html
  - webページのデザイン。vueを適用する**id=app**あが書かれているので、ここにApp.vueコンポーネントが適用される
* main.js app.jsなど
  - 最初に実行される
  - new Vue(el:'#app',template:<App/>)して、index.htmlのid=appにルートコンポーネントApp.vueを表示する。templateに指定した内容が表示される

```vuejs

new Vue({
  el: '#app',
  router, // ルーティングの定義を読み込む
  components: { App }, // ルートコンポーネントの使用を宣言する
  template: '<App />' // ルートコンポーネントを描画する
})
```

  - App.vueを読み読み込んで、その内容を表示
* App.vue
  - ここで表示されることが画面に表示される
  - **ルートコンポーネント**
  - ここから階層的にいろんなコンポーネントが呼び出されている


# テンプレート構文
実際の表示を行う部分

* {{}}
* <p v-html="message"></p>
  - messageに設定しているhtmlタグがpタグに組み込まれる
* <p v-bind:clase="red: isred,blude:isblue"></p>
  - cssのclassの設定ができる
* <p v-if="条件">  <v-else>
  - タグの表示非表示ができる
* <template v-if>
  - それぞれのタグにv-ifをつけるのは面倒なので、templateタグで区切る

# コンポーネント


{{}}の箇所にコンポーネントタグを書く

```
<hello name="aaa"/>
```

vueオブジェクトに書いていたbindの設定はコンポーネントでは関数として書く

```vuejs

Vue.component("hello",
{
    props:["name"]
   //コンポーネントでは関数として定義
    // vueオブジェクトのbindの設定
    data:function(){
        return{
            message: ""
        };
    },
    template: '<p>{{message}}</p>'
});
```
propsで値を受け取れる

### v属性

vmodel

```html

<input type="text" v-model="name">
```

入力された値をdataプロパティの値にバインドする機能。バインドするので、入力されたら即時に反映される

v-on
computedは算術プロパティ。値が変更された呼び出される

```vuejs


Vue.component('hello',
 computed:{
     calc:function(event){

     }
 }
 methods:{
   doaction: function(event)

   }
template: '<p v-on:click="docation"></p>'
)}
```

### ローカルコンポーネント
* new Vueの中に書くとローカルコンポーネント
* Vue.componentを書くとグローバルコンポーネント

# Vueコンポーネント
```
<template> と<scripts>と<style>に分かれる
```

# 参考
[Vue.js&Nuxt.js超入門](https://www.amazon.co.jp/Vue-js-Nuxt-js%E8%B6%85%E5%85%A5%E9%96%80-%E6%8E%8C%E7%94%B0%E6%B4%A5%E8%80%B6%E4%B9%83-ebook/dp/B07X6F1C2P/ref=sr_1_7?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=vuejs&qid=1578318962&sr=8-7)

# Vuejs開発のためのソフトウェアをインストール
* Vuejs開発のためのコマンドツール
* Vuejsアプリ開発に役立つ機能が色々用意

```bash

npm install -g @vue/cli
npm install -g @vue/cli-service-global
```



### プロトタイプ機能
.vueという拡張子のファイルを一つ書くだけで、かんたんなアプリの表示を作ることができる

```bash
vue seve // vueファイルを読み込んでサーバー起動
```

### プロジェクト方式
* webサーバーの機能がある。テストやかんたんに試したい場合はこの方式
* 一般的なwebサーバーで公開する場合はビルドして、生成されたファイルを配置する

```bash

vue create プロジェクト名
```
プロジェクトにひつつようなプログラムをY/Nで答えていく

プロジェクトの実行。Webブラウザからアクセルできるようになる

```bash
npm run serve

```

作成したプロジェクトをWebサーバーにアップして公開するときはプロジェクトをビルドして、公開用のファイルを作成する

```
npm run build
```
distの中にファイルが作成されて、アップロードすれば公開できる

# vuex
https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-3
↑

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273424/8bbefc2b-a045-b062-ffd6-be0e817a4faa.png)

「アクション→コミットでミューテーション呼び出し→ステート更新」

* コンポーネントで共通して扱えるストアを提供
* 配置 storesフォルダ/indes.jsでnew Vuex.Store
* $storeでストアの値を取り出し
* storeの値は直接変更せずに、ミューテーションを使う $store.commit
* アクションを使って、例えば服薄のミューテーションをcommitする場合など
  - APIをアクションで
  - アクションは非同期処理 
  - ミューテーションは同期処理


### ストア
https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-3

例えばユーザーの認証状態も「コンポーネントをまたいで参照したいデータ」にあたるでしょう。前章で見た通り、ナビゲーションバーやフッターでは認証状態を参照して表示要素を切り替える必要がありました。


```javascript

const state = {}

const getters = {}

const mutations = {}

const actions = {}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

import Vue from 'vue'
import Vuex from 'vuex'

import auth from './auth'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    auth
  }
})

export default store
```

ストアの中身をモジュールとして切り出す

```app.js
import Vue from 'vue'
import router from './router'
import store from './store' // ★　追加
import App from './App.vue'

new Vue({
  el: '#app',
  router,
  store, // ★　追加
  components: { App },
  template: '<App />'
})
```

## webapiにおけるcsrf対策
https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-3

XSRF-TOKEN という名前の項目があるはずです。これが暗号化された CSRF トークンです。

今回採用するのは、フォームではなくクッキーと HTTP ヘッダーを利用する方法です。クッキーからトークンを取り出して、HTTP ヘッダーにそのトークンを含めてリクエストを送信しても CSRF チェックがかかります。


bootstrap.js では Ajax 通信で用いる Axios ライブラリの設定を記述しています。
Ajaxリクエストであることを示す X-Requested-With ヘッダーを付与し、トークンを X-XSRF-TOKEN ヘッダーに含めることで、Laravel はフォームではなくヘッダーを見て CSRF トークンチェックを行ってくれます。

https://blog.tokumaru.org/2018/11/csrf_15.html

# Lavavel
https://www.hypertextcandy.com/vue-laravel-tutorial-setting-up-spa-project

Laravel では JavaScript や Vue コンポーネント、SCSS などをコンパイルする仕組みが最初から備わっています。そのため、Gulp や Webpack などの煩雑な設定作業を行う必要がありません。

具体的には Webpack でフロントエンドをビルドしますが、設定を容易にするために Laravel Mix というライブラリを用います。

Javascriptをコンパイルする設定

```
mix.js('resources/js/app.js', 'public/js')
```

### httpd.conf
laravelでルーティングする場合、AllowOverride All必要