Vue.js入門その８〜vue-draggableを使ってドラッグ機能の実装〜 | RE:ENGINES
はじめに 久しぶりにVue.jsの記事を書きます。 TrelloやGithubのカンバンのようなタスク管理を作りたいと考え、良い感じのライブラリないかな、と探していたところ、vue-draggableを見つけました。 https://github.com/SortableJS/Vue.Draggable Sortable.jsがベースのようで、かなり簡単にドラッグ機能が実装できます。 今回はこちらのライブラリを紹介したいと思います。 準備 今回もJSFiddleを使用します。 しばらく使ってませんでしたが、リニューアルしてましたね。 JSフレームワークをVueで選択しておけば、あとはそのままで良さそうです。 見た目を良くするために、Materializeを使用しています。 CDNのURLをResourcesに登録します。 また、今回の主役でもあるvue-draggableも登録します。 C
Vue.jsでお天気情報を取得
Vue.jsのお勉強。 Vue.jsでお天気情報のAPIを叩いて情報を取得するサンプルです。 お天気情報APIは無料で利用できるOpenWeatherMap(→APIリファレンス)を使用します。 Vue.jsでインクリメントサーチを少し改造して、リストから都市をクリックすると、その都市のお天気情報を表示します。 サンプルはこちら。 （見た目は、手抜きです・・・） HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cities</title> </head> <body> <div id="app"> <!-- 都市が選択されていれば、お天気情報を表示する --> <div v-if="selectedCity" class="weather"> <p class="weather_city"> {{ city
Vue.jsでインクリメントサーチ
Vue.jsのお勉強。 配列からインクリメントサーチをするサンプルです。 配列のサンプルはココのを使わせてもらいました。 JSONデータから日本の都市一覧を配列に入れてリスト表示して、検索窓に入力されたキーワードでフィルタしているイメージです。 サンプルはこちら。 参考：フィルタの置き換え-Vue 以下、ソース。 Javascriptの20行目以降の算出プロパティ(Computed:）でフィルタするようです。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cities</title> </head> <body> <div id="app"> 検索欄：<input type="text" v-model="searchQuery"> <ul v-for="city in filterCity"> <li>{
SCOUTER開発者ブログ
2024-09-10 テクノロジア魔法学校の体験談と評判 「テクノロジア魔法学校」というプログラミング教材をご存知ですか？ ホームページの広告などで一度は目にしたことがある人も多いのではないかと思いますが、ディズニーが提供する子供向けのプログラミング教材です。 今回は、この「テクノロジア魔法学校」の体験版を実際に体験してみての感想や、「テクノロジア魔法学校」がどのようなものか、その評判などを見ていきたいと思います。 テクノロジア魔法学校とは 料金 エント […] 2024-09-10 レンタルサーバー「クイッカ」の評判と使い勝手 レンタルサーバーとして有名なサーバーの一つに、「クイッカ」があります。 名前は聞いたことのある人も多いのではないかと思いますが、今回はこの「クイッカ」について、料金やスペック、評判などを見ていきたいと思います。 レンタルサーバー「クイッカ」の基本情報 レンタルサー
お天気アプリで学ぶVue.jsのAPI連携 ｜ Tips Note by TAM
Vue.js で気象情報を表示させてみたいなとふと思い立ったので実際に作りながらVue.jsのAPI連携についてもまとめてみました。 今回実装するに当たってAPIからデータの取得が簡単に行えるaxiosを利用します。 基本的なVue.jsの使い方は公式ドキュメントがあります。 Vue.js - 基本的な使い方 axiosに関してより詳しく知りたいという方は以下のリンク先でご確認ください。 GitHub - axios/axios: Promise based HTTP client for the browser and node.js ■以下のように特定地域の気象情報をVue.jsで描画させることを目指します。 デモページ ■必要な準備 OpenWeatherMapでアカウント（無料）を作成し、APIキーを取得する OpenWeatherMapでは気象情報を取得できるAPIサービスが用意
【JavaScript】Vue.jsをサーバサイド風に例えて説明してみる - Rのつく財団入り口
メタファーを使ってみよう 様々な言葉が飛び交い、文脈によって意味が違ったりもするIT用語。何かを説明するときに比喩表現を使うことも多いかと思います。かっこよく英語で言うとメタファー(Metaphor)というやつですね。 僕はアーキテクトっぽい立ち位置にいるので仕事柄、プロジェクトの開発メンバーや新たに加わるメンバー、開発の一線から離れたプロマネの人、技術に疎くなってしまった管理職や偉い人、共同開発の人や顧客など様々な人に、技術的な説明をしたりする機会が時々あります。 最近はVue.jsのことを説明する機会があり、そういえば相手がわかるようにサーバサイドに例えて話すことが多いなあとふと思いました。ということでこのエントリではその話を書こうと思います。 だいたい、聞き手は以下のような人であることを想定しています。 サーバサイド(フロントエンド用語でいうバックエンド)のWebアプリケーション開発
Vue Patterns
GitHub PatternsComponent DeclarationComponent CommunicationComponent Events HandlingComponent Conditional RenderingDynamic ComponentFunctional ComponentRenderless ComponentCompositionPassing Props & ListenersHigher Order Component (a.k.a. HOC)Provider / ConsumerDependency injectionHandling ErrorsProductivity TipsUseful LinksFullstack Vue BookTranslations
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTips - Qiita
はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から来るバグはほとんど無くなるでしょう。 ここではこの変数や式を極力減らせるTipsを紹介したいと思います。 1. dataを極力定義しない Vue.jsでコンポーネントを定義する際ついdata()に沢山変数を定義しちゃいますよね。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VueToolbox
やわらかVue.js