【Vue.js】Vue.jsの基本サイト管理者その他Vue.js【Vue.js】Vue.jsの基本その他2021.12.16この記事は約4分で読めます。属性のバインデイングリストを表示するインデックスを取得するVue.jsライブラリの読み込みVue.jsはCDNからも利用できます。src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>head内でCDNを読み込む。自分のスクリプトはmain.jsに書くとする。当然だが、CDN読み込みはmain.jsよりも上で行う必要がある。}})elとdataがオプションとして設定されている。elオプションelオプションの値には、DOM要素を設定します。jQueryと同じように、CSSセレクタの文字列で設定できます。ここでは、#exampleとすることで、id="example"のDOM要素を指定しています。指定されたDOM要素は、テンプレートとなり、テンプレート内では、Vue.jsの機能が使えます。dataオプションdataオプションには文字通り、データを設定します。基本的にあらゆるデータを登録でき、テンプレートからアクセスすることができます。アクセスし、表示させることができます。これはバインディングと呼ばれ、テンプレートとデータの結びつけのことです。{{}}内にはJSを書きます。文字列なら、クオーテーションが必要です。id="example">{{`${greeting}という挨拶。`}}</div>再レンダーデベロッパーコンソールから、appインスタンスのgreetingの値を書き換えることで、即座に画面の表示も更新されます。バインドされた値が更新されると、画面も更新されます。画面に表示された文字も書き換わる属性のバインデイングDOM要素の属性と、Vueインスタンスのデータをバインディングする(結びつける)こともできます。属性の場合、v-bindという特別な属性を使います。{{`${greeting}という挨拶。}})v-vind:hrefと書くこともできますが、:だけで省略もできます。いうディレクティブを使うと、配列またはオブジェクトを繰り返し処理して表示できます。},});インデックスを取得する()で囲み、インデックスにアクセスします。