【初心者向け】最初に覚えるべき2つのディレクティブ機能【Vue.js2】 #vue2 – Qiita HTMLとCSSは書けるJavaScript初心者が、覚えたてのVue.jsの基本ディレクティブについて解説した記事です！Vue.js興味あるけど何から覚えればいいの？という方の参考になればうれしいです。 Vue.jsとは Vue.jsは、データの変更に応じて自動的にDOMを更新し、表示や動作を変えることができるJavaScriptフレームワークです。データを変更すると自動的にUIに反映され、DOMを操作する必要がほとんどありません。 そのため、HTMLテンプレート内で条件分岐や動的なコンテンツの制御が可能になります。 私のようなJavaScript初心者にとっては、馴染みのあるHTMLの書き方でプログラミングっぽいことができるので、取っつきやすいのではないかと思います！ 最初に覚えるべき2つのディレクティブ機能 ディレクティブを使えば、HTML要素に特定の動作を追加することができます。Vue.js初心者が最初に覚えるべき2つのディレクティブについて説明します。 1．条件によってコンテンツを出しわける（v-if） 条件によって要素の表示を切り替えたい、ということありませんか？例えば、在庫の有無で表示を切り替えたいとか。 そんな時に、v-ifのディレクティブが使えます。 以下は商品の在庫の有無で、金額部分の表示を切り替える場合の記述例です。 id="sample"> v-if="stock === 0" class="price_outofstock">売り切れ v-else class="price">{{price}}円 script> new Vue({ el: '#sample', data: { stock: 0, // 在庫数をここで設定 price: 2500 // 商品の価格をここで設定 } }); script> 上記では、ストックが0の場合（v-if="stock === 0"）は売り切れ、それ以外（v-else）は金額を表示、という条件分岐を行っています。 scriptタグ内のpriceが更新されると、HTMLの{{price}}円も更新されます。 ■v-ifとv-showの違い v-ifの他に

【初心者向け】最初に覚えるべき2つのディレクティブ機能【Vue.js2】 #vue2 – Qiita

HTMLとCSSは書けるJavaScript初心者が、覚えたてのVue.jsの基本ディレクティブについて解説した記事です！Vue.js興味あるけど何から覚えればいいの？という方の参考になればうれしいです。 Vue.jsとは Vue.jsは、データの変更に応じて自動的にDOMを更新し、表示や動作を変えることができるJavaScriptフレームワークです。データを変更すると自動的にUIに反映され、DOMを操作する必要がほとんどありません。…

Empecé con #VueJS #Vue2 usando la Options API: data, methods, computed... todo organizado.​

Ahora, con #Vue3 y la Composition API (script setup, lang="ts"), disfruto de una estructura más modular y mejor integración con #TypeScript.​

¿Tú cuál prefieres?