Vueでコンポーネントを作ってみた件
さて前回まででヘッダーの作成が完了しました。次はコンテンツ部分です。まずはTodo.vue、Task.vueの二つに共通するソート機能のボタン部分と、リストのタイトル部分をを作っていきます。 共通パーツをコンポーネント化する Todo.vue、Task.vue共通のソート機能をヘッダー下部に作っていきます。App.vueに直接書き込んでも良いのですが、この先違う画面の開発でソート機能のない画面を作 […]
2019年10月
Vueのヘッダーをカスタマイズしてみた件
今回はコンポーネントの親である、App.vueファイルでヘッダーとフッターのカスタマイズをしてみたいと思います。 ヘッダーの修正 ヘッダー部のリンクの変更とCSSを調整したいと思います。変更するファイルはrouter.jsとApp.vue。また、新規タスク登録用ページTask.vueの新規作成です。 まずはTask.vueを作成してしまいましょう。 Task.vueの作成 Task.vueに関して […]
Vueのコンポーネントファイルをいじってみた件
前回はインストールしたファイルをどのように描画しているか順をおって説明しました。今回はTODOリストをつくって行けるようにいじってみたいと思います。 Todo.vueファイルを作る まずはTodo.vueファイルを作りルーターに渡していきたいと思います。まずは新規ファイルを作成し、そこに最低限の記述だけ先にしていきます。 // Todo.vue<template> <div class […]
Vueプロジェクトファイルを確認してみた件
Vue-Cliを使いプロジェクトのパッケージがインストール完了すると。様々なファイルがインストールされたことがわかるかと思います。全てを解説すると長くなってしまうのでまずは、主要なファイルの説明を簡単にしていきたいと思います。 どうやって表示されているか まずはVue.Jsがどのようにブラウザに表示させているかを把握しましょう。– public / index.htmlこのファイルが最 […]
Vueでプロジェクトをたちあげた件
さて、前回お話しした通りVue-Cliを使いTODOリストを作っていきます。Vue-Cliのインストール方法がわからないという方はこちらから。 プロジェクトの作成 createコマンドを使いプロジェクトを作成します。プロジェクト名は「app_todo」です。 vue create app_todo すると次のような質問がでてきます。 Vue CLI v3.0.1 ? Please pick a p […]
Vueで何を作るか決めてみた件
さて、Vue-Cliを勉強すると言ってもリファレンスをみながら進めていくだけでは退屈なので、制作物を決めていきたいと思います。 Webアプリケーションを作りたい フレームワークを使った制作物といえばやはりWebアプリではないでしょうか。Vue.Jsを使うことで再利用性やディレクティブ、データバインディングといった機能を活かしたスマートな制作ができます。 今回はTODOリストを作成しようと思います。 […]
Vue.Jsをはじめてみた件
人気のjavascriptフレームワークVue.jsをはじめてみました。なぜVueなのかというと単純に他のフレームワークに比べ学習コストが低いからです。とはいえ使いこなすためにはそれなりの時間がかかるためここから地道に努力していこうと思います。 Vue.Jsとは さて、Vue.jsの特徴はと言いますと。 学習コストの低さ コンポーネントによる再利用性 ディレクティブを使える このあたりになってくる […]