ハイスペック発達障害への道

世の中の発達障害の方々が活躍できる世の中を目指して、まずは自分が頑張ります。

2018年7月19日のプログラミング修練記

フロントエンド技術を体得するためにVue.jsを勉強している次第。

公式ドキュメントに載っている「Hello, World!!」をやってみる。

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

同じくVue.jsから。

<div id="app">
  <span v-if="seen">Message</span>
</div>
var app = new Vue({
  el: '#app',
  data: {
    seen: false
  }
})

seenの値がfalseになっているので、Messageは実際には画面上に表示されない。

こちらもVue.jsから。今度は「繰り返し」をば。

<div id="app">
  <ol>
    <li v-for="list in lists">
      {{ list.text }}
    </li>
  </ol>
</div>
var app = new Vue({
  el: '#app',
  data: {
    lists: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})