vue

Vue.js の基本 (10)

vue

前回、プロパティを使用することでコンポーネントへ値を渡せることを確認しました。 しかし場合によっては、コンポーネントから親側へデータを渡したい場合もあるはずです。 その場合は、カスタムイベントを使用します。 普通の input タグの場合、値が変化…

Vue.js の基本 (9)

vue

前回に引き続きコンポーネントを見ていきたいと思います。 以下のような、タイトルとメッセージを表示するというシンプルなHTML部品があったとします。 これをコンポーネント化してみたいと思います。コンポーネントにすると、こうなります。 一番はじめのHT…

Vue.js の基本 (8)

vue

プログラミング言語が変わっても変わらないことがいくつかあると考えていますが、そのうちの1つが「大きいものは分割する」ということです。 部品、共通化、関数、クラス、モジュール、ライブラリ、コンポーネント、などなど昔から呼び方や粒度は様々ですが…

Vue.js の基本 (7)

vue

テキストボックスに数値を入れると、それを加算するという機能を実装するとします。 JavaScript(+JQuery) で普通に実装すると、こんな感じになるでしょうか。 テキストボックスになにか入力されたら、すべてのテキストボックスの値を足して、labelにその内容…

Vue.js の基本 (6)

vue

これまで何度も Vue はリアクティブだリアクティブだと書いてきました。 上記は ON/OFF のラジオボタンを選択することで、テキストボックスの有効/無効が切り替わります。 これは isOn というデータにもとづいてリアクティブに行われています。 ところで、デ…

Vue.js の基本 (5)

vue

ループは、どのようなプログラミング言語でもテンプレートエンジンでも備えられていますが、もう1つ備えられているものがあります。分岐です。 Vue にも分岐を行うための仕組みがあります。それが v-if 属性です。 非常にシンプルです。v-if 属性に指定した…

Vue.js の基本 (4)

vue

どのようなプログラミング言語でも、テンプレートエンジンでも、ループを行うための仕組みがあります。 Vue でそれを行うのは、v-for 属性です。なお Vue 独自の属性には、すべて v- というプレフィクスがついています。 データは list という配列で、要素は…

Vue.js の基本 (3)

vue

前回、テキストボックス、ラジオボタン、セレクトボックスについて、UI 要素と JavaScript のデータがひもづく-バインディングされる様を確認しました。 UI 要素には他にも、複数のデータとひもづくものがあります。チェックボックス、複数選択セレクトボッ…

Vue.js の基本

vue

Vue.js は、公式ページにおいて Vue はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。 と説明されている通り、ユーザインタフェース - HTML(DOM) とその上で制御することに特化したフレームワークです。 提供される機能がユー…

Vue.js でリアクティブな動作を見る (2)

こちらが前回の例 ですが1つ書き忘れていたことがありました。 ラベルの表示内容はオブジェクト { name: '' } の name の変化に反応して変わるわけですが、 このオブジェクトのプロパティ name の値もまた、input タグの入力内容に反応して自動的に内容が書…

Vue.js でリアクティブな動作を見る

テキストボックスの内容を、別のラベルの中に転記したいとします。 jQuery を使った典型的なコードでは、以下のようになります。 これは、 テキストボックスへの入力が発生したら テキストボックスの要素を取得してそのvalue値を取得し ラベルの要素を取得し…