Vue.js童貞がネコ本読んで得たもの①

Vue.js童貞がネコ本読んで得たもの①:

はじめに

どうも、Vue.js童貞です。

JavaやRubyでバックエンドをずっと開発してきて、「センスがないから」とか「UIとか笑使えればええやん」とか言いながら逃げ続けてきたフロントエンドの領域ですが、どうやら抱えているプロダクトの影響でそろそろ逃げきれなくなりそうなので、初心に立ち返って０から勉強し直しています。

その過程で通称「ネコ本」を購入して自己学習をシコシコしてきたので、そこで学んだことを本稿に寄せることで、学んだことの知識の定着を測ろうかと考えた次第です。

ネコ本とは？

Mio様の名著「基礎から学ぶ Vue.js」です。
https://www.amazon.co.jp/dp/B07D9BYHMZ

Vue.jsとは？

2014年にリリースされたJavaScriptのフレームワークですね。

「学習コストが低い」「柔軟性が高い」「日本語ドキュメントが豊富」という特徴があります。

「日本語ドキュメントが豊富」←ここ大事ですね。英語ができないエンジニアにとっては死活問題です。

競合は？

React、Angularあたりですかね。よく知らないので差別化できる特徴はわからないです。

Angularはまだ触れていないのでわからないですが、Reactは少し触れてみてVueと比較して習得まで高いハードルを感じました。

こいつは仲良くなれそうにないですね。ちょっとVue.jsを習得してからまたチャレンジしてみたいと思います。

童貞卒業までの道程

• 基本
• データバインディング、条件分岐、繰り返し // ←今日はここまで
• ハンドラ
• 算出プロパティ
• ウォッチャ
• コンポーネント、VueCLI、単一ファイルコンポーネント
• Vuex
• Vue Router

基本

Vueクラスのインスタンスの生成テンプレート

vue = Vue.new({ 
  el: '#app', 
  data: { 
    message: "Hello Vue.js" 
  }, 
  computed: { 
    computedMessage: function(){  
      return this.message + "!" 
    }, 
  }, 
  created: { 
  // アクションフック 
  }, 
  methods: { 
    myMethod: function(){ 
    }, 
  }, 
}) 

データバインディング

Vueのデータバインディングを行うにはデータを全て「リアクティブ」なデータとして定義する必要がある。

一般的に、リアクティブとは「反応できる」とか「反応的な」という意味だが、

vue一度定義したデータを、呼び出したり、変更したりした際に様々なフック処理を呼び出すような状態であることを指す。

Vueインスタンスのdataオプションに定義することで、その文字列や配列、オブジェクトはリアクティブなデータとなる。

Vue.new({ 
  el: '#app', 
  data: { 
    message: "Hello Vue.js", // こいつがリアクティブなデータとして登録された文字列 
    ok: true, 
    items: [ 
      '' 
    ] 
    error : null 
  } 
}) 

バインディングしたデータを描画したい場合、以下のように二重の波線括弧で囲む

<div id="app"> 
  <p>{{ message }}</p> 
</div> 

属性に対してバインディングしたい場合は、v-bind:もしくは省略形として:と記載する。

<div id="app"> 
  // これでは動かない 
  <input type="text" value={{message}}> 
  // これなら動く 
  <input type="text" v-bind:value="message"> 
  // これでも動く 
  <input type="text" :value="message"> 
</div> 

条件分岐

v-ifを使う

<div id="app"> 
  <p v-if="ok">okはtrue</p> 
  <p v-else>okはtrue</p> 
</div> 

描画に伴うものだけであれば、v-showも使えるが、htmlソースから消えるわけではない。

<div id="app"> 
  <p v-show="ok">ok</p> 
</div> 

繰り返し

v-for 繰り返し中の変数 in 対象の配列を使う

<div id="app"> 
  <ul> 
    <li v-for="item in items">{{item}}</li> 
  </ul> 
</div> 

的な感じで。

終わりに

初めてqiita記事書いたけど疲れたよ(´ཀ`」 ∠)_

次回に続く