$ npm install bootstrap-vue main.jsに追加 import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.use(BootstrapVue)

ヘッダーやフッターにも使えるテクニックとして、Vue CLIで立ち上げたプロジェクト内にてあるコンポーネントの中に他のコンポーネントを表示する方法をメモしておきます。 src/views/Product.vue（表示する親側のコンポーネント） <template> <ProductPhoto /> </template> <script> import ProductPhoto f</script>…

前回の記事の流れで、今度はGoogle fonts反映の方法もついでに記述しておきます。 まずは使いたいフォントを選び、@importとSpecify CSSのfont-familyを取得してきましょう。 あとはApp.vueに以下のように記述。 <template> <div id="app"> </div> </template> <script> //省略 </script> <style> @import "./css/styles.css";…

ルートコンポーネントであるApp.vueのStyleタグに読み込みたい外部CSSファイルを指定しましょう。ファイルパスは以下を参考にしてください。 src/css/styles.css src/App.vue <template> <div id="app"> </div> </template> <script> //省略 </script> <style> /* ファイルパスに従って@importntの後にファイルパスを書き込む </style>…

SPAでサイトを構築する際に、APIのデータが入ったファイルから同一componentへ、同一の項目を渡したいというシチュエーションでは以下のような方法が役に立ちます。 具体的なシチュエーション 商品ページをSPAで作る際に、商品名や値段などは各商品1つでいい…

第一回 【Vue Router】Vue Routerを使って2つのコンポーネントを画面遷移なしで切り替えたい - Laravelとねころっけくん5.8第二回 【Vue Router】URLのパラメーターから個別ページに移動したい - Laravelとねころっけくん5.8 今回はあらかじめ用意しておいた…

以前の記事をベースに、今回はURLのidパラメータによってページの表示が切り替わる仕組みを作成していきます。商品一覧ページから商品詳細ページなどへ飛ぶ際に便利かと思います。 router.jsへの追記 src/views/ProductList.vueの作成 src/views/Product.vue…

このような形でアクティブなrouter-linkだけをハイライトしたい場合は、router-link-activeクラスを利用します。 router-link-activeとは router-link-activeは、選択されたアクティブなRouter linkタグに自動付与されるclass名です。内で以下のように指定し…

こちらの記事の手順を参考にして、まずはVuexとVue Routerをインストールします。 該当ディレクトリ・ファイルの作成 src/views/Home.vue src/views/Product.vue src/router.js main.jsにrouter.jsを登録 App.vueにVue Routerを描画 URLに#が付く まとめ 参…

簡単な例を使って独立したVuexでアプリケーションjsファイルを画面に反映させるまでの手順を分解していきましょう。 store.jsの作成 storeインスタンスを/src/main.jsに登録 src/App.vueで使用してみる アロー関数によるインスタンスの参照方法について 参考…

以下で完了です。 $ npm install vuex babel -polyfill $ npm install --save-dev babel-polyfill babel -polyfill がついているのは、ES2015をVuexで使用する際にES2015に対応しないブラウザの欠陥を埋めるため。polyfill = ブラウザの欠陥（穴）を埋めるた…

Failed to compile Module not found: Error: Can't resolve 'babel-polyfill' in '/Users/.../node_modules/react-insta-stories/dist' 上記のエラーが起こった際には、 $ npm install --save-dev babel-polyfill で解決。 参考 Can't resolve 'babel-polyf…

// C9_PID単体の出力方法 $ echo $C9_PID //環境変数一覧の出力方法 $ env またCloud9のPreviewタブ > Preview Running Applicationで開くウィンドウのURLからもC9_PIDとRegionは確認可能です。

以下が解決に至った手順 $ node -v v10.7.0 $ nvm ls v8.16.0 -> v10.7.0 system default -> v10.7.0 node -> stable (-> v10.7.0) (default) stable -> 10.7 (-> v10.7.0) (default) $ nvm version-remote stable v12.7.0 $ nvm install stable Now using n…

Vue CLIを扱う際には、 node npm も同時に必要です。 ただしnodeをインストールすれば、npmも同時にインストールされることになっています。 node、npmがインストールされているか確認 インストール元 Vue CLIのインストール Vue CLIのバージョン確認 Vue CL…

See the Pen transitionで1秒かけてopacityを0にしたい by りっしー (@hiwriterprogram) on CodePen. transitionタグ内にname属性指定をする場合 先ほどはCSS側でv-enter-activeなどプレフィックスに「v-」がついていましたが、transitionタグ内にてname属性…

component間で通信をするには、 propsとカスタムイベントを使用した親子間の通信 イベントパスを使用した非親子間の通信 Vuexを使用した状態管理 の3つの手段があります。以下に紹介するのは、 propsとカスタムイベントを使用した親子間の通信です。 propsと…

グローバルコンポーネント See the Pen xvEygO by りっしー (@hiwriterprogram) on CodePen. グローバルコンポーネントは全てのVueインスタンスで使用可能 ローカルコンポーネント See the Pen eqdPEm by りっしー (@hiwriterprogram) on CodePen. ローカル…

以前、refsを使ってDOMを直接参照するという記事を書きましたが、今回はその応用です。 refsを参照する場合、仮想DOMではなく実体のDOMを参照するため、データ反映が遅いという現象が起きてしまいました。すぐさま値を知りたい場合、本来はリアクティブな仮…

フィルタとは、文字数を丸めたり数字にカンマを入れるといったテキストベースの変換処理に特化した機能です。フィルタはローカルまたはグローバルに登録して使用しますが、注意点としてローカルに登録した場合でもthisへのアクセスはできません。引用元：基…

See the Pen watchでGitリポジトリ検索 by りっしー (@hiwriterprogram) on CodePen. 選択肢（dataのtopics）を増やせばさらに検索の幅が広がります。 検索についてはJS側の方はほぼ定型のようなものなので色々なものに応用できそう。 参考 基礎から学ぶ Vue…

算出プロパティは、dataが変化するたびに作動してくれるメソッドです。 そのためv-modelでdataの各項目と結びつきのあるinputを作れば、簡単に計算などをすることができます。 See the Pen NQRveM by りっしー (@hiwriterprogram) on CodePen. 参考 基礎から…

インラインメソッドハンドラ See the Pen インラインメソッドハンドラ by りっしー (@hiwriterprogram) on CodePen. HTMLのタグ内にてv-onのmethodsを書いてしまうというもの。 短いメソッドや1度しか使わないメソッドであれば使ってもよいですが、長いメソ…

v-pre See the Pen v-preの使い方 by りっしー (@hiwriterprogram) on CodePen. v-preは、{{}}で囲ったdataの値があっても変換をしません。 そのため静的なコンテンツとして扱われます。 v-once See the Pen v-onceの使い方 by りっしー (@hiwriterprogram) …

以下のコマンドを打ち込むことで解決しました。 $ npm install $ npm run dev 参考 【Laravel】初期導入時エラー「The Mix manifest does not exist.」

こちらの記事を元にやっております。 qiita.com まず ec2-user:~/environment (master) $ node -v v8.16.0 ec2-user:~/environment (master) $ npm -v 6.4.1 ec2-user:~/environment (master) $ nvm install 10.7.0 Downloading https://nodejs.org/dist/v10…

See the Pen componentへのdata、computed、methodsの設定方法 by りっしー (@hiwriterprogram) on CodePen. 設定方法はnew Vue後とさほど変わりませんが、気をつけるのはdataの定義方法です。関数を通して、オブジェクト形式で返すことをお忘れなく！ 参考 …

VueのComponentを作る際の基本形は以下の通りです。 See the Pen componentの作り方 by りっしー (@hiwriterprogram) on CodePen. 参考 基礎から学ぶ Vue.js

追加機能 削除機能 更新機能 参考 追加機能 まずはオブジェクト（リスト）に要素を足す方法です。 See the Pen rXeLEb by りっしー (@hiwriterprogram) on CodePen. ここで引っかかったのは、 this.monsters.reduce(function(a,b){ //reduce以降はidの最大値…

以下のようにすることで、hpが300以上のmonsterにだけ、「強い！」という文字を足すことができます。 See the Pen v-forとv-ifを連携して特定のdateにだけ効果を付与したい by りっしー (@hiwriterprogram) on CodePen. また、v-forと同じタグの中で、先ほど…