例えば、コンポーネントを使ってブログを作成するとなると、記事のタイトルや投稿内容などのデータをコンポーネントに渡して処理することになります。今回は、コンポーネントにデータを渡す方法について書きます。 カスタム属性としてデータを渡す Vueインス…

以前の記事(Ajaxで外部データを取得する)で、Ajaxを利用して外部データを取得するコードをご紹介しました。このコードでは、JavaScriptのコードの中にHTMLのコードが含まれていました。今回は、JavaScriptからHTMLを分離する例を書きます。 以前のコード:XML…

以前、mustacheの記事を書きましたが、勉強し直したので改めて記事にします。今回は、HTMLとJavaScriptの分離に焦点を当てて書きます。 HTMLを挿入する例 HTMLのテンプレート化 HTMLコードの分離 まとめ 参考 HTMLを挿入する例 id属性がresultである要素の子…

jQueryのAjaxを使って、外部データ(JSON、XML、HTML)を取得する方法を見ていきます。 JSONの取得 XML(RSS)の取得 HTMLの取得 まとめ 参考 JSONの取得 ex.)気象庁のサイトから東京都の天気予報のデータをJSON形式で取得 取得先:https://www.jma.go.jp/bosai/f…

外部サイトでJSONデータをJSONPとして公開している場合、そのデータを読み込んで利用することができます。 今回は、JSONデータの読み込みについて書きます。まず、ローカルフォルダにデータを用意して、それを読み込んでみます。次に、外部サイトにあるデー…

コンポーネントの基本の記述について書きます。ここでは、クリックイベントを持つコンポーネントの例を簡単に見ていきます。他の記事でも書きましたが、改めてコンポーネントが再利用可能であることを確認します。 コンポーネントの基本の記述 コンポーネン…

Atomでエディタの設定やパッケージの追加などをして、カスタマイズすると思います。何らかの理由でAtomを再インストールして以前の設定に戻したい場合、記憶を頼りに戻すことは難しいです。そこで、Atomの設定ファイルをGitHubで管理します。Atomを再インス…

コンポーネントで再利用可能なパーツを作ります。つまり、ページのある箇所のHTML、CSS、JavaScriptを部品に切り出して、再利用できる形にします。例えば、ナビゲーションバーやヘッダー、フッターを部品に切り出して使うことが考えられます。そして、切り出…

入力フォームにタイプすると要素を即座に更新します。v-modelは、input要素、textarea要素、select要素などが対象です。v-modelでデータと処理を紐づけることで、データとUIに集中できます。 v-model {{}}内にJavaScriptの式を書く 参考サイト v-model <div id="app"> <input type="text" v-model="message"> <p>Hel</p></div>…