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という名前でプロジェクト […]
vue-routerでページ遷移を実現する簡単なサンプルコードです。 環境 OS ubuntu19.10 node v12.13.0 npm 6.12.1 ※ubuntu19.10にnodeのインストールはこちら プロジェクト作成 r-testという名前でプロジェクト […]
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( SortableJS のvue版 )」を利用したサンプルコードです。 環境 OS ubuntu19.10 node v12.13.0 npm 6.12.1 v […]
vue.jsでhtmlのクラスを動的に変更するサンプルコードです 環境 OS Windos10 エディタ VScode 基本構文 active と記載された箇所がクラス名show と記載された箇所が true / false( 真偽値 )となります true であれば acti […]
v-cloakを利用して、バインディングされる前に mastache構文( {{hoge}} ) が表示されないようにするサンプルコード 環境 OS Windos10 エディタ VScode サンプルコード 下記のソースコードをindex.htmlとして作成して保存します。 v […]
Vuetifyの無料テンプレートの1つParallaxを利用してみる 環境 OS ubuntu19.10 テンプレートのダウンロード こちらのページにアクセスし「DOWNLOAD NOW」をクリック クリックするとgithubにアクセスするので、こちらからダウンロードする ダウ […]
Vue.jsのフレームワークで、マテリアルデザインを容易に利用できるVuetifyの利用手順と、ちょっとしたサンプルコードを記載 環境 OS Ubuntu19.10 Vue.js @vue/cli 4.0.5 vue/cli のインストール Vue/cliがインストールされてない場合はイ […]
vueのwatch機能を利用して、指定したデータとオブジェクト(今回は配列)を監視し処理を実行する基本的なサンプルコードになります。 環境 OS windows10 pro エディタ VScode サンプルコード 下記のソースコードをindex.htmlとして作成して保存する。 […]
Laravel6だとvue.jsが自動で生成されないのでvue.jsを利用するための手順を記載。 環境 #cat /etc/centos-releaseCentOS Linux release 7.7.1908 (Core) Laravelプロジェクトの作成 ここではvueというプロジェクト名で作成 […]
mastache(マスタッシュ)構文( {{hoge}})では、 HTMLがエスケープされてデータバインディング されるます。 v-htmlディレクティブ を利用すれば、エスケープされずにhtmlを利用することができます 注意 公式にも記載されているように 、 v-htmlにはXSSの危険性があるた […]