クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

Vue.js

Vue.js 一番簡単なサンプル

投稿日:

Vue.jsが流行しているようですので、勉強していきたいと思います。
まずは公式ページにもある、一番簡単なサンプルを作っていきましょう!

 

Vue.jsの読み込み(Vue.js一番簡単なサンプル)

CDNがありますので、そちらを参照します。
開発用と本番用があるみたいですが、今回は本番用を参照します。

 

HTML(Vue.js 一番簡単なサンプル)

Vue.jsのオブジェクトは、自身の有効範囲を「id」で指定できます。
今回は「app」というidを付けておきます。

その中に「{{ message }}」と書いておきます。
これがVue.jsのオブジェクトで作ったものと紐付けられることになります。

次にVue.jsのオブジェクトを作っていきましょう。

 

スクリプト(Vue.js 一番簡単なサンプル)

「script.js」を新しく作ってください。
ここでVue.jsのオブジェクトを作っていきます。

 

[ 2行目 ]
「el: ‘#app’」でHTMLで指定したidと同じものを設定します。

[ 3〜5行目 ]
Vue.jsで使用する変数は「data」オブジェクトの中で宣言します。
今回は「message」という変数を作り「Hello Vue!」という文字列を入れておきます。

これでVue.jsの一番簡単なサンプルが出来上がりました。
表示させてみると画面に「Hello Vue!」と表示されているはずです。

See the Pen xjggGe by clue-design (@clue-design) on CodePen.0

大きな画面でみたい場合はこちらから。

スクリプトで作ったオブジェクトの変数の値で、「{{message}}」が置き換わっているというサンプルですね。

色々と面白いことができそうですね!

-Vue.js

執筆者:

関連記事

Vue.js 双方向バインディングサンプル(v-model)

Vue.jsの強力な機能の1つに、双方向バインディングがあります。 難しそうな名前ですが、簡単に言うとスクリプト側の変数とHTML側の変数を結びつける機能です。 今回作るサンプルは、HTML側の「テキ …

Vue.js for文のような繰り返し処理はどうやるの?サンプル(v-for)

もちろんVue.jsにも繰り返し処理があります。 「v-for」を使います(分かりやすい名前ですね)。 早速、どうやるのか試していきましょう! スクリプト(Vue.js for文のような繰り返し処理は …

Vue.js クリックで関数を実行させるサンプル(v-on、methods)

Vue.jsのタグに対するイベントは「v-on」を使います。 今回は、ボタンがクリックされた時に関数を実行してみましょう! スクリプト(Vue.js クリックで関数を実行させるサンプル(v-on、me …

Vue.js if文のような分岐処理はどうやるの?サンプル(v-if)

Vue.jsにもif文の代わりになる仕組みがあるので紹介したいと思います。 「v-if」という属性を使います。 今回は、条件が一致していたら表示、一致していなければ非表示されるサンプルを作ってみましょ …

Vue.js v-forでインデックス(カウンタ)を付けるサンプル(v-forでindex)

Vue.jsも少しずつ勉強していこうと思います。 そのままでも便利なv-forですが、何回目のループかを知りたい場合があります。 その場合もv-forだけで対応可能です。具体的にはv-forで展開され …


comment

メールアドレスが公開されることはありません。