Vue.js
ここではVue.jsでのリストレンダリングについて説明しています。
作った作品はこちらです。「Vue.jsにおける用語ついての説明」を掲載しました。| "Explanation of terms in Vue.js" has been posted.
作った作品はこちらです。「vue.jsを使い、自動見積フォーム」を掲載しました。| "Automatic quotation form" has been posted using vue.js.
作った作品はこちらです。「vue.jsを使い、商品の絞り込み、替え機能がある商品一覧ページ」を掲載しました。| "Product list page with product narrowing and sorting functions using vue.js" has been posted on Learning and Vue.js.
作った作品はこちらです。「vue.jsでのコンポーネントにおける繰り返し描画する（v-for)」を掲載しました。"About repeated drawing (v-for) in components in vue.js" was posted
作った作品はこちらです。「vue.jsでのコンポーネントにおけるデーターの受け渡し➁(子コンポーネントから親コンポーネントへ）」を掲載しました。"Transfer of data in component in vue.js (from child component to parent component)" was posted
作った作品はこちらです。「vue.jsでのコンポーネントにおけるデーターの受け渡し➀(子コンポーネントから親コンポーネントへ）」を掲載しました。"Transfer of data in component in vue.js (from child component to parent component)" was posted
作った作品はこちらです。「Vue.jsにてコンポーネント(component)でのデーターの受け渡し（親コンポーネントから子コンポーネント）」を掲載しました。Data transfer by component in Vue.js (parent component to child component)
作った作品はこちらです。コンポーネント(component)を勉強し、作った作品を掲載しました。
作った作品はこちらです。トランジション（transition）を勉強し、作った作品を掲載しました。
作った作品はこちらです。カレンダーにて双方向データバインド、またレンジ入力とカラー選択を同期を勉強し、作った作品を掲載しました。
作った作品はこちらです。セレクトボックスでの双方向データバインドを勉強し、作った作品を掲載しました。
作った作品はこちらです。チェックボックス、ラジオボタンでの双方向データバインドを勉強し、作った作品を掲載しました。
作った作品はこちらです。チェックボックスでの双方向データバインドを勉強し、作った作品を掲載しました。
作った作品はこちらです。双方向のデーターバインドを勉強し、作った作品を掲載しました。
作った作品はこちらです。イベントやウオッチャ（watchオプション）を勉強し、作った作品を掲載しました。
作った作品はこちらです。イベントを勉強し、作った作品を掲載しました。
ユーザーの操作を検知してコンピューターを動かすので、よりプログラミングを勉強しての成果が実感できますね。
作った作品はこちらです。算出プロパティを勉強し、作った作品を掲載しました。
これも必須な学びですね。便利な機能なのでいろいろなパターンを学んでいきたいですね。今回、本で学んで 作った作品はこちらです。学んだ本（Vue.jsのツボとコツがゼッタイにわかる本）はこちらです。
フィルター処理を勉強し、作った作品を掲載しました。
この機能は必須な学びですね。いろいろ応用されて使われているのでしょうね。また、今回も読者の方がDOMを動かせるように書いておきました。試してみてプログラミングを体験してみましょう。
作った作品はこちらです。
クラス属性、リストデーターにバインドする、条件付きで描画を勉強し、作った作品を掲載しました。
今回も読者の方がDOMを動かせるように書いておきました。試してみてプログラミングを体験してみましょう。
作った作品はこちらです。
テキストにバインドを勉強し、作った作品を掲載しました。
Vue.jsの理解を深めるため新しい本を買って勉強し始めました。本によって教え方が若干違うのでそれもまた勉強になります。あ、こっちのほうが教え方が丁寧だな、とか逆に前の本のほうがここの部分は良い点だなとか比較でき多角的に勉強できます。 作った作品はこちらです。
「画像ビューワーを作成しよう」を勉強し、作った作品を掲載しました。
これまた結構長いコードで大変でしたが、本に習いコツコツとコードを書いてきました。コンポーネントを使ったものでまずそれを理解し、そのコンポーネントでの親子関係、親子間でのデーターやイベントのやり取りについて学びました。 しかし、これ一つ作成しただけでは正直、まだまだ理解不足であり、これからいろんなものを実装して理解を深化させていこうと思います。 こちらです。「TODOアプリを作る」を勉強し、作った作品を掲載しました。
結構長いコードで大変でしたが、本に習いコツコツとコードを書いてきました。途中うまく実装できてなく何度か見直したりしても、バグが見つからず心折れそうにもなりました。 しかし、必ず間違いはあり、合っているという思い込みを捨て、あきらめず完成できたときはうれしかったですね。 こちらです。「クラスバインディングで動的にスタイルを変え、ハンバーガーボタンを作る」を勉強し、作った作品を掲載しました。
クリックすると開閉するハンバーガーボタンを作りました。ハンバーガーとは2～3本の水平線が並んだデザインを指し、スマートフォンアプリでなどでよく見かけるのが代表的です。 こちらです。「バインディングで動的にスタイルを変える」を勉強し、作った作品を掲載しました。
バインディングとはデーターバインディングを略したもので、データーとテンプレート（HTML)の要素を紐づけることによってデーターの変更をテンプレート側に自動で反映する仕組みとのことです。今回は勉強中の本に載っていた「色を変化させるアプリを作ろう」から作ってみました。 こちらです。「バリテーション機能付きの入力フォーム」を勉強し、作った作品を掲載しました。
バリテーションとはフォームなどに入力された値が、決められた規則にそっているかどうかを検証することのようです。 今回は名前は4文字以上、電話番号は数字8文字以上、Eメールアドレス形式での規則としました。そうでない場合、エラー文字がでるようにしました。 こちらです。「v-if、v-else-if、v-elseの３つを組み合わせた条件付きレンダリング」を勉強し、作った作品を掲載しました。
59ならCランク、60以上ならBタンク、80以上ならAランクとなるようにしました。 こちらです。「v-if、v-elseによる条件付きレンダリング」を勉強し、作った作品を掲載しました。
条件分岐の意味自体はJavascriptで習っていたので抵抗なく理解することができました。でもvue.jsでの書き方をこれから学ばなければいけないですね。仕組みを少しずつ勉強しています。こちらです。「カウンターアプリの作り方」を勉強し、作った作品を掲載しました。
ボタンをクリックするたびに画面上で数値が加算されるようになっています。こういった簡単な作品をつくることからvue.jsの仕組みを少しずつ勉強しています。こちらです。「データーをWebブラウザに出力」「イベントハンドリングとメソッド」を勉強し、作った作品を掲載しました。
Vue.jsなるものを本を買ってきて勉強しました（こちらが買った本） 勉強中でまだまだ理解不足ですが、今は例題が出されている通りコードを書いていき、コツコツと要領をつかんでいきたいと思います。今回、うまく実装できた作品はこちら2点です。作品１「データーをWebブラウザに出力」
作品２「ボタンをクリックすると表示されているものが変わる」
Vue.js
Vue.jsなるものを少し学んでみました。マスタッシュ？ディレクティブ？lodashのライブラリー？などなどまだまだ理解不足でわからないことだらけですが、何とか作ってみました。| I learned a little about Vue.js. Mustache? Directive? lodash library? There are still a lot of things I don't understand due to lack of understanding, but I managed to make it.
こちらが今回勉強させてもらった、ともすたさんの動画です。| Here is a video of Tomosuta-san who studied this time.