シリコンバレースーパーウエア

ホーム ブログ Firebase情報 Vue 公式チュートリアル　 〜　処理したデータを表示に使う 2022年2月27日 Vue 公式チュートリアル　〜　処理したデータを表示に使う Vue 公式チュートリアルの ステップ８ は、予め処理したデータを表示に使う方法を学習します。Javascript のプログラムで持っているデータは、「生」のデータの場合が多く、実際の表示をする際には、そのデータを「加工」して利用したい場合が、たくさんあります。そうした場合の処理の仕方を学習します。 前回までのポイントは？ 一通り、Vue の「部品」の基本的な、書き方がわかったところで、前回のステップ７からは、プログラミング的な要素が増えてきました。前回の、チュートリアルのタイトルは、「データの一覧表示」がテーマでしたが、実際は、HTML や Javascript で新しい部分がたくさん出てきました。 配列（array）という同じ形のデータをまとめて扱うためのデータの型が出てきました。 「@keyup.enter」は、リターンキーが押された場合の処理を HTML の部分に書くやり方です。 「v-for」は、配列（array）のデータの一覧を表示するための、繰り返しなるような表示の HTML の書き方です。 処理を行うメソッド（関数）に値を渡すやり方も出てきました。 「filter()」というメソッド（関数）を使うと、配列（array）の要素を選ぶことができます。 「++」という「１を加える」という演算子が出てきました。 HTML の記述で「箇条書き」を行うやり方が出てきました。（「ul」と「li」のタグ） と実際の内容では、新しく学習した項目が多いステップでした。この他にも、以前のステップで出てきた書き方が使われていたので、何回か、前のステップを実際にやってみて、そうした項目が使えるようになっているかを確認してください。 今回学ぶのは？ 今回の ステップ８ では、引き続き前回と同じ「やる事リスト」を管理するアプリの続編です。 前回の ステップ７ では、やる事を「削除」する機能はありました。従って、やる事

ホーム ブログ Firebase情報 Vue 公式チュートリアル　 〜　データの一覧を表示する 2022年2月24日 Vue 公式チュートリアル　〜　データの一覧を表示する Vue の公式チュートリアルのステップも、ステップ７まできました。だんだん、プログラミングの要素が入ってきてプログラミングの学習らしくなってきました。このステップでは、データの一覧を表示する方法を学習します。 前回までのポイントは？ 前回までに、Vue の表示で使う「部品」の基本を中心に、HTML、CSS、Javascript の簡単な書き方と、連携のやり方を学んできました。 前回は、Javascript のプログラムの条件で表示を変える方法を学びました。Vue では、HTML の方にも「プログラム」のような記述ができるのが特徴の一つです。標準の HTML には、ない書き方を中心に覚えていく必要があることがだんだんわかってきたと思います。 今回学ぶのは？ 今回学ぶのも、HTML の中にプログラムのような書き方をするやり方です。 今回は、同じようなデータの集まり、プログラムでは配列（array）の中に入っているデータをまとめて表示するやり方です。 例題では、「todo（やる事）」の一覧を表示するという内容になっています。 <script> // give each todo a unique id let id = 0; export default { data() { return { newTodo: "", todos: [ { id: id++, text: "Learn HTML" }, { id: id++, text: "Learn JavaScript" }, { id: id++, text: "Learn Vue" }, ], }; }, methods: { addTodo()

ホーム ブログ Firebase情報 Vue公式チュートリアル　 〜　条件によって表示を変える 2022年2月22日 Vue 公式チュートリアル　〜　条件によって表示を変える Vue 公式チュートリアルのステップ６は、Javascript の条件によって表示の内容を変える事を学習します。 前回までのポイントは？ 前回までに、Vue の表示に使う「部品」になる、「*.vue」ファイルの基本の三つの部分、「template」、「script」、「style」の書き方を学習しました。そして、Javascript と HTML、HTML と CSS の連携についても少しづつ学習しています。 HTML、Javascript、CSS の基本の書き方は、それぞれの標準的な書き方に「近い」書き方です。しかし、実際には、「Vue 独特の書き方」があります。特に、HTML の細かい書き方は、微妙に違っています。そう考えると、初心者が混乱を避けるには、直接 Vue 独特の書き方をその都度学習するのは、意外に効果的かもしれません。 今回学ぶのは？ 今回のステップ６の課題は、ボタンを押す度に表示する内容をプログラムで変えるやり方です。 これが今回の変更前の課題のコードです。 <script> export default { data() { return { awesome: true, }; }, methods: { toggle() { // ... }, }, }; </script> <template> <button @click="toggle">toggle</button> <h1>Vue is awesome!</h1> <h1>Oh no 😢</h1> </template> 今回は、今まで学習した事で記述が書かれているので、特に新しい事は書かれていません。