Vue.js Render関数のサンプルコード
- 2019.12.14
- Vue.js
vue-cliを利用してプロジェクトを作成すると、main.jsに render: h=> h(App)と記述されており、 こちらのrenderの挙動を確認したかったので、確認用のサンプルコードを掲載。 環境 OS windows10 pro エディタ […]
Vue.js
Vue.js transition ラッパーコンポーネントのサンプルコード
- 2019.12.12
- transition, Vue.js, サンプルコード
transitionを利用してアニメーションを実現するサンプルコード 環境 OS Windos10 エディタ VScode Transitionクラスについて v-enter v-enter-active v-enter-to が表示に関連するクラス v- leave v- l […]
Vue.js Bootstrap-Vueを利用したプロジェクトの作成
- 2019.12.11
- Bootstrap-Vue, Vue.js
Bootstrap-Vueを利用してbootstrap4を簡単に利用できるプロジェクトの作成手順。 環境 OS ubuntu19.10 node v12.13.0 npm 6.12.1 @vue/cli 4.0.5 Vue CLI インストール 既に入れてい […]
Vue.js vue-routerの簡単なサンプルコード
- 2019.12.07
- vue-router, Vue.js
vue-routerでページ遷移を実現する簡単なサンプルコードです。 環境 OS ubuntu19.10 node v12.13.0 npm 6.12.1 ※ubuntu19.10にnodeのインストールはこちら プロジェクト作成 r-testという名前でプロジェクト […]
Nuxt.js axiosを使用してAPI接続しJSONデータを取得する
Nuxt.jsでaxiosを使ってAPIデータを取得する手順とサンプルコードです。デザイン部は vuetify を利用しています。 環境 OS ubuntu19.10 node v12.13.0 npm 6.12.1 Nuxt.js v2.10.2 Nuxt […]
Vue.js Vue.Draggableを利用してドラッグ＆ドロップを実装するサンプルコード
- 2019.12.03
- Vue.Draggable, Vue.js
ドラッグ＆ドロップをお手軽に実装できるvue.jsコンポートネントライブラリ「 Vue.Draggable( SortableJS のvue版 )」を利用したサンプルコードです。 環境 OS ubuntu19.10 node v12.13.0 npm 6.12.1 v […]
Vue.js クラスのバインディングのサンプルコード
vue.jsでhtmlのクラスを動的に変更するサンプルコードです 環境 OS Windos10 エディタ VScode 基本構文 active と記載された箇所がクラス名show と記載された箇所が true / false（ 真偽値 ）となります true であれば acti […]
Vue.js v-cloakのサンプルコード
v-cloakを利用して、バインディングされる前に mastache構文( {{hoge}} ) が表示されないようにするサンプルコード 環境 OS Windos10 エディタ VScode サンプルコード 下記のソースコードをindex.htmlとして作成して保存します。 v […]
Vue.js Vuetifyの無料テンプレートを利用してみる
Vuetifyの無料テンプレートの1つParallaxを利用してみる 環境 OS ubuntu19.10 テンプレートのダウンロード こちらのページにアクセスし「DOWNLOAD NOW」をクリック クリックするとgithubにアクセスするので、こちらからダウンロードする ダウ […]
Vue.js Vuetifyを利用してみる
- 2019.11.16
- ubuntu19.10, Vue.js, Vuetify
Vue.jsのフレームワークで、マテリアルデザインを容易に利用できるVuetifyの利用手順と、ちょっとしたサンプルコードを記載 環境 OS Ubuntu19.10 Vue.js @vue/cli 4.0.5 vue/cli のインストール Vue/cliがインストールされてない場合はイ […]