Vue.js 一番簡単な方法でHello Worldしてみる

Vue.js 一番簡単な方法でHello Worldしてみる

vue-cliを利用すれば 環境を簡単に構築してくれますが、今回は基礎を理解するため、利用せずにHello Worldから実装していく

環境

  • OS  Windos10
  • エディタ VScode

Hello WorldをVue.jsで実装

下記のソースコードをindex.htmlとして作成する

保存したファイルをブラウザで開いて確認するとHello Worldが表示される

v-bindとv-ifとv-for を使ってみる

v-bindとv-ifとv-forを利用したサンプルコードです。

下記のソースコードをindex.htmlとして作成。見やすいようにstyleも少し調整

保存したファイルをブラウザで開いて確認

vue.jsは、公式がわかりやすくて、評判通り学習コストが低いと思います。