ユーザー環境で不正なスクリプトを実行させる。 標的サイトに悪意のあるスクリプトが埋め込まれるようなリンクを踏ませる or 標的サイトにフォームなどから直接悪意のあるスクリプトを埋め込む 標的サイトにユーザーがアクセスしたとき、特定のタイミングで…

ParentComponent <ChildComponent @parentMethod="updateMessage"></ChildComponent> ChildComponent <GrandChildComponent @childMethod="$listeners['parentMethod']" ></GrandChildComponent> GrandChildComponent methods: { this.$emit('childMethod', this.message) }

認証におけるjwtのメリット CORSなどの制約がない 異なるドメイン間の通信を拒否する制約にかからない スケーラブルである cookie認証の場合はセッションを保持する別のサーバーやDBが必要になる。jwt認証の場合はアプリケーションサーバーのみで認証ができ…

Vue→Rails 以下のようなストロングパラメータが設定されているとき、params[:user][:name]などといった二重ハッシュである必要がある。 def user_params params.require(:user).permit(:name, :email) end このとき、axiosの引数は以下のような構造にすればO…

プロジェクト作成 初めからプロジェクトを作る場合 % rails new todo_sample --webpack=vue Railsアプリに途中からVueを導入する場合 % bin/rails webpacker:install % bin/rails webpacker:install:vue 開発環境サーバーの設定 foremanでrails serverとwebp…

インストール $ yarn add axios 基本的な使い方 postリクエスト axios.postの第一引数にエンドポイントURL、第二引数に送信するオブジェクトを渡す。 getリクエスト axios.getの引数にエンドポイントURLを渡す。thenでレスポンスを取得する。 // axiosをイン…

コンポーネント側での記述を簡略化できる。 mapGetters import { mapGetters } from 'vuex'; export default { computed: { ...mapGetters(['doneTodosCount','anotherGetter' ]) // doneTodosCount() { return this.$store.getters.doneTodosCount; }, // a…

モジュール化 ユーザーと掲示板をストアする機能をそれぞれ別のモジュールとして切り出すみたいなこと。モジュールにするときは記述の仕方が異なる。 Vuexのモジュールが複数ある時、gettersやmutationsなどをそれぞれのモジュールの名前空間に入れなければ…

（１）valueと@inputを使う <input :value="message" @input="updateMessage"> computed: { message() { return this.$store.getters.message; }, methods: { updateMessage(e) { this.$store.dispatch('updateMessage', e.target.value); } // 入力→methods→actions→mutationsの順に入力値（e.target.value…

Vuexで状態管理を行う。 インストール % yarn add vuex Vuexを設定 Vuexの内容 - state: $storeで参照できるグローバル変数のようなもの - getters: storeの算出プロパティのようなもの - mutations: stateの値を変更する関数 - actions: mutationsの処理を…

nameでルーティングの名前を指定する。以下ではusers/1/profileの名前を設定している。 routes: [ { path: "/users/:id", component: Users, childeren: [{ path: "profile", component: UsersProfile, name: "users-id-profile" // ここ }] } ] router-link…

childrenでネストするルーティングを指定する。 以下の記述により、/users/1/postsなどが定義される。 routes: [ { path: "/", component: Home }, { path: "/users/:id", component: Users, props: true, children: [ // ここ { path: "posts", component: …

template内で$route.paramsからURL内の動的な値を参照できる。 <template> <h1>User No. {{ $route.params.id }}</h1> $route ナビゲーションの情報を得るときに使う $router ナビゲーションするときに使う ルート(route)コンポーネントの再利用性を損なわないためのpropsオプ</template>…

active-class属性：そのrouter-linkがアクティブになっている時に有効になるクラス。以下はフォントサイズを変更している。 <template> <router-link active-class="link--active" exact to="/" >Home</router-link> <style scoped> .link--active { font-size: 20px; } ※包含的なマッチ：全てのurlには/が含まれるため、常に/のrouter-linkがアクティブにな</template>…

URLとコンポーネントを紐付けルーティングする。 インストール % yarn add vue-router ルーターを設定 // router.js // vue-routerをインポート import Vue from 'vue' import Router from 'vue-router' // 'Router'として使う // ルートコンポーネントをす…

同じコードを使い回す。プラグインを作りたい時とか。 ※コンポーネントとミックスインのコードが被ったら、コンポーネントが優先される ※ライフサイクルフックの内容に関してはミックスイン→コンポーネントの順で実行される // event.js export const event …

テキストをフォーマットする。methodと同じで再描画されるたびに実行される。 グローバル登録 <h2>{{ title | upperCase }}</h2> Vue.filter("upperCase", function(value) { return value.toUpperCase(); }) ローカル登録 <h2>{{ title | upperCase | lowerCase }}</h2> // 連…

<input v-model="eventData.title"> // は <input :value="eventData.title" @input="eventData.title = $event.target.value"> // と同じ data(){ return { eventData: { title: "foo" } } } 入力が行われた時(@input)にinputイベントにおける入力値($event.target.value)がプロパティ(eventData.title)に代入され、かつそれがフォーム内の値として表示される フォーム部分をコ…

// フォーム <input v-model="eventData.detail" id="detail"> // 複数行フォーム <textarea v-model="eventData.detail" id="detail" cols="30" rows="10"> // チェックボックス <input type="checkbox" v-model="eventData.isPrivate" id="isPrivate"> // 複数のチェックボックス <input type="checkbox" v-model="eventData.target" id="30" value="30代…</textarea>

// :isに渡した文字列のコンポーネントに変わる <component :is="currentComponent"></component> <button @click="currentComponent = 'Home'"></button> <button @click="currentComponent = 'About'"></button> // ボタンで切り替え このままでは切り替えるたびにコンポーネントがcreated/destroyedされるが、keep-aliveタグによってそれを防げる（activated/deactivatedになる） <keep-alive> </keep-alive>

子のslotタグで指定した属性は、親のv-slot属性でスロットプロパティ（ここではslotProps）を渡すことで使える 親コンポーネント <Child> <template v-slot:title="slotPlops"> <h1>いいね数</h1> <h2>{{ slotPlops.user.firstName }}</h2> </template> </Child> 子コンポーネント <div> <slot name="title" :user="user"></slot> </div> data() { return { user: { firstName: "gelard" デフ…

名前付きスロット v-slotで名前付きスロットにすれば、複数のslotを利用して複雑なデータを渡すことができる。 親コンポーネント側 templateタグ内でv-slotを使う <Child> <template v-slot:title> <h1>いいね数</h1> <h2>{{ number }}</h2> </template> </Child> <template #title> // 省略形 子コンポーネント側 name属性の値をv-slotの値にする <div> <slot name="title"></slot></div></template>…

親コンポーネント側 子コンポーネントのタグで囲んだ要素が渡される。 <Child> <h1>いいね数</h1> <h2>{{ number }}</h2> </Child> 子コンポーネント側 渡された要素がslotタグの箇所に表示される。 <div> <slot>フォールバックコンテンツ</slot> // フォールバックコンテンツ：親から渡される要素がない時に表示</div>…

$emitとは親コンポーネントのイベントを発火させる起動スイッチのようなもの。それに便乗して値を渡す。 つまり、カスタムイベント（ここではmy-click）を作れるメソッド。 子コンポーネント側（クリック時の例） <button @click="incriment"></button> export default { methods: { incriment() …

親コンポーネント側 子のtotal-number属性として値を渡す <Child :total-number="number"></Child> // Child.vueに渡す export default { data() { return { number: 10 } } } 子コンポーネント（Child.vue）側 totalNumberとして受け取る <p>{{ totalNumber }} export default { props: { 'totalNumbe</p>…

配列 v-for="要素 in 配列" :key="要素" <li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li> // 第二引数として配列のインデックスをとることも可 data: { fruits: ['apple', 'mango', 'banana'] } apple mango banana オブジェクト v-for="value in オブジェクト" <li v-for="value in object" :key="value">{{ value }}</li> // 第二引数として…

computed: リアクティブな依存関係が更新されたときのみ実行される。 method: リアクティブな値の更新とか関係なく、再描画＝ページの内容が少しでも変わるたびに実行されてしまう。

バインドした値がtrueの時のみ要素を表示させる。 v-if 切り替えのコストが大きい。 <p v-if="ok"> <p v-else-if="maybe-ok"> <p v-else> data: { ok: true maybe-ok: false } v-show v-ifと同じ挙動だが、頻繁に何かを切り替える処理に適する templateタグ内で使えない 初期描画のコストが大きい v-ifは要素</p></p></p>…

ブラウザからの入力値をdataと紐付ける（バインドする） <template> <input v-model="message"> // 入力値がmessageに代入される <h1>{{ message }}</h1> // messageが表示される </template> <script> data: { message: "こんにちは" } // デフォルト値 イベント修飾子 v-model.lazy="message" // フォームからフォーカスが…

特定のイベントが起こったときにメソッドを発火させる <a v-on:DOMイベント="処理内容 or メソッド"> <a @DOMイベント="処理内容 or メソッド "> // 省略形 メソッド内でイベントオブジェクト（$event）を取得する <p @mousemove="changeMousePosition($event, number)" > // イベント引数以外の引数をとるときは$マークをつける changeMousePosition(event, number) { this.x = event.clientX / number </p></a></a>…