Upgrade to Pro — share decks privately, control downloads, hide ads and more …

今日から始めるVue.js

Takahito Hashimoto
October 28, 2018
210

 今日から始めるVue.js

Takahito Hashimoto

October 28, 2018
Tweet

Transcript

  1. data <div id=“app”> {{ message }} <input type=“text” v-model=“message”> </div>

    <script> var vm = new Vue({ el: ‘#app’, data: { message: ‘Hello World!’ } }); </script> • まずはHello Worldから! • Vue.jsのインスタンを宣 言してdomの指定要素に バインドする • {{ message }} (Mustacheタグ)を使うこ とで動的に値をdomに入 れることが出来る。
  2. computed <script> var vm = new Vue({ el: ‘#app’, data:

    { arr: [‘hoge’, ‘fuga’, ‘puyo’] } computed: { combinedList: function () { return this.arr.join(‘ ‘); } } }); </script> • 算出プロパティ • 依存するものが更新されると自 動的に更新してくれる • new Date()などの更新は検出 してくれないので注意 <div id=“app”> {{ conbinedList }} </div>
  3. methos <div id=“app”> <button v-on:click=“hello”> Click! </button> </div> <script> var

    vm = new Vue({ el: ‘#app’, methods: { hello: function () { alert(‘Hello World!’); } } }); </script> • methodに関数を定義する • Domにv-on:clickなどで定義す ることで呼び出しすることがで きる。 • 算出プロパティと違って呼び出 すたびに評価される
  4. コンポーネント <div id=“app”> <hello-world v-bind:name=“Vue.js”> </hello-world> </div> <script> Vue.component(‘hello-world’, function()

    { props: [‘name’], template: ` <span> Hello {{ name }} !! </span> ` }); </script> • コンポーネントを定義すること で塊を作ることができる • 親から値を渡して子で使える • 子のイベントから親のイベント を呼び出すこともできる
  5. v-for <div id=“app”> <span v-for:”(item, index) in items” v-bind:key=“index”> {{

    item }} </span> </div> <script> var vm = new Vue({ el: ‘#app’, data: { items: [ ‘aaa’, ‘bbb’, ‘ccc’] } });</script> • バインドされているインスタン スのdataないの要素をfor文で まわして表示できる • keyの指定は必須
  6. v-if <div id=“app”> <span v-for:”(item, index) in items” v-if=“index %

    2 == 0” v-bind:key=“index”> {{ item }} </span> </div> <script> var vm = new Vue({ el: ‘#app’, data: { items: [ ‘aaa’, ‘bbb’, ‘ccc’] } });</script> • 条件付きレンダリング • v-if の評価結果が真であれば対 象の要素が描画される
  7. 実演 19 • TODOアプリ作ります • webpackは使いません • HTMLファイル1つ + javascirpitファイル1つ

    • CSSはbootstrapを拝借します • データはローカルストレージに保存