コピー2019.04.25Webアプリを作る機会があり、Vue.jsについて学んだので、今回は簡単なタスク管理アプリを作成しながら、Vue.jsについてまとめてみようと思います。実際に作ったものはこちらスポンサーリンク目次Vue.jsとは仕様を決める必要なものHTMLJavaScriptCSSおわりにVue.jsとはVue.jsは、MVVMを採用したJavaScriptのフレームワークです。双方向データバインディングにより、SPA(シングルページアプリケーション)などのインタラクティブなWebアプリケーションを効率よく開発できるのが特徴です。アプリケーション向きなので、普通のサイトではVueを使う意味はあまりないかなと、個人的には思います。Frameworkvuejs.org仕様を決めるタイトルと内容を入力でき、送信ボタンでタスクを追加できるドラッグアンドドロップで並び替えできるエラー時、タスク追加、タスク削除、並び替えでアラートメッセージ出力まずは簡単にこの3つの仕様で作っていきます。必要なものHTMLファイルを用意し、headタグ内に次のものを読み込みましょう。上はVue.js本体、Sortable.min.jsとvuedraggable.umd.min.jsはタスクの並び替えに使います。src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>HTML以下のコードをコピペで大丈夫です。Vue.jsでは、全体を任意のid(この場合はapp)で囲むのが基本です。</div></div><transition>このタグで囲んだ部分はtransitionアニメーションが適用されます。<draggable>ドラッグアンドドロップで並び替えする要素をこのタグで囲みます。デフォルトではdiv要素としてレンダリングされます。element=”ul”とすることでulタグでレンダリングされます。v-bind:classにはクラスを、v-bind:optionsにはアニメーションの有無やディレイ(遅延)、そしていちばん重要なのはv-bind:listです。これはdataオブジェクト内のどのデータを並び替えるかという指定です。v-bind:listを指定しなくても見た目上は並び替えができているように見えますが、肝心のdataオブジェクト内のデータが並び替えできないので、必ず指定しましょう。@endは並び替えが終わった後に実行する処理です。methodsに定義した関数を実行できます。JavaScriptこちらもコピペで大丈夫です。Vue()の形でインスタンスを作ります。elには、HTML上で全体を囲っている#appを入れます。dataはVue内で使う変数の集合体です。methodsもVue内で使う関数の集まりです。それぞれ、endSort(並び替えが終わった後のアラート表示)、sendTask(送信ボタンを押した時に実行する関数)が定義されています。Vue.componentは再利用可能なDOM構造(コンポーネント)をテンプレートとして登録します。appのmethodsは参照することができません。その場合は、closeTaskのように、コンポーネント側にmethodsを定義します。CSSCSSはお好みで調整してください。-100px);}おわりに最初はVue.jsって何ができるの?データバインディングって何だ?と思っていましたが、実際に学んでみて、データ上の変更をリアルタイムでレンダリングしてくれる、SPAなどのアプリケーション開発に向いているということが分かりました。個人的にはもう少しVue.jsについて勉強してみたいと思いました。Pocket関連記事JavaScriptvue.jsで子から親コンポーネントにデータを渡す方法こんにちは。vue.jsで、子コンポーネントから親コンポーネントにデータを渡す方法があれば便利ですよね。調べてみると、$emitというメソッドを使うと簡単にできるようなので、今回はその方法を紹介します。6の表示をそのまま縮小表示する方法こんにちは。SEなどのコンパクトデバイス。文字が変なところで改行され...FileSaverJSだけで複数のbase64データを画像化しZIPでダウンロードこんにちは。今回は、複数のbase64データを画像化して、ZIPで圧縮してダウンロードする機能を実装します。使うライブラリは以下2つです。scriptでディレクトリごとコピーする方法【fs-extra】npmで、あるファイル(ディレクトリ)を特定の場所にコピーする方法です。こちらをインストールしてください。必要な部分のみ抜粋します。以...JavaScriptVue.jsで「?」から始まるURLのクエリパラメータを設定・取得する方法こんにちは。この記事では、Vue.jsで「?」から始まるURLのクエリパラメータを設定・取得する方法について解説します。seeking」とエラーが出た話Laravelで動画のストリーミング再生を実装する【Safariでも再生可能】LaravelのtextareaをtinyMCEエディターにする方法【画像アップロードあり】カテゴリーAPICSSdjangodockerFileSavergitgulp.jsHTMLiziModalJavaScriptJSZipLaravelmacmysqlnodenpmoEmbedPHPPythonSEOtinyMCEVue.jsWordPressアドセンスフレームワーク未分類スポンサーリンクタイトルとURLをコピーしました。