エンジニアのひよこ_level10

【毎日更新!】新卒2年目エンジニアブログです! プログラムだけじゃなく、マネジメントとかも書いていきたい!

【Vue】Vueの勉強始めようpart1(Hello World他、基礎)【522日目】

前回

www.nyamucoro.com

参考書籍

実際のコード

■プルリクエス

github.com

■最終ブランチ

GitHub - klack710/study-vue at ep42

■作ったもの(ブランチはdevelop参照なので、今後も更新されます)

klack710.github.io

今回やったことは?

  1. Hello World表示
  2. クリックイベント追加
  3. バインド

学んだメモ

  1. v-modelでバインド。dataに同じ名前を用意しないと、バインドされないよ。
  2. id="app"でインスタンス化したのに、#app外でタグ用意しても意味ないよね!!!(ハマった)
  3. transition専用のタグ、それ用のCSSが定義できるとか何言ってるかわかんない
<div id="app">
    <ol>
        <li v-for="item in list">{{ item }}</li>
    </ol>
</div>
<button v-on:click="handleClick">リストにおれんじが増えるよ!</button> //←こいつうううう

感想は?

Vueの基礎中の基礎の時点で、すでに新しい考え方が生まれてて、びっくり。楽しい。

今回の学びの3.はかなり新鮮でした。

あと、学習コスト低いというのは間違いない。jQueryとか触ってた人ならあっという間だと思う。

これは読み進めるのが楽しみですね!