//親 <MyComp v-model="data"/> //子 props:['value'], data:{ return{ data: this.value } } watch:{ data(val){ this.$emit('input',val) } v-model使うと名前がvalueになっちゃうからdataでローカル変数にする。 watchで変更があるたびに親に渡す。 これでカスタムコンポーネント</mycomp>…

vueと相性が良いらしいsvgを触る

//親→子 //親 属性で指定 <MyComp :data="data"/> //子 propsで受け取る props:[data] //子→親 （個人的にわかりやすいやつ） //親 v-modelで受け取る <MyComp v-model="data"/> //子 emitで送る @input=$emit('input',data) //子→子 vuexを使う</mycomp></mycomp>

よくわからないけどパスをrequire()で囲まないと読み込まないことがある。 何でだろう Vue.jsでimgタグのsrcをバインドさせる際の注意点

//store.js const moduleA = { namespaced: true, state: { count: 0, msg: '' }, mutations: { increment (state, num) { state.count += num }, setMsg(state, msg){ state.msg = msg } } }; const moduleB={省略} export default new Vuex.Store({ module…

vuexでいくつかの状態を扱うためにモジュール化してみた。モジュール化すると this.$store.state.モジュール名.stateの値 のようにstateにアクセスする際にモジュール名を入れる必要がある。 アクション、ミューテーション、ゲッターはデフォルトでグローバ…

cssでのハンガーバーメニューと考え方はほぼ同じだが、実装がだいぶ楽。 ついでにbulma(cssフレームワーク)も使えばレイアウトも簡単。 というかbulmaのモーダルのドキュメントに＠clickイベントいくつか付けるだけでできる。 (vueの方でmodalプロパティも必…

<input v-model="searchText"> ってやるとデータバインディングしてくれる これは以下の構文のシンタックスシュガー <input v-bind:value="searchText" v-on:input="searchText = $event.target.value" > inputがあるたびにvalueを更新 だからカスタムコンポーネントで使うには props: ['value'] v-on:input="$emit('input', 送りたい値)" で使える 親の値を子の入力で変更…

vue-cliのバージョン3を使ってみる。 guiでプラグインの管理ができてとても便利。

Vue.js VueRouter Vuex VueServerRenderer VueMetaをまとめてくれてるらしい 下2つを調べる

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インスタンス…

//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…

div要素をいくつか作ってそれぞれに連番クラスを付けたいとき <div v-for="(item, index) in items" v-bind:class="'item-'+index">{{item.text}}</div> バニラのjavascriptだと createElementで作って、textContentで中身入れて、appendChildで追加する ってやってたのがvueだと簡単にできる

domがほしい要素にref属性をつける。受け取り方 this.$refs.element

JavaScript の制限のため、Vue は配列で以下の変更を検出することはできません: 1, インデックスでアイテムを直接設定するとき。例: vm.items[indexOfItem] = newValue 2, 配列の長さを変更するとき。例: vm.items.length = newLengthリストレンダリング — V…

vue-cliをインストールして使ってみる。 テンプレートはwebpack-simpleを指定。 ページ遷移がないものをコンポーネントに分けて作ってみる。templateを理解するのに手間取った。 new Vue({ el: '#app', //<div id='app' />を指定 components: { App }, //Appタグを使えるよう</div>…

古いやり方 XMLHttpRequestを使う const url = 'urlを指定'; const request = new XMLHttpRequest(); request.open("GET", url); request.addEventListener("load", (event) => { 処理 }); request.send(); 新しいやり方 fetchを使う const url = 'urlを指定…

アロー関数では、引数がないときも丸括弧を書かなければいけない。 ただし、引数が1つなら括弧が省略できる。そこで、使わないけど引数としてアンダーバーを使う。 そうすると括弧が減って若干読みやすい。 //before setTimeout(() => { 処理 }, 1000); //af…

setTimeoutの処理の結果が欲しい時 setTimeoutの内側でreturnすればいいと思ったけどそれじゃできない function wait1sec(num) { setTimeout(() => { console.log('計算終了'); // #1 return num * 2; }, 10); console.log('setTimeoutの次'); // #2 } funct…

まずevent.targetとevent.currentTargetの違い currentTargetはイベントリスナーを登録した要素（固定） targetは実際にイベントが起きた要素（可変） <body> <p></p> <div></div> </body> document.body.addEventListener('click', listener); pがクリックされる target = p currentTarget …

class クラス名 { constructor() { DOMを取得; this.handleEvents(); } handleEvents() { イベントリスナーの登録; } メソッド() { イベントリスナーで呼ばれるメソッド; } } こんな感じの枠組みで書くと読みやすい

読み始めた。 初めの章のvalidateのやつを自分なりにリファクタリング。 class AppModel { constructor() { this.val = ""; this.validateList = { required: true, maxlength: 8, minlength: 4 }; } validate(input) { if (this.val === input) return; thi…

thisの４種類のパターン １：メソッド呼び出しパターン ２：関数呼び出しパターン ３：コンストラクタ呼び出しパターン ４：apply,call呼び出しパターン JavaScriptの「this」は「4種類」？？アロー関数使っておけば、thisはだいたいはそのオブジェクトを指…