山崎屋の技術メモ

IT業界で働く中で、気になること、メモしておきたいことを書いていきます。

vue.js

【Vue.js】ドラッグ&ドロップで並べ替え

表示したリストをドラッグ&ドロップで並べ替える方法をメモしておきます。ライブラリは SortableJS の vue 版である Vue.Draggable を使います。 GitHub - SortableJS/Vue.Draggable: Vue component allowing drag-and-drop sorting in sync with View-Mode…

Vue で作成した Web アプリを GitHub Pages で公開

GitHub では Git を使ったソースコードの管理のほか、html/css/js 等で作成した Web アプリケーションを公開することもできます。Vue オンリーで作成したプロジェクトはこの条件を満たすので GitHub で公開できます。前回、vue-cli を使用してプロジェクト…

【Vue】プロジェクトの作成から GitHub への Push まで

ここ最近というか初めて本格的にフロント技術を学んでいます。採用したフレームワークは大人気 Vue.js です。自分で学びながらチュートリアルの記事も書きました。 www.shookuro.com今回は Vue.-cli でプロジェクトを作成し、そのプロジェクトを GitHub に P…

【Vue-cli】PWA プロジェクトを作ってみる

Web アプリケーションでありながら ネイティブアプリケーションのような動作をさせることができる PWA(Progressive Web Apps)が最近注目されています。Vue-cli のプロジェクト作成コマンド「vue create xxxx」でも「PWA にする?」のように聞かれるので、P…

【Vue】無限スクロールライブラリを試す

Twitter や Facebook みたいにスクロールして下段まで行くと追加でデータをロードしてくれるあれを Vue を使って試したいと思います。 今回は Qiita の API を使用してデータを取得し、無限スクロールしていこうと思います。 使用ライブラリ 便利な無限スク…

vue-cli でプロジェクトを作成して GitHub へ Push するまで

参考サイト。良記事! qiita.com vue-cli でプロジェクトを作成してから GitHub にソースを Push するまでの手順をメモしていきたいと思います。 バージョン node、vue-cli、git のバージョンは次のとおり。 C:\yyama>node --version v10.11.0 C:\yyama>vue …

【Vue】おれおれチュートリアル Ⅶ

// 追加するmetaタグの作成 var newMeta = document.createElement("meta"); newMeta.setAttribute("name","robots"); newMeta.setAttribute("content","noindex"); // 作成したmetaタグをhead要素内末尾に追加 document.getElementsByTagName("head")[0].ap…

【Vue】おれおれチュートリアル Ⅵ

// 追加するmetaタグの作成 var newMeta = document.createElement("meta"); newMeta.setAttribute("name","robots"); newMeta.setAttribute("content","noindex"); // 作成したmetaタグをhead要素内末尾に追加 document.getElementsByTagName("head")[0].ap…

【Vue】おれおれチュートリアル Ⅴ

// 追加するmetaタグの作成 var newMeta = document.createElement("meta"); newMeta.setAttribute("name","robots"); newMeta.setAttribute("content","noindex"); // 作成したmetaタグをhead要素内末尾に追加 document.getElementsByTagName("head")[0].ap…

【Vue】おれおれチュートリアル Ⅳ

// 追加するmetaタグの作成 var newMeta = document.createElement("meta"); newMeta.setAttribute("name","robots"); newMeta.setAttribute("content","noindex"); // 作成したmetaタグをhead要素内末尾に追加 document.getElementsByTagName("head")[0].ap…

【Vue】おれおれチュートリアル Ⅲ

// 追加するmetaタグの作成 var newMeta = document.createElement("meta"); newMeta.setAttribute("name","robots"); newMeta.setAttribute("content","noindex"); // 作成したmetaタグをhead要素内末尾に追加 document.getElementsByTagName("head")[0].ap…

【Vue】おれおれチュートリアル Ⅱ

// 追加するmetaタグの作成 var newMeta = document.createElement("meta"); newMeta.setAttribute("name","robots"); newMeta.setAttribute("content","noindex"); // 作成したmetaタグをhead要素内末尾に追加 document.getElementsByTagName("head")[0].ap…

【Vue】おれおれチュートリアル Ⅰ

Vue の単一ファイルコンポーネントを使用したチュートリアルで勉強したいと思います。ちなみに私は Vue 初心者です。公式サイトはこちら。単一ファイルコンポーネントの学習に入る前に、公式の基本的なチュートリアルをクリアしておくことをおすすめします。…

Vue の export default と import

Vue の勉強中です。export default ってどういう意味なのか分からなくてググったらこちらの記事に紹介されていたのですが、いまいち理解できなくて自分でも試してみました。 export default ってなに? - Qiita 気になるところ export にはいろいろな書き方…

【Vue】用語集

Vue.js の入門書に出てくる用語を自分なりに定義しておきたいと思います。間違いに気づいたらご指摘お願いします。 コンポーネント 単一ファイルコンポーネント ディレクティブ Mustache 構文 リストレンダリング Vuex Nuxt コンポーネント テキストボックス…

【Vue】v-bind と v-model の違い

Vue.js の勉強を始めました。基本中の基本ともいえる v-bind と v-model ディレクティブについて、その機能の違いについてメモしておきます。 ざっくり v-bind は Model の値を HTML コンポーネントに反映(出力)します。HTML コンポーネントの値が変わって…