インストール $ npm install vue-awesome-swiper 次にコーディングしていきます。 main.js import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global …

vueファイルのここに問題が。 <template lang="html"> こうすれば解決！ <template> 参考 Making a simple vue project · Issue #149 · electron-userland/electron-webpack · GitHub</template></template>

前回の記事では、Laravel5.8でVue.jsを使用する際の基本的な操作をご紹介しましたがComponentを追加したい場合の手順も記載しておきます。 /resources/js/components/MyComponent.vueの作成 まずは追加したいComponentを該当のディレクトリに追加しましょう…

今回はLaravelのプロジェクトインストールから説明を。 プロジェクトインストール package.jsonの編集 npm installでpackage.jsonの中身をインストール こんなログが出ます npm run devでビルドする なぜビルドしないとVueは動かない？ /resources/views/wel…

こちらの記事に記載されているところまでの設定をしつつ、GitHub PagesでデプロイできなかったためにNetlifyを使用してデプロイができました。基本は以下のサイトが参考になりました。 Vue.js＋Netlifyで自動デプロイ | 基礎から学ぶ Vue.jsただしこちらの記…

vue-cliで作ったアプリをGithub Pagesにデプロイ - Qiita vue-cliでwebアプリケーションを作って、GitHubPagesで無料で爆速でリリースした話 - Qiita このあたりを参考にVue Cli3で作成したファイルをGitHubPagesにてリリースしたかったのですが、真っ白な画…

Vue CLIでパッケージ導入した場合、CSSライブラリをどのように入れればいいのかについてのメモです。まずはターミナルに以下を入力 $ npm install --save aos@next次にsrc/main.jsにてAOSをインポート import AOS from 'aos' import 'aos/dist/aos.css'同じ…

$ 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 = ブラウザの欠陥（穴）を埋めるた…

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) …

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の最大値…