vue.js
公開中の PWA アプリを GooglePlayStore で紹介できるようにするための手順をメモしておきます。 今回、GooglePlayStoreで紹介したい公開中の PWA アプリはこちら。 yyama694.github.io なお、パラメータ user_id でツイッター ID を渡すと遷移時に自動でツ…
Vue で作った既存の Web アプリケーションを国際化（多言語）対応していきます。vue-i18n というライブラリを使用します。 GitHub - kazupon/vue-i18n: Internationalization plugin for Vue.jsVue I18n国際化対応するアプリケーションは、すでに公開してい…
まずバージョン情報。 vue : 2.6.10 vue-cli : 3.7.0 node : 10.11.0 npm : 6.4.1 Vue cli を使って「vue create app-name」とかやってプロジェクトを作成すると、デフォルトでは Vue の単一ファイルコンポーネントを使うプロジェクトが作成されます。普段は…
HTML の class 属性に値を追加するだけで良い感じのページにしてくれる css フレームワークの bulma。Vue プロジェクトでも積極的に利用していきたいです。公式ページ Bulma: Free, open source, & modern CSS framework based on FlexboxVue プロジェクトで…
表示したリストをドラッグ＆ドロップで並べ替える方法をメモしておきます。ライブラリは SortableJS の vue 版である Vue.Draggable を使います。 github.com 日本語情報も豊富で人気のあるライブラリのようです。 Vue.Draggableを使ってサクッとTrelloっぽ…
GitHub では Git を使ったソースコードの管理のほか、html／css／js 等で作成した Web アプリケーションを公開することもできます。Vue オンリーで作成したプロジェクトはこの条件を満たすので GitHub で公開できます。前回、vue-cli を使用してプロジェクト…
ここ最近というか初めて本格的にフロント技術を学んでいます。採用したフレームワークは大人気 Vue.js です。自分で学びながらチュートリアルの記事も書きました。 www.shookuro.com今回は Vue.-cli でプロジェクトを作成し、そのプロジェクトを GitHub に P…
Web アプリケーションでありながら ネイティブアプリケーションのような動作をさせることができる PWA（Progressive Web Apps）が最近注目されています。Vue-cli のプロジェクト作成コマンド「vue create xxxx」でも「PWA にする？」のように聞かれるので、P…
Twitter や Facebook みたいにスクロールして下段まで行くと追加でデータをロードしてくれるあれを Vue を使って試したいと思います。 今回は Qiita の API を使用してデータを取得し、無限スクロールしていこうと思います。 使用ライブラリ 便利な無限スク…
参考サイト。良記事！ qiita.com vue-cli でプロジェクトを作成してから GitHub にソースを Push するまでの手順をメモしていきたいと思います。 バージョン node、vue-cli、git のバージョンは次のとおり。 C:\yyama>node --version v10.11.0 C:\yyama>vue …
第７弾です。前回までの記事はこちら。 【Vue】おれおれチュートリアル Ⅰ - 山崎屋の技術メモ 【Vue】おれおれチュートリアル Ⅱ - 山崎屋の技術メモ 【Vue】おれおれチュートリアル Ⅲ - 山崎屋の技術メモ 【Vue】おれおれチュートリアル Ⅳ - 山崎屋の技術メ…
第６弾です。前回までの記事はこちら。 【Vue】おれおれチュートリアル Ⅰ - 山崎屋の技術メモ 【Vue】おれおれチュートリアル Ⅱ - 山崎屋の技術メモ 【Vue】おれおれチュートリアル Ⅲ - 山崎屋の技術メモ 【Vue】おれおれチュートリアル Ⅳ - 山崎屋の技術メ…
前回までの記事はこちら。 【Vue】おれおれチュートリアル Ⅰ - 山崎屋の技術メモ 【Vue】おれおれチュートリアル Ⅱ - 山崎屋の技術メモ 【Vue】おれおれチュートリアル Ⅲ - 山崎屋の技術メモ 【Vue】おれおれチュートリアル Ⅳ - 山崎屋の技術メモ そして現在…
前回までの記事はこちら【Vue】おれおれチュートリアル Ⅰ - 山崎屋の技術メモ 【Vue】おれおれチュートリアル Ⅱ - 山崎屋の技術メモ 【Vue】おれおれチュートリアル Ⅲ - 山崎屋の技術メモいまの画面はこんな感じで、達成したタスクには取り消し線が出るよう…
前回までの記事です。 【Vue】おれおれチュートリアル Ⅰ - 山崎屋の技術メモ 【Vue】おれおれチュートリアル Ⅱ - 山崎屋の技術メモ ソースの全量は GitHub においておきます。 https://github.com/yyama694/ore-todo 現在の画面。 前回でタスクの追加が行え…
Vue チュートリアルの続きです。前回は、Vue プロジェクトの作成から、Todo の入力ボックス、追加ボタン、固定データの表示を行いました。まだ実際には動きません。前回の記事はこちら。 【Vue】おれおれチュートリアル Ⅰ - 山崎屋の技術メモGitHubはここ。 …
Vue の単一ファイルコンポーネントを使用したチュートリアルで勉強したいと思います。ちなみに私は Vue 初心者です。公式サイトはこちら。単一ファイルコンポーネントの学習に入る前に、公式の基本的なチュートリアルをクリアしておくことをおすすめします。…
Vue の勉強中です。export default ってどういう意味なのか分からなくてググったらこちらの記事に紹介されていたのですが、いまいち理解できなくて自分でも試してみました。 export default ってなに？ - Qiita 気になるところ export にはいろいろな書き方…
Vue.js の入門書に出てくる用語を自分なりに定義しておきたいと思います。間違いに気づいたらご指摘お願いします。 コンポーネント 単一ファイルコンポーネント ディレクティブ Mustache 構文 リストレンダリング Vuex Nuxt コンポーネント テキストボックス…
Vue.js の勉強を始めました。基本中の基本ともいえる v-bind と v-model ディレクティブについて、その機能の違いについてメモしておきます。 ざっくり v-bind は Model の値を HTML コンポーネントに反映（出力）します。HTML コンポーネントの値が変わって…
