diadia

興味があることをやってみる。自分のメモを残しておきます。

vuejs 2.x

vue Dialogを作ってみる

ポイント: CSSの要素を使うことでダイアログを実装する事ができるってことをしっておくこと。z-indexを使えば良いことさえわかればあとはボタンの制御の問題へ置き換わる。 参考にさせていただいた資料: vue.js モーダルウィンドウ実装でコンポーネント理解…

動的コンポーネントを試してみる

動的 & 非同期コンポーネント — Vue.js 動的コンポーネントはisを使ってコンポーネントを切り替えて使う。 サンプルコード # Home.vue <template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"><br /> <button @click="onClickChangeComponent">コンポーネントを切り替える</button> </div></template>

propを使う

PROPを使う場面 propを使ってみたのでコードを残しておく。 propは親コンポーネントから子コンポーネントにデータを渡したい時に使われる。 親コンポーネント内にコンポーネントを記述している場合書かれているコンポーネントを子コンポーネントという。 # …

カスタムディレクティブを使う

ドキュメント カスタムディレクティブ — Vue.js 作り方概要 以下2つのステップで実装する。 カスタムディレクティブを定義し、カスタムディレクティブを適用したい要素に設定する。 カスタムディレクティブを定義する カスタムディレクティブを定義する方法…

vueのプロジェクト始め方(vue-cliを使って)

1. Vue cliをインストールする npm install -g @vue/cli vue --version 2. 新規プロジェクトの作成 #vue create プロジェクト名 vue create myproject プロジェクトを作る際に出てくるbabel, vuexについて - babelはトランスパイラ。 - Vuexは状態管理を行う…

vuexのメモ

コンポーネント間のデータの受け渡しについて。 コンポーネント間のデータの受け渡しの方法はいくつか方法があることがわかった。 props, emitを使った方法。 vuexを使った方法。 vuexを使った方法を考える。 コンポーネント間の通信:もうコンポーネントじ…

javascriptで画像アップロード

mpaのdjnagoで画像をアップロードするにはフロントエンドではhtmlにinputタグ(type="file")をセットして、何らかのボタンを押してpostメソッドで送信し、views.pyにてrequest.POSTのような形で画像データを取り出してやれば画像の取り扱いはできた。 しか…