【Vue.js】基礎知識

はじめに

現在、エンジニア転職活動中です。本日から、Vue.jsの学習を始めましたので、アウトプットとして記述していきます。

なぜVue.js?

なぜ、Vue.jsの学習を始めたのかを記載します。

・転職活動用に作成しているポートフォリオが、HTML,CSSとBootstrapの多用により、サイトに動きがないため。
・GoogleTrendsにて比較を見た結果、Vue.jsの比率が高く、今後入社した際にも、Vue.jsを採用されているまたは今後採用する予定の企業も多いと感じたため（https://trends.google.com/trends/explore?date=today%205-y&q=vue.js,react.js,angular.js）
・これまでRuby,Ruby on Railsの学習に注力しており、フロントエンドの知識があまりなかったため

以上の理由により、Vue.jsの学習を初めていきたいと思いました。

導入方法

Vue.jsの導入はダウンロードまたはCDNを利用する方法がありました。
今回はCDNを利用してVue.jsを読み込むことで、利用していきます。

index.html

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

基本機能

テキストのバインディング

index.html

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

practice.js

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

繰り返し

index.html

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

practice.js

var app = new Vue({
  el: '#app',
  data: {
    list: ['野球', 'サッカー', 'バスケットボール']
  }
})

イベント発火

index.html

<div id="app">
  <button v-on:click="handleClick">Click</button>
</div>

practice.js

var app = new Vue({
  el: '#app',
  methods: {
    handleClick: function(event) {
      alert(event.target)
    }
  }
})

フォーム入力の同期化

index.html

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

practice.js

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

条件分岐

index.html

<div id="app">
  <p v-if="show">Hello Vue.js!</p>
</div>

practice.js

var app = new Vue({
  el: '#app',
  data: {
    show: true
  }
})

トランジションとアニメーション

index.html

<div id="app">
  <button v-on:click="show=!show">切り替え</button>
  <transition>
    <p v-if="show">Hello Vue.js!</p>
  </transition>
</div>

practice.js

var app = new Vue({
  el: '#app',
  data: {
    show: true
  }
})

practice.css

.v-enter-active, .v-leave-active {
  transition: opacity 1s;
}

.v-enter, .v-leave-to {
  opacity: 0;
}

おわりに

本日学んだ基本知識です。明日以降構成の内容などアウトプットしていきたいと思います。