クルーデザイン

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-bind)

Vue.jsでは、属性の値を自由に入れ込むことができます。 では「v-bind」を使って目的の属性に値を入れてみましょう! 今回は、imgタグの属性を操作してみようと思います。 スクリプト(Vue.j …

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

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

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

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

Vue.js CSSを操作して、スタイルを動的に設定する(v-bind:style)

Vue.jsでもスタイルの操作が可能です。 バインディングもされますので、オブジェクトの値を変えるだけでスタイルを変更することができます。 アイデア次第で面白いものが作れそうですね。 早速簡単なものを …

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

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


comment

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