【フロント・フレームワーク】Vue.js

[yurino-sakamoto]

・JavaScriptのフレームワーク ・ユーザーインターフェイスを構築するためのプログレッシブフレームワーク ・フロントエンドアプリケーションの開発でも主として使用 ・HTML側の要素とJavaScript側の値やイベントとの対応付を自動で行う ・競合jQuery

参考 https://techacademy.jp/magazine/21456 http://www.tohoho-web.com/ex/vuejs.html#start

補足 フレームワークアプリの土台として機能するソフトウェア

[yurino-sakamoto]

Vue.js環境構築

①vue-cliインストール
②カレントディレクトリにvueプロジェクトを作成する
③Vueコンポーネントのビルド

各種インストール
・vuex
・vue-router
・vue-loader
・bootstrap-vue

vue-cli

$ npm install -g @vue/cli

各種インストール

vuex

npm install vuex

vue-router

npm install vue-router

vue-loader

npm install vue-loader vue-template-compiler

bootstrap-vue

npm install bootstrap-vue bootstrap

[yurino-sakamoto]

VScodeとvue.js https://qiita.com/rubytomato@github/items/b35b819671e7cbb3dff7

・vuex　　　　Vue.js アプリケーションのための状態管理パターン + ライブラリ https://vuex.vuejs.org/ja/ https://dev83.com/vue-vuex02/

・vue-router　Vue.js でシングルページアプリケーションを構築 https://router.vuejs.org/ja/

・vue-loader 以下の形式で記述された Vue コンポーネントをプレーンな JavaScript モジュールに変換する webpack の loader https://vue-loader-v14.vuejs.org/ja/

・bootstrap-vue　CSSの「フレームワーク」簡単に良いデザインを実現 https://techacademy.jp/magazine/6270

・vue-simple-drawer　上下左右から飛ぶだして跳ねるDrawerコンポーネントライブラリ https://www.kabanoki.net/6108/

・vue-cli　Vue.jsの開発を手早く進めるためのシステム http://www.fumiononaka.com/Business/html5/FN1807001.html

・vue-axios

[yurino-sakamoto]

コンポーネント

[yurino-sakamoto]

bind https://jp.vuejs.org/v2/guide/class-and-style.html v-on https://noumenon-th.net/programming/2019/05/17/v-on/

[yurino-sakamoto]

戻り値とは　https://www.sejuku.net/blog/28728

[yurino-sakamoto]

文字の書き込み

[yurino-sakamoto]

・vuex　→Vue.js アプリのための状態管理パターン + ライブラリ 　　　　　測可能な方法によってのみ状態の変異を行う 　　　　　アプリケーション内の全てのコンポーネントのための集中型のストアとして機能 参考資料 https://vuex.vuejs.org/ja/

・vue-router　→ ・vue-loader　→ ・bootstrap-vue　→

[yurino-sakamoto]

データの循環 https://qiita.com/m_mitsuhide/items/f16d988ec491b7800ace

[yurino-sakamoto]

ネットワークエラー https://qiita.com/fukuman/items/d0d229b40e2e65a3bdd7

[yurino-sakamoto]

【環境開発】Vue.jsとFirebase

https://qiita.com/Satachito/items/4a00b402970d657a88f3

[yurino-sakamoto]

関数関連

https://qiita.com/kamihork/items/5d15f7fbda826041ff2c

基本的なストアの書き方

// main.js
import Vue from 'vue'
import store from './store'

new Vue({
  el: '#app',
  //storeをVueインスタンスのプロパティに設定することで紐づくコンポーネントからstoreを使うことが出来る
  store,
})

//////////////

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    //状態を管理したいデータを定義
    state: {
        searchText:""
    },
    //状態変更の処理を記述
    mutations: {
        //第１引数はstate,第１引数は処理に使いたい値等を指定
        searchTextStore(state,searchText){
            state.searchText = searchText
            }
    },
    //状態を取得したい時はgettersを通して取得できる
　　//(通さなくても取得できる)
    getters:{
        searchTextGetter: (state) => {
            return state.searchText.slice(2,7)
        }
    }
})

export default store

https://qiita.com/Yorinton/items/a0144c34e4edb0777493

[yurino-sakamoto]

export default 単一ファイルコンポーネントにて他のコンポーネントでも使用できるようにするために書く https://qiita.com/notch0314/items/e9f2b704a340824393b8

[yurino-sakamoto]

action

mutationをコミット https://junpeko.com/vuex-actions/

[yurino-sakamoto]

dispatch

複数のプログラムを実行中のマルチタスクオペレーティングシステムにおいて、プログラムに実行権を渡すことである。

[yurino-sakamoto]

Vue.jsを使ったサイト

https://cheat.co.jp/blog/archives/386

[yurino-sakamoto]

階層のあるサイトを作る方法

https://qiita.com/abouch/items/35d7a202f3e74c7d4c3e

[yurino-sakamoto]

vue.js ライフサイクル関連