railsでのMVCのイメージ UserはurlにアクセスするとrouterがそれをControllerに振り分ける。 ControllerでModel(=db)からデータを取ってきてViewに渡して表示。 VueでのMVVMでのイメージ UserはurlにアクセスするとrouterがそのViewを表示。 View-ModelがVie…

タブ切り替え機能を実装しようとしたときの考え方の違いについてjQuery 考え方：タブそれぞれがactiveかnot-activeの状態を持つ 実装：activeクラスをつけ外しするvue.js 考え方：Vueインスタンスがactiveなタブについての情報を持つ 実装：Vueインスタンス…

あってるか知らないけどイメージjQueryはDOMを操作 vueはDOMを生成するdataを操作だからjQueryを使うとDOMツリーのごちゃごちゃに巻き込まれる。 vueはdataに要素を追加したり、真偽値を変えるだけで済む。

//main.js import store from "./store" //追加 new Vue({ el: '#app', store, //追加 template: '<App/>', components: { App } }) //これで子コンポーネントで毎回importしなくてもthis.$storeでアクセスできる //store/index.js import Vue from "vue"; import </app/>…

vuexからvueへ値を渡す computedに書く computed: { familyName() { return this.$store.state.familyName } } mapStateによる省略記法(this.$stpre.stateを省略) store, computed: { ...mapState([ 'familyName', ]} VueとVuexの間の値の連携の仕方まだvuex…

vue.jsで親と子のやりとりは$emitやpropsで行っていた。 シンプルなうちはいいが、孫から受け取りたいとかになるとややこしくなる。 そこで、コンポーネントをまたぐ変数は別の場所に保存し、みんなそこからアクセスしてもらう。 この保存場所をstoreという…

ボタンに @click = "isActive = !isActive"項目のwrapperに v-if="isActive"外側に透明な背景で @click="isActive = false" v-if="isActive"これでボタンを押されるたびに項目が表示され 外側をクリックすると閉じる

vue.jsでの命名規則 vueファイルの名前やコンポーネント名、html内でのタグ名 などなどほとんどパスカルケースで良い。 例外 DOMテンプレートではケバブケース プロパティ名はjs内で定義はキャメルケース、html内ではケバブケース これはただの慣習に従って…

qiitaのapiを利用して検索ページ作ってみた。使った知識 ・axios ・コンポーネント ・props ・emit ・filters ・bulma いい練習になった。qiitaのapiは登録しなくても使えるから、はじめてapi触るって人にもいいかも。

親から子に渡したいとき 親コンポーネント(variableを渡したい) <child-component :from-parent="variable"></child-component> 子コンポーネント(fromParentで受け取る) props: ['fromParent'] 子から親に渡したいとき 子コンポーネント(variableを渡したい) this.$emit('from-child', variable) 親コンポーネント(hoge…

cssだけでクラスの付替えっぽいことをしたいときは checkboxを使う labelがクリック対象として動作するからlabelをいじくる。 CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応） <input id="nav-input" type="checkbox"> <label id="nav-close" for="nav-input"></label> /*閉じる用の薄黒カバー*/ #nav-close { display: none; //初めは…