当ブログで紹介したVue.jsの記事を一覧にまとめました。Vue.jsは、UIを構築するのに便利です。フロント部分の制作に役立つことでしょう。 Vue.jsの記事まとめ 関連項目 Vue.jsの記事まとめ 【Vue.js】Vue.jsの導入 【Vue.js】条件付きレンダリング:v-ifとv-s…

コンポーネントでv-modelを使う方法について書きます。v-modelをそのまま使うのではなく、v-bind:valueとv-on:inputに置き換えて実現します。 v-modelとv-bind:value,v-on:input コンポーネントでv-modelを使う 最終的な記述 参考サイト v-modelとv-bind:val…

私自身、Vue.jsの理解がまだまだ浅いです。メモ程度のものとして見て頂ければと思います。 今回は、コンポーネントにイベントを設定する方法について書きます。ポイントは、$emit()と$eventです。イベントをどのように紐づけるのかや、イベントでの値の渡し…

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

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

コンポーネントで再利用可能なパーツを作ります。つまり、ページのある箇所の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>…

Vue.jsでイベント処理をしてみます。今回は、簡単にクリックしたときの処理を書きます。クリック以外のイベントも試してみると良いです。 v-on 参考サイト v-on HTML側は、v-on:イベント名="メソッド名"で指定します。JavaScript側は、Vueインスタンスのオプ…

v-bindを使ってHTMLの属性を書き換えます。ここでは、href属性とclass属性を書き換えてみます。 v-bindでhref属性を書き換える v-bindの間違った書き方 v-bindでclass属性を書き換える v-bindでhref属性を書き換える <div id="app"> <p><a v-bind:href="url">{{title}}</a></p> </div> var app = new Vue({ el: '#…

v-forを使って、繰り返し処理をします。配列の場合とオブジェクトの場合を見ていきます。若干、書き方が異なるので注意してください。 v-for:配列 v-for:オブジェクト 参考サイト v-for:配列 配列をv-forで処理する書き方です。 <div id="app"> <ul> <li v-for="color in colors">{{color.name}}</li> </ul> </div> var app …

v-ifとv-showを使って表示を制御します。trueの時に表示して、falseの時に非表示にします。HTMLのコードがどのようになるのか確認します。v-ifとv-showの違いについても書きます。 v-ifで表示の制御 複数の要素を出し分ける v-showで表示の制御 ディレクティ…

去年、Vue.jsの勉強を始めようとしましたが、他の勉強を優先したので、後回しになってしまいました。そちらの勉強が一通り済んだので、今年に入ってからVue.jを勉強しました。まずは、Vue.jsの導入と基本の表示について書きます。 Vue.jsとは CDN版とVue CLI…