frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

CodepenでできるVueの基礎を学ぶVol.1

スポンサードリンク


スポンサードリンク


こちらの記事は基礎から学ぶVue.jsの内容を学習した記録です。

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js


こちらの記事で気になることは本の中に全て書いてありそうな気がするので是非参照してみてください。

基礎から学ぶVue.js

まずこちらの本かなり分かり易いです。

数年前に手を出したことがあるのですが、途中で分からなくなってやめてしまった自分には、とても分かり易くなっていてあの時わからなかったこともこういうことだったんだと体系的に学べます。

さて、私は一旦Codepenで手軽に学んでいますのでその記録を載せてみます。

学び始めの人は、それを実際に動かしたり変えたりして遊んでみると良いかもしれません。

フォーム入力との同期

See the Pen vVNgEX by funclur (@funclur) on CodePen.


var app = new Vue({
  el: '#app',
  data: {
    message: '初期メッセージ'
  }
})
  <div id="app">
    <p>{{message}}</p>
    <input type="text" v-model="message">
  </div>

クリックイベント

See the Pen VEvPYa by funclur (@funclur) on CodePen.

var app = new Vue({
  el: '#app',
  methods: {
    handleClick: function(event) {
      alert(event.target)
    }
  }
})
<div id="app">
    <button v-on:click="handleClick">click</button>
 </div>

条件分岐

See the Pen GYprrE by funclur (@funclur) on CodePen.

var app = new Vue({
  el: '#app',
  data: {
    show: true
  }
})
  <div id="app">
    <button v-on:click="show=!show">切り替え</button>
    <p v-if="show">Hello Vue.js</p>
  </div>

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

See the Pen LgpxLN by funclur (@funclur) on CodePen.

var app = new Vue({
  el: '#app',
  data: {
    show: true
  }
})
  <div id="app">
    <button v-on:click="show=!show">切り替え</button>
    <transition>
      <p v-if="show">Hello Vue.js</p>
    </transition>
  </div>

オプションの構成

See the Pen qJORVZ by funclur (@funclur) on CodePen.

var app = new Vue({
  // elはアプリケーションを紐づける要素
  el: '#app',
  // dataはアプリケーションで使用するデータです
  data: {
    message: 'Vue.js'
  },
  // computedはdataと同じように扱うことができる関数によって算出されたデータです
  computed: {
    computedMessage: function(){
      return this.message + '!'
    }
  },
  // ライフサイクルとはVue.jsのおはようからおやすみまでの一定のサイクル
  // createdは特定のタイミングで呼び出す9こあるライフサイクルフックメソッドのうちの一つ
  // 
  created: function(){
    //行いたい処理
  },
  // イベントハンドラなどのメソッド
  methods: {
    myMethod: function(){
      //行いたい処理
    }
  }
})

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

vue.jsを学ぶならudemyもおススメです!