情報整理用として活用中


React、Vue.js


Table of Contents

REACT

・JSX
・ステート:値を変更すると自動的に表示が更新される
 ⇒this.state={ }
 ⇒this.setState({ })
・フック:関数コンポーネントでクラスのステートのような機能を実装するもの
 ⇒ステートフック:ステートについて関数で使用できる。
  - const [ 変数A , 変数B ] = useState( 初期値 )
 ⇒副作用フック:ステートが直接表示に使われていないところでも必要な処理が実行される。
  -useEffect( 関数 ) ←Reactに用意されている関数
 ⇒独自フック:
  -use〇〇( ){ }
・ステートはリロードで消える。⇒ローカルストレージの利用
 ⇒変数 = window.localStorage.getItem( キー )
 ⇒変数 = window.localStorage.setItem( キー, 値 )

Vue.js

●基本編
・html,javascript,cssの3ファイルで作成する。
 htmlはvで始まるディレクティブで記載。
 javascriptは

var app = new Vue({
el: '#app',
data:{
 message:'Vue.js'
},
computed: {
 computedMessage: function() {
  return this.message + '!'
 }
}
created: function() {
},
methods: {
 myMethod: function(){
 }
}
})

 にて記載。

・コンポーネント:
 ⇒機能をもつUI部品ごとにテンプレートとJavaScriptを1つのセットにして、他のUI部品とは切り離した開発及び管理できるようにする仕組み(Angularより簡単に実装できる)。
 ⇒Vue.componentメソッドを使ってグローバルに登録することで、自動的に全てのコンポーネントから使用できる。

●Vue CLI:
 ひな形を作成。また、専門的な知識を持たなくても単一ファイルコンポーネント(.vue)を使用するための環境を自動的にセットアップしてくれる。
 npm install -g vue-cli(←※Ver3は@vue/cli)
 vue –version
 vue init テンプレート名(webpack, webpack-simple, etc) プロジェクト名
 cd プロジェクト名
 npm install
 npm run dev

●Vuex:状態管理のための拡張ライブラリ
 npm install vuex babel-polyfill
 srcフォルダの直下にstore.jsファイルを作成。Vuex.Storeコンストラクタを使ってストアのインスタンスを作成する。

●Vue Router:SPAを構築するためのVue.jsの拡張ライブラリ。
 npm install vue-router
 srcフォルダの直下にrouter.jsファイルを作成。。VueRouterインスタンスを作成する。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

PAGE TOP