Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

vue.js 0.11.x その0001 vue.jsのダウンロードとデモをやってみる

参考にさせて頂いたページ

Vue.js

GitHub - vuejs/vue: A progressive, incrementally-adoptable JavaScript framework for building UI on the web.

お手軽データバインディングライブラリ「Vue.js」を使いこなそう(基礎編) (1/4):CodeZine(コードジン)

バージョン

Vue.js v0.11.5

ダウンロードして、読み込む

GitHubのページから、vue-master.zipをダウンロードした。

解凍して、distディレクトリの中に、

  • vue.js
  • vue.min.js

があるので、vue.min.jsを使用してみる。

GitHubページに書いてあるサンプルをコピペしてみる

vue_sample.html

<div id="demo">
  {{message}}
  <input v-model="message">
</div>

vue_sample.js

var demo = new Vue({
  el: '#demo',
  data: {
    message: 'Hello Vue.js!'
  }
})

ブラウザで見てみる

vue_sample.htmlをブラウザで開いて、フォームの文字を編集するとリアルタイムにメッセージが変化する。

このソースコードを読んでおく

まず

demo = new Vue();

する。

newするときに、連想配列で引数を渡すので

var demo = new Vue({
  el: '#demo',
  data: {
    message: 'Hello Vue.js!'
  }
})

のように書く。

elは監視対象となるブロックのセレクタ

dataにはさらに連想配列を格納する。

htmlは

<div id="demo">
  {{message}}
  <input v-model="message">
</div>

のようにid=“demo"の要素の中に

  {{message}}
  <input v-model="message">

の二つとも入れてあげる。

<div id="demo">
  {{message}}
  <input v-model="message">
  {{message}}
  {{message}}
</div>

みたいな感じで{{message}}を複数入れることもできる。

message: ‘Hello Vue.js!’
v-model=“message
{{message}}

みたいな感じで紐づいていることがわかる。

今回はここまで。