環境 macos node -v v15.1.0 npm -v 7.0.8 vue --version @vue/cli 4.5.12 npm list vue vue@2.6.14 "postcss": "^7.0.35", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.4", ※ vue3でも試したところうまく行った(vue@3.1.1) 参考資料 メイン資料…

ポイント： 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は親コンポーネントから子コンポーネントにデータを渡したい時に使われる。 親コンポーネント内にコンポーネントを記述している場合書かれているコンポーネントを子コンポーネントという。 # …

エラー内容 error Type string trivially inferred from a string literal, remove type annotation @typescript-eslint/no-inferrable-types エラーが出たコード import { Component, Prop, Vue } from 'vue-property-decorator'; @Component({}) export de…

package.jsonにscriptsがある。ここに追加や修正することで好きなコマンドを作る（ショートカットを作ることができる）。 // package.json { "name": "my-project", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "…

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

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

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

typescriptをやってPromiseの存在を知った。がPromiseという概念が未だに分からない。。。 少し触ってみて多少のasyc awaitを使う場合と使わない場合で何か異なることを発見したので備忘録としてメモしておく。 async await を使わない場合 private uploadIm…

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

設定条件： vue.js 2系(3系だと書き方が結構違うので困難だった。) typescriptを使う 単一ファイルコンポーネントを使う。単一ファイルコンポーネントではテンプレートとスタイルタグのみを記入し、スクリプトタグは.tsファイルの読込みのみ行う。 作ってみ…

npmにvueを入れて構築する方法を試みる。djangoはdjango rest frameworkを使う。 今回気になる事項は、 どうやってdjangoとvueをcdn以外の方法で共存させる環境を構築するのか どういう仕組でdjangoとvueが連携する仕組みになっているのか vueを使うにあたり…

問題は何なのか leafletを使っていて以下の内容がconsoleに表示される事になった。 Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure image '<URL>'. This content should also be served over HTTPS. これは何を示しているかと</url></url>…

軽く要点を残す。 djangoでincludeを使ってコンポーネント化できたのでテンプレートの見通しが良くなった。 cdnを使ってコンポーネント化するとvuecliを入れる前にどんな感じでvuetifyや単一ファイルコンポーネントが使えるか確認できる。(もちろん全く同じ…

vuexのデータの受け渡しはvuexのドキュメントを読めばだいたいのことがわかる。 vuexはVue.js アプリケーションのための 状態管理パターン + ライブラリである。 重要なファイル 最初はApp.vueとstore/index.jsだけで済む。 <template> <v-app> <v-app-bar app color="primary" dark > <div class="d-flex align-center"> </div></v-app-bar></v-app></template>

MPAでvueを使いたい。。。 色んな方法で実現できると分かった。 cdnを使う方法 vue cliを使う方法 vue cliを使わないで行う方法 最終的にはvue cliを使って構築するのがわかりやすいと感じた。cdnはもちろんかんたんだけれどもvuetifyを組み合わせて使う方法…

データバインディングとは データと描画を同期する仕組み データバインディングの種類 双方向バインディング （TwoWay） 単方向バインディング(OneWay) ワンタイムバインディング(OneTime) テキストのバインディング テキストのバインディングの場合には{{}}…

内容 ドキュメント 基本的な使い方 vueの内容の書き方 1.ドキュメント https://jp.vuejs.org/ 2.基本的な使い方 HTMLとjavasciptのパートがあり、それを書けばvue.jsを書いたことになると現状認識している。 HTMLで書くこと https://jsfiddle.net/5grs0976/1…